CAShapeLayer: Hardware-Accelerated Vector Drawing
A CAShapeLayer is a GPU-powered stencil for drawing vector shapes. It renders paths like lines and curves far more efficiently than drawing in draw(_:). Use it for custom UI like progress rings.
Why it exists
Standard CALayers are rectangular. Drawing custom, non-rectangular shapes by overriding a UIView's draw(_:) method uses the CPU and is inefficient, especially if the shape needs to be redrawn frequently for animations. CAShapeLayer was created to solve this by offloading vector drawing to the GPU.
The mental model
Think of a CAShapeLayer as a specialized hardware tool for vector graphics. You give it a blueprint (a CGPath) and style properties (like fillColor, strokeColor, lineWidth). The GPU then takes over, rasterizing the shape onto the screen incredibly fast. It's offloading the expensive drawing work from the CPU to dedicated graphics hardware.
How it works
You create a CAShapeLayer instance and add it to a view's layer hierarchy. You define a shape using a UIBezierPath (or CGPath) and assign it to the layer's path property. The layer then automatically renders this path. Because it's a CALayer subclass, many of its properties like strokeEnd (the percentage of the path that is stroked) are implicitly animatable, meaning Core Animation can interpolate changes on the GPU for you.
When to use it
Use CAShapeLayer for any custom shape that isn't a simple rectangle. This includes circular avatars with borders, pie charts, loading spinners, custom button shapes, and drawing lines or graphs. It's especially powerful when these shapes need to animate, as property changes can be hardware-accelerated.
When not to use it
For simple rectangular views with a background color and corner radius, a standard CALayer with its cornerRadius property is sufficient and simpler. For complex bitmap images or textures, CALayer's contents property is the right tool. CAShapeLayer is specifically for vector paths, not raster images.
One canonical example
Creating a circular progress bar. You define a circular UIBezierPath. You create two CAShapeLayers: one for the background track and one for the progress itself. Both share the same circular path. The progress layer's strokeEnd property is then animated from 0.0 to 1.0 to show progress, which Core Animation handles smoothly on the GPU without forcing any CPU-based redraws.
Interview question
When animating a custom, non-rectangular shape, what is the main advantage of using CAShapeLayer over overriding a UIView's draw(_:) method?
- a.It automatically manages the shape's memory footprint more efficiently.
- b.It allows for direct manipulation of individual path segments during animation.
- c.It utilizes the GPU for rendering, providing hardware-accelerated performance for animations.Correct
- d.It simplifies the definition of complex paths by offering a declarative syntax.
Why? this is the answer
CAShapeLayer's primary advantage for animations is offloading vector drawing to the GPU, which is far more efficient than the CPU-based drawing in draw(_:). While other options might seem beneficial, they are not the core reason for its performance superiority in animated scenarios.
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