The Core iOS Developer’s Cookbook, Fifth Edition (2014)

View Geometry

While direct control of view geometry is less necessary now than it used to be, thanks to Apple’s introduction of Auto Layout, these tasks continue to play a fundamental role in some situations when working with views. Some of Apple’s new APIs, such as the ones that introduce view physics, do not play nicely with Auto Layout. Because of this, you should master the basic ways you interact and adjust view geometry.

Geometric properties define where each view appears, what their sizes are, and how they are oriented. These properties remain valid, even when using Auto Layout; under Auto Layout, they are managed by the constraint system. You can still query and view these properties to retrieve information about where a view has been placed and what geometric transformations have been applied to it.

When working with dynamic views, views with short life spans, and ones whose geometry changes during presentation, you may need to step away from constraints and focus on immediate handling of the basic layout associated with each view. The UIView class provides two built-in properties that define these layout aspects.

Every view uses a frame to define its boundaries. The frame specifies the outline of the view: its location, width, and height within the coordinate system of its parent view. The associated bounds and center properties, respectively, define the frame rectangle within the view’s owncoordinate system and the geometric center of the frame in the parent’s coordinate system. These three properties are tightly integrated.

If you change a view’s frame, the view updates to match the new frame. If you use a bigger width, the view stretches. If you use a new location, the view moves. The view’s frame delineates each view’s outline. View sizes are not limited to their superview size or even the screen size. A view can be smaller or larger than the screen. It can also be smaller or larger than its parent. When a subview is larger, the subview’s visible area overflows the edges of the parent. You can use clipToBounds on the parent view to restrict the child from displaying outside the parent’s bounds.

Views also use a transform property that updates a view’s presentation, via affine transformations. These are mathematical equations that adjust a view’s 2D geometry. A view might be stretched or squashed by applying a transform, or it might be rotated away from vertical. Together, the frame and transform fully define a view’s core geometry.

Frames

A frame rectangle refers to the outline of a view in terms of its parent’s coordinate system. Frames use a CGRect structure, which is defined as part of the Core Graphics framework, as its CG prefix suggests. A CGRect is made up of an origin (a CGPoint, x and y) and a size (a CGSize, width and height). When you create views outside Auto Layout, you normally allocate them and initialize them with a frame. Here’s an example:

CGRect rect = CGRectMake(0.0f, 0.0f, 320.0f, 416.0f);
myView = [[UIView alloc] initWithFrame:rect];

Views provide two fundamental CGRect properties, which are closely tied together: frame and bounds. Frames are different from bounds in terms of their coordinate system. Frames are defined with respect to the parent’s system. Bounds are defined with respect to the view’s own coordinate system. For that reason, a view’s bounds typically use a zero origin. Its coordinate system normally begins at the top-left corner. For some views, like scroll views, bounds may extend beyond their visual frame.

Rectangle Utility Functions

As you’ve seen, the CGRectMake() function creates its new rectangle using four parameters: the origin’s x and y locations, the width of the rectangle, and the height. This method is a critical utility for creating frames. You may want to be aware of several other convenience functions, in addition to CGRectMake(), that help you work with rectangles and frames:

NSStringFromCGRect(aCGRect) converts a CGRect structure to a formatted string. This function makes it easy to log a view’s frame when you’re debugging.

CGRectFromString(aString) recovers a rectangle from its string representation. It is useful when you’ve stored a view’s frame as a string in user defaults and want to convert that string back to a CGRect.

Although not a function, [NSValue valueWithCGRect:rect] returns a new Objective-C value object that stores the passed rectangle. You can then add the object to dictionaries and arrays as needed. The CGRectValue method retrieves the rectangular structure from theNSValue object. Variations on this approach exist for most Core Graphics types, including points, sizes, and affine transforms.

CGRectInset(aRect, xinset, yinset) enables you to create a smaller or larger rectangle that’s centered on the same point as the source rectangle. Use a positive inset for smaller rectangles, and use a negative inset for larger ones.

CGRectOffset(aRect, xoffset, yoffset) returns a rectangle that’s offset from the original rectangle by x and y amounts that you specify. This is handy for moving frames around the screen and for creating easy drop-shadow effects.

CGRectGetMidX(aRect) and CGRectGetMidY(aRect) recover the x and y coordinates in the center of a rectangle. These functions make it very convenient to recover the midpoints of bounds and frames.

CGRectIntersectsRect(rect1, rect2) lets you know whether rectangle structures intersect. Use this function to know when two rectangular objects overlap. You can retrieve the actual intersection via CGRectIntersection(rect1, rect2). This returns the null rectangle if the two rects do not intersect. (Use CGRectIsNull(rect) to check.) The related CGRectContainsPoint(rect, point) returns true when a provided point is located within the (non-null) rectangle.

Compare rectangles using CGRectEqualToRect(rect1, rect2). This function checks whether two rectangles are equal in both their size and position. Similar methods include CGSizeEqualToSize(size1, size2) and CGPointEqualToPoint(point1, point2), which allow you to compare CGSize and CGPoint instances.

Other handy utilities include CGRectDivide(), which splits a source rectangle into two components, and CGRectApplyAffineTransform(rect, transform), which applies an affine transform to a rectangle and returns the smallest rectangle that can contain the results.

CGRectZero is a rectangle constant located at (0,0) whose width and height are zero. You can use this constant when you’re required to create a frame but are unsure what that frame size or location will be at the time of creation. Similar constants are CGPointZero andCGSizeZero.

Points and Sizes

The CGRect structure is made up of two substructures: CGPoint, which defines the rectangle’s origin, and CGSize, which defines its bounds. Points refer to locations defined with x and y coordinates; sizes have width and height. Use CGPointMake(x, y) to create points.CGSizeMake(width, height) creates sizes. Although these two structures appear to be the same (two floating-point values), the iOS SDK differentiates between them semantically. Points refer to locations. Sizes refer to extents. You cannot set myFrame.origin to a size.

Since CGRect, CGPoint, and CGSize are all structs, you can use a range of flexible struct initializations:

CGPoint origin = {0, 0};
CGSize size = {100, 200};
CGRect rect1 = CGRectMake(0, 0, 100, 200);
CGRect rect2 = {{0, 0}, {100, 200}};
CGRect rect3 = {origin, size};
CGRect rect4 = {origin, {100, 200}}
CGRect rect5 = {.size.width = 100, .size.height = 200, .origin = {0, 0}};

All of these CGRects are identical.

As with rectangles, you can convert the other structs to and from strings. NSStringFromCGPoint(), NSStringFromCGSize(),CGPointFromString(), and CGSizeFromString() perform these functions. You can also transform points and sizes to and from dictionaries.

Transforms

The iOS SDK includes affine transformations as part of its Core Graphics implementation. Affine transforms allow points in one coordinate system to transform into another coordinate system. These functions are widely used in both 2D and 3D animations. The version used with UIKit views uses a 3-by-3 matrix to define UIView transforms, making it a 2D-only solution. 3D transforms use a 4-by-4 matrix and are the default for Core Animation layers. With affine transforms, you can scale, translate, and rotate your views in real time. You do so by setting a view’s transformproperty. Here’s an example:

float angle = theta * (PI / 100.0);
CGAffineTransform transform = CGAffineTransformMakeRotation(angle);
myView.transform = transform;

The transform is always applied with respect to the view’s center. So when you apply a rotation like this, the view rotates around its center. If you need to rotate around another point, you must first translate the view to the desired point, then rotate, and then return from that translation. There are ways around this, involving working directly with the view’s layer property, but that approach is beyond the scope of this chapter.

To revert any changes, set the transform property to the identity transform. This restores the view back to the last settings for its frame:

myView.transform = CGAffineTransformIdentity;