Taking Charge of UIView Transforms in iOS Programming
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Affine transforms represent one of the most-used and most-feared features in UIKit. Tied into direct interaction, you often run across them when working with gesture recognizers, animation, and any kind of view scaling and rotation. Much of the transform's frustration factor ties into the opaqueness of the underlying structure and the lack of easy human-relatable methods.
This article addresses that opaqueness by offering a number of simple tweaks that transform (if you pardon the pun) the CGAffineTransform structure into friendlier Objective-C-based properties and methods.
Basic Transforms
Affine transforms allow you scale, rotate, and translate UIView objects in your apps. You generally create a transform and apply it to your view using one of the following patterns. You either create or apply a new transform using one of the "make" functions:
float angle = theta * (PI / 100); CGAffineTransform transform = CGAffineTransformMakeRotation(angle); myView.transform = transform;
Or you layer a new change onto an existing transform using one of the "action" functions: rotate, scale, or translate.
CGAffineTransform transform = CGAffineTransformRotate(myView.transform, angle); myView.transform = transform;
Creating a new transform resets whatever changes have already been applied to a view. If your view was already scaled, for example, the first of these two examples would override that scaling and replace it with rotation. Figure 1 shows before and after for this scenario. The outer, larger, scaled view is replaced by the unscaled, smaller, rotated view. (The red circle marks the top-right corner of the view.)
)
In Figure 2, which follows the second example, the transform is layered. It adds to rather than replaces the scaling. In this case, the scaled view rotates.
)
Under the Hood
Every transform represents an underlying transformation matrix, which is set up as shown in Figure 3.
)
This matrix corresponds to a simple C structure:
struct CGAffineTransform {
CGFloat a;
CGFloat b;
CGFloat c;
CGFloat d;
CGFloat tx;
CGFloat ty;
};
typedef struct CGAffineTransform CGAffineTransform;
The UIKit framework defines a variety of helper functions specific to graphics and drawing operations. These include several affine-specific utilities. You can print a view's transform via UIKit's NSStringFromCGAffineTransform() function. Its inverse is CGAffineTransformFromString(). Here's what the transform values look like for the scaled (by a factor of 1.5) and rotated (by a factor of Pi/4) view discussed earlier:
2012-08-31 09:43:20.837 HelloWorld[41450:c07]
[1.06066, 1.06066, -1.06066, 1.06066, 0, 0]
These raw numbers aren't especially helpful. Specifically, this representation does not tell you exactly how much the view has been scaled or rotated. Fortunately, there's a way around that.
Retrieving Transform Values
You can easily calculate specific transform values from the affine structure's a, b, c, d, tx, and ty entries. Here are five methods that return a view's scale (in X and Y), rotation, and translation (in X and Y). The last two of these methods are admittedly trivial, but I included them for completeness.
- (CGFloat) xscale
{
CGAffineTransform t = self.transform;
return sqrt(t.a * t.a + t.c * t.c);
}
- (CGFloat) yscale
{
CGAffineTransform t = self.transform;
return sqrt(t.b * t.b + t.d * t.d);
}
- (CGFloat) rotation
{
CGAffineTransform t = self.transform;
return atan2f(t.b, t.a);
}
- (CGFloat) tx
{
CGAffineTransform t = self.transform;
return t.tx;
}
- (CGFloat) ty
{
CGAffineTransform t = self.transform;
return t.ty;
}
Using these methods, you determine exactly how much your view's been rotated or scaled. That's particularly helpful when you have been using gesture recognizers to interactively stretch, shrink, and rotate views with combined transforms. These methods can help set bounds on scaling. For example, you might want to limit a view's scale to just twice its normal size or keep it from shrinking below half the original size. Checking the current scale lets you do that.
Setting Transform Values
With the right math, it's just as easy to set transform values such as rotation and x-translation as it is to retrieve them. Every transform can be calculated from its components.
CGAffineTransform makeTransform(CGFloat xScale, CGFloat yScale,
CGFloat theta, CGFloat tx, CGFloat ty)
{
CGAffineTransform transform = CGAffineTransformIdentity;
transform.a = xScale * cos(theta);
transform.b = yScale * sin(theta);
transform.c = xScale * -sin(theta);
transform.d = yScale * cos(theta);
transform.tx = tx;
transform.ty = ty;
return transform;
}
Say you want to set a view's y-scale independently. Here's how you might do that, using the view properties defined earlier in this article.
- (void) setYscale: (CGFloat) yScale
{
self.transform = makeTransform(self.xscale, yScale,
self.rotation, self.tx, self.ty);
}
Keep in mind that rotating a view that's scaled in just one direction may produce distortion. Figure 4 shows two images. The first represents a view with a natural 1:1.5 aspect (the view is 100 points in width, 150 points in height). It's been rotated about 45 degrees or so to the right. The second image is a view with a natural 1:1 aspect (100 by 100 points). It's been scaled in Y by 1.5, and then rotated the same 45-or-so-degrees. Notice the distortion. The top-to-bottom Y scaling remains 1.5 (along the top-left corner-to-right-bottom-corner axis) so the view skews to accommodate.
)
Retrieving View Point Locations
In addition to asking, "What is the view's current rotation," and "By how much is it scaled," developers perform math that relates a view's post-transform geometry. To do this, you need to be able to specify where frame elements appear onscreen.
A view's center remains meaningful during the transition from pre-transform to post-transform without incident. The value may change, especially after scaling, but the property is valid regardless of whatever transform has been applied. This center property always refers to the geometric center of the view's frame within the parent's coordinate system.
The frame is not so resilient. After rotation, a view's origin may be completely decoupled from the view. Look at Figure 5. It shows a rotated view on top of its original frame (the smallest of the outlines) and the updated frame (the largest gray outline). The circles indicate the view's top-right corner before and after rotation.
)
After the transform is applied, the frame updates to the minimum bounding box that encloses the view. Its new origin (the top-left corner of the gray outside box) has essentially nothing to do with the original view origin (the top-left corner of the black unrotated inner box). iOS does not provide a way to retrieve that adjusted point.
Here are a series of view methods that perform that math for you. They return a transformed view's corners: top left, top right, bottom left, and bottom right. These coordinates are defined in the parent view; if you want to add a new view on top of the top circle, you place its center at theView.transformedTopRight.
// Coordinate utilities
- (CGPoint) offsetPointToParentCoordinates: (CGPoint) aPoint
{
return CGPointMake(aPoint.x + self.center.x,
aPoint.y + self.center.y);
}
- (CGPoint) pointInViewCenterTerms: (CGPoint) aPoint
{
return CGPointMake(aPoint.x - self.center.x,
aPoint.y - self.center.y);
}
- (CGPoint) pointInTransformedView: (CGPoint) aPoint
{
CGPoint offsetItem = [self pointInViewCenterTerms:aPoint];
CGPoint updatedItem = CGPointApplyAffineTransform(
offsetItem, self.transform);
CGPoint finalItem =
[self offsetPointToParentCoordinates:updatedItem];
return finalItem;
}
- (CGRect) originalFrame
{
CGAffineTransform currentTransform = self.transform;
self.transform = CGAffineTransformIdentity;
CGRect originalFrame = self.frame;
self.transform = currentTransform;
return originalFrame;
}
// These four methods return the positions of view elements
// with respect to the current transform
- (CGPoint) transformedTopLeft
{
CGRect frame = self.originalFrame;
CGPoint point = frame.origin;
return [self pointInTransformedView:point];
}
- (CGPoint) transformedTopRight
{
CGRect frame = self.originalFrame;
CGPoint point = frame.origin;
point.x += frame.size.width;
return [self pointInTransformedView:point];
}
- (CGPoint) transformedBottomRight
{
CGRect frame = self.originalFrame;
CGPoint point = frame.origin;
point.x += frame.size.width;
point.y += frame.size.height;
return [self pointInTransformedView:point];
}
- (CGPoint) transformedBottomLeft
{
CGRect frame = self.originalFrame;
CGPoint point = frame.origin;
point.y += frame.size.height;
return [self pointInTransformedView:point];
}
Conclusion
The methods you saw in this article help represent affine transforms more transparently and make them easier to use. They substitute common concepts for technical details. Instead of retrieving values named A, B, C, D, Tx, and Ty, these view-based methods offer access to translation, rotation, and scaling. You read about setting and reading these values, and about accessing view geometry feature post-transform. Together, these tweaks help simplify development when working with animation, gesture recognition, and direct-manipulation views.
You can try these methods by downloading the source code from this website. In the downloadable zip file, you'll find sample code that provides a tiny testable interface.
The methods you read about are collected into the UIView-Transform category, and can be freely used in your own applications under the BSD license.