DRAWING, SWIFT, PROGRAMMATIC UI, UIBEZIERPATH

Line Segments With UIBezierPath

Custom drawing can bring life to your application

Have you ever visited Paris? If you have, did you happen to stop at the Louvre? If so, you probably know that there’s a fantastic painting designed by the one and only Leonardo da Vinci called “The Mona Lisa.” Now we can’t help but wonder what was going on in his mind when Leonardo was creating this masterpiece.

As we look into designing applications for the AppStore, one thing we want to achieve is an excellent user interface. Creating unique styles in your application makes for a special moment, not only as a team but for consumer’s face also.

What is UIBezierPath?

Today, we are going to work withUIBezierPath. Let’s see how UIBezierPath could make your app better. UIBezierPathis a property forCGPathRef. Paths are vector-based shapes that are built using line and curve segments. Each segment consists of one or more points in a coordinate system. Here are some examples of each segment you can use:

Line segments:
• Rectangles
• Squares
• Polygons

Curve segments:
• Arcs
• Circles
• Complex Curved Shapes

What are bounds & frames?

Before we head into the example below, we need to discuss what the significant difference between them is. All UIView subclasses have two properties, “frame” and “bounds,” and both seem similar, and they return a CGRect.

Bounds:
— Views bounds refer to its coordinates relative to its own space (as if the rest of your view hierarchy didn’t exist).

Frame:
— Views frame refers to its coordinates relative to its parent’s space.

A few things:
1. If we create a view at X:0, Y:0, width: 150, height: 150. The frame and bounds are the same.
2. If we move the view to X:100, the frame will reflect that change, but the bounds will not. — Bounds are relative to the views own space; internally, the view has not changed.
3. If we transform the view, rotating or scaling it up. The frame will change to reflect that, but the bounds still won’t.

Best practice will be when changing the width or height of either frame and bounds; the other value is updated to match.

Better to modify bounds, center and transform and let UIKit calculate the frame for us.

Today we will talk about line segments; let’s go ahead and start with a basic single view application and call it “CustomDraw.” Your screen might look slightly different if you’re not running the newest Xcode(12.0).

From here, I usually set my projects up programmatically. Suppose you are unaware of how to do that, you can check out my article here. For this demonstration, we are working programmatically and will do everything in a separate UIView file and call it within our ViewController. Let’s set up our ViewController to take our UIView file.

This all we have to do with our ViewController.

Next, start with our first step in creating our rectangle drawing and create a new cocoa touch class that subclasses to UIView and name it ShapesView, and add our single path object.

As we can see, we have set up the views with a single path object. We can now create a function named “drawRectangle.” Everything we put into this view will be for creating our rectangle drawing. When configuring our rectangle, we want to default to a few things — defining our color, lineWidth, etc. Let’s start with our color and lineWidth and add our first point and line.

Now you might be saying to yourself, “I know I didn’t miss a step yet, what is Aaron talking about this init and required init wasn’t even discussed!” If you don’t have these things in the file and run the project, your view will be a black screen with your drawing. The above step allows us to have a transparent background to see our gorgeous teal line on gray color background.

Let’s go ahead and finish our rectangle. We would need to add three more lines and finish off with a close method. Now, we can define the magic numbers at the top for easier maintenance. For this demonstration, we are going to add them to our CGPoint.

As we can see, we were able to add our two last addLine methods, as well as the close path method. The close path finishes off the drawing for us by connecting it to the first point made on line 15. Lastly, we threw in a fill color to fill in our rectangle, and we are finished!

Paint your masterpiece

This example was to showcase the endless possibilities with a little dedication to customizable drawing. Deciding what to draw is hard, but with commitment, you too can be the next Leonardo da Vinci of the iPhone world.

Try to be your own Artist and start small like a circle; multiple circles around a UILabel can bring your boring background to life.