UIBezierPath: Drawing Custom Shapes in Code
UIBezierPath is a digital pen for drawing custom shapes. You define a path with lines and curves, then fill or stroke it. It's essential for custom charts, icons, or non-rectangular views.
Why it exists
Standard UI components like labels and buttons are fundamentally rectangles. To create any shape that isn't a simple box—like a star, a wavy line, or a custom icon—apps need a way to describe a custom boundary. UIBezierPath provides this low-level, programmatic drawing capability.
The mental model
Imagine you have a pen and a piece of graph paper (your UIView). UIBezierPath is the set of instructions you give the pen. "Lift the pen and move to coordinate (10, 20)." This is moveTo(). "Now, draw a straight line to (50, 50)." This is addLine(to:). Finally, you command the system to either trace the lines with ink (stroke) or color in the resulting shape (fill).
How it works
You create a UIBezierPath object. You can start with a predefined shape (like a rectangle or oval) or build a custom one from scratch. To build a custom path, you first call moveTo(point:) to set the starting position. Then, you append segments like lines (addLine(to:)), arcs (addArc(withCenter:...)), or curves (addCurve(to:...)). Once the path is defined, you render it inside a view's draw(_:) method by setting properties on the current graphics context (like color and line width) and then calling the path's stroke() or fill() methods.
When to use it
Use it for creating custom UI controls (e.g., a star-shaped rating button), drawing data visualizations (line graphs, pie charts), creating masks to clip other views into non-rectangular shapes, or adding simple decorative elements like borders with specific rounded corners.
When not to use it
For performance-intensive graphics like games, use a dedicated framework like SpriteKit or Metal. For simple rectangular layouts, standard UIViews with background colors and the cornerRadius property are far more efficient. UIBezierPath is for vector drawing, not for displaying raster images like JPEGs or PNGs (use UIImage for that).
One canonical example
To draw a simple triangle, you subclass UIView, override its draw(_:) method, and add this code: let path = UIBezierPath(); path.move(to: CGPoint(x: 50, y: 10)); path.addLine(to: CGPoint(x: 90, y: 90)); path.addLine(to: CGPoint(x: 10, y: 90)); path.close(); UIColor.blue.setFill(); path.fill(); This creates a path, connects three points, closes the shape, and fills it with blue.
Interview question
For which UI development task is UIBezierPath the most appropriate tool?
- a.Creating a high-performance 2D game with many animated sprites.
- b.Defining the shape of a custom, non-rectangular UI element.Correct
- c.Applying a uniform rounded border to a standard rectangular UIView.
- d.Displaying a downloaded image file like a JPEG.
Why? this is the answer
UIBezierPath is specifically designed for drawing custom, non-rectangular shapes programmatically, making it ideal for unique UI elements. For images, UIImage is used; for games, SpriteKit or Metal are better; and for simple rounded corners, the UIView's cornerRadius property is more efficient.
Just read this? Test yourself on what you have been reading.
Read the original → developer.apple.com
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on ios — each one lists the topics its interview covers.
See open roles