iOS Drawing: Practical UIKit Solutions (2014)

---

Drawing and Auto Layout

Under Auto Layout, the new constraint-based system in iOS and OS X, a view’s content plays as important a role in its layout as its constraints. This is expressed through each view’s intrinsic content size. This size describes the minimum space needed to express the full view content, without squeezing or clipping that data. It derives from the properties of the content that each view presents. In the case of images and drawings, it represents the “natural size” of an image in points.

When you include embellishments in your pictures such as shadows, sparks, and other items that extend beyond the image’s core content, that natural size may no longer reflect the true way you want Auto Layout to handle layout. In Auto Layout, constraints determine view size and placement, using a geometric element called an alignment rectangle. As you’ll see, UIKit calls help control that placement.

Alignment Rectangles

As developers create complex views, they may introduce visual ornamentation such as shadows, exterior highlights, reflections, and engraving lines. As they do, these features are often drawn onto images. Unlike frames, a view’s alignment rectangle should be limited to a core visual element. Its size should remain unaffected as new items are drawn onto the view. Consider Figure 3-6 (left). It depicts a view drawn with a shadow and a badge. When laying out this view, you want Auto Layout to focus on aligning just the core element—the blue rectangle—and not the ornamentation.

Figure 3-6 A view’s alignment rectangle (center) refers strictly to the core visual element to be aligned, without embellishments.

The center image highlights the view’s alignment rectangle. This rectangle excludes all ornamentation, such as the drop shadow and badge. It’s the part of the view you want considered when Auto Layout does its work. Contrast this with the rectangle shown in the right image. This version includes all the visual ornamentation, extending the view’s frame beyond the area that should be considered for alignment.

The right-hand rectangle encompasses all the view’s visual elements. It encompasses the shadow and badge. These ornaments could potentially throw off a view’s alignment features (for example, its center, bottom, and right) if they were considered during layout.

By working with alignment rectangles instead of frames, Auto Layout ensures that key information like a view’s edges and center are properly considered during layout. In Figure 3-7, the adorned view is perfectly aligned on the background grid. Its badge and shadow are not considered during placement.

Figure 3-7 Auto Layout considers the view’s alignment rectangle when laying it out as centered in its parent. The shadow and badge don’t affect its placement.

Alignment Insets

Drawn art often contains hard-coded embellishments like highlights, shadows, and so forth. These items take up little memory and run efficiently. Therefore, many developers predraw effects because of their low overhead.

To accommodate extra visual elements, use imageWithAlignmentRectInsets:. You supply a UIEdgeInset structure, and UIImage returns the inset-aware image. Insets define offsets from the top, left, bottom, and right of some rectangle. You use these to describe how far to move in (using positive values) or out (using negative values) from rectangle edges. These insets ensure that the alignment rectangle is correct, even when there are drawn embellishments placed within the image.

typedef struct {
CGFloat top, left, bottom, right;
} UIEdgeInsets;

The following snippet accommodates a 20-point shadow by insetting the alignment rect on the bottom and right:

UIImage *image = [[UIImage imageNamed:@"Shadowed.png"]
imageWithAlignmentRectInsets:UIEdgeInsetsMake(0, 0, 20, 20)];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];

It’s a bit of a pain to construct these insets by hand, especially if you may later update your graphics. When you know the alignment rect and the overall image bounds, you can, instead, automatically calculate the edge insets you need to pass to this method. Listing 3-8 defines a simple inset builder. It determines how far the alignment rectangle lies from each edge of the parent rectangle, and it returns a UIEdgeInset structure representing those values. Use this function to build insets from the intrinsic geometry of your core visuals.

Listing 3-8 Building Edge Insets from Alignment Rectangles