Graphics Reference
In-Depth Information
4
Well, circles and ovals are good, but how about drawing rectangles with rounded corners?
Can we do that now, too?
Steve Jobs
We looked at the layer frame in Chapter 3, “Layer Geometry,” and the layer backing image
in Chapter 2, “The Backing Image.” But layers are more than mere rectangular containers
for colors or images; they also have a number of built-in features that make it possible to
create impressive and elegant interface elements programmatically. In this chapter, we
explore the various visual effects that can be achieved using
CALayer
properties.
One of the signature features of the iOS aesthetic is the use of
rounded rectangles
(rectangles with rounded corners). These appear everywhere in iOS, from homescreen
icons, to modal alerts, to text fields. Given their prevalence, you might guess that there
would be an easy way to create them without resorting to Photoshop. You'd be right.
CALayer
has a
cornerRadius
property that controls the curvature of the layer's
corners. It is a floating point value that defaults to zero (sharp corners), but can be set to
any value you like (specified in points). By default, this curvature affects only the
background color of the layer and not the backing image or sublayers. However, when the
masksToBounds
property is set to
YES
(see Chapter 2), everything inside the layer is
clipped to this curve.
We can demonstrate this effect with a simple project. Let's arrange a couple of views in
Interface Builder that have subviews that extend outside of their bounds (see Figure 4.1).
You can't really see from the figure that the inner views extend beyond their containing
