Understanding the interplay between a UIView’s frame, bounds, and center is crucial for any iOS developer. These properties dictate how a view is positioned and sized within its parent view and how content is displayed within the view itself. Mastering these concepts allows for precise layout control, creating visually appealing and responsive user interfaces. This article will delve into each of these properties, exploring their distinct roles and demonstrating how they work together to form the building blocks of UI layout in iOS.
Decoding the Frame: Position and Size within the Parent View
The frame property defines the origin and dimensions of a UIView within its parent’s coordinate system. It’s expressed as a CGRect, which contains the origin (an x and y value representing the top-left corner of the view) and the size (a width and height). Modifying the frame directly moves and resizes the view within its parent. For example, setting the frame’s origin to (0, 0) would position the view at the top-left corner of its parent, while changing the size would increase or decrease its width and height.
Think of the frame as the view’s external representation – where it sits and how much space it occupies within its containing view. It’s essential to understand that the frame is always relative to the superview’s coordinate system. This relative positioning is fundamental for creating complex layouts and hierarchies of views.
Consider a real-world example: placing a picture frame on a wall. The frame’s position on the wall is analogous to the UIView’s frame origin, and the frame’s physical dimensions correlate to the view’s frame size.
Exploring Bounds: The View’s Internal Coordinate System
The bounds property, also a CGRect, represents the internal coordinate system of the UIView. It defines the view’s drawable area and is independent of the view’s position within its parent. The bounds’ origin typically defaults to (0, 0), representing the top-left corner of the view’s own content area. Changing the bounds’ origin effectively scrolls the content within the view.
Modifying the bounds size does not affect the view’s size within its parent but scales the content drawn within it. Imagine zooming in or out on an image within an image viewer – the image viewer’s frame remains constant, but the image’s bounds change, affecting how much of the image is visible.
Bounds are essential for managing content that’s larger than the view itself, enabling scrolling and zooming functionality.
Center Stage: The Center Property
The center property defines the midpoint of the view’s frame within its parent’s coordinate system. It’s expressed as a CGPoint with x and y coordinates. Manipulating the center property moves the view while maintaining its size. Setting the center to the parent view’s center, for example, positions the view in the middle of its parent.
Understanding the relationship between the center and frame properties is crucial. Changing one often affects the other. For example, altering the frame’s origin will also change the center, and vice versa.
A practical example: centering a title label within its container view. By adjusting the label’s center property, you can easily align it perfectly, regardless of its size.
Putting It All Together: Frame, Bounds, and Center in Harmony
The frame, bounds, and center properties work in concert to define a UIView’s position, size, and content display. The frame positions the view within its parent, the bounds control the internal content area, and the center provides a convenient way to manipulate the view’s position based on its midpoint.
Here’s a breakdown of their interplay:
- Changing the
frameaffects thecenterbut not thebounds. - Changing the
boundsaffects the displayed content but not theframeorcenter. - Changing the
centeraffects theframebut not thebounds.
A helpful analogy is to think of a map: the frame is like the map’s boundaries, the bounds are the visible area within those boundaries (which can be moved by panning), and the center is the point you’re currently focused on.
Understanding these relationships is essential for creating dynamic and responsive user interfaces. Let’s look at a practical example: implementing a scrollable image viewer. The image view’s frame defines its position and size on the screen. The bounds allow for zooming and panning within the image by changing the visible area of the larger image content. The center property can be used to center the image within the viewer after zooming.
Remember, these three properties are fundamental to building sophisticated user interfaces. Consider the following when working with them:
- Coordinate Systems: The
frameuses the parent view’s coordinate system, whileboundsuses the view’s own coordinate system. - Content Scaling: Modifying the
boundssize scales the content within the view, while changing theframesize resizes the view itself. - Center vs. Origin: The
centerrepresents the midpoint of the frame, while theframe's originis its top-left corner.
Here’s a placeholder for an infographic illustrating the relationship between frame, bounds, and center.
[Infographic Placeholder] FAQ: Common Questions About Frame, Bounds, and Center
Q: What’s the difference between frame and bounds?
A: The frame defines the view’s position and size relative to its parent, while bounds define the view’s internal coordinate system and content area, independent of its position within the parent.
Leveraging these three properties effectively will unlock a new level of control over your UI layouts, leading to more polished and interactive iOS applications. By understanding how frame, bounds, and center interact, you can create complex and dynamic interfaces that adapt to different screen sizes and orientations, providing an optimal user experience. Check out this detailed guide on Apple’s documentation for a deeper dive into UIView geometry: UIView Documentation. Also, this article by Authoritative Source 1 and this tutorial from Authoritative Source 2 provide valuable insights and examples. For further reading on Auto Layout and its impact on frame, bounds, and center, explore this comprehensive guide. For more advanced animation techniques, consider this resource which delves into how transformations impact these properties.
Question & Answer :
I would like to know how to use these properties in the right manner.
As I understand, frame can be used from the container of the view I am creating. It sets the view position relative to the container view. It also sets the size of that view.
Also center can be used from the container of the view I’m creating. This property changes the position of the view relative to its container.
Finally, bounds is relative to the view itself. It changes the drawable area for the view.
Can you give more info about the relationship between frame and bounds? What about the clipsToBounds and masksToBounds properties?
Since the question I asked has been seen many times I will provide a detailed answer of it. Feel free to modify it if you want to add more correct content.
First a recap on the question: frame, bounds and center and theirs relationships.
Frame A view’s frame (CGRect) is the position of its rectangle in the superview’s coordinate system. By default it starts at the top left.
Bounds A view’s bounds (CGRect) expresses a view rectangle in its own coordinate system.
Center A center is a CGPoint expressed in terms of the superview’s coordinate system and it determines the position of the exact center point of the view.
Taken from UIView + position these are the relationships (they don’t work in code since they are informal equations) among the previous properties:
frame.origin = center - (bounds.size / 2.0)center = frame.origin + (bounds.size / 2.0)frame.size = bounds.size
NOTE: These relationships do not apply if views are rotated. For further info, I will suggest you take a look at the following image taken from The Kitchen Drawer based on Stanford CS193p course. Credits goes to @Rhubarb.
Using the frame allows you to reposition and/or resize a view within its superview. Usually can be used from a superview, for example, when you create a specific subview. For example:
// view1 will be positioned at x = 30, y = 20 starting the top left corner of [self view] // [self view] could be the view managed by a UIViewController UIView* view1 = [[UIView alloc] initWithFrame:CGRectMake(30.0f, 20.0f, 400.0f, 400.0f)]; view1.backgroundColor = [UIColor redColor]; [[self view] addSubview:view1];
When you need the coordinates to drawing inside a view you usually refer to bounds. A typical example could be to draw within a view a subview as an inset of the first. Drawing the subview requires to know the bounds of the superview. For example:
UIView* view1 = [[UIView alloc] initWithFrame:CGRectMake(50.0f, 50.0f, 400.0f, 400.0f)]; view1.backgroundColor = [UIColor redColor]; UIView* view2 = [[UIView alloc] initWithFrame:CGRectInset(view1.bounds, 20.0f, 20.0f)]; view2.backgroundColor = [UIColor yellowColor]; [view1 addSubview:view2];
Different behaviours happen when you change the bounds of a view. For example, if you change the bounds size, the frame changes (and vice versa). The change happens around the center of the view. Use the code below and see what happens:
NSLog(@"Old Frame %@", NSStringFromCGRect(view2.frame)); NSLog(@"Old Center %@", NSStringFromCGPoint(view2.center)); CGRect frame = view2.bounds; frame.size.height += 20.0f; frame.size.width += 20.0f; view2.bounds = frame; NSLog(@"New Frame %@", NSStringFromCGRect(view2.frame)); NSLog(@"New Center %@", NSStringFromCGPoint(view2.center));
Furthermore, if you change bounds origin you change the origin of its internal coordinate system. By default the origin is at (0.0, 0.0) (top left corner). For example, if you change the origin for view1 you can see (comment the previous code if you want) that now the top left corner for view2 touches the view1 one. The motivation is quite simple. You say to view1 that its top left corner now is at the position (20.0, 20.0) but since view2’s frame origin starts from (20.0, 20.0), they will coincide.
CGRect frame = view1.bounds; frame.origin.x += 20.0f; frame.origin.y += 20.0f; view1.bounds = frame;
The origin represents the view’s position within its superview but describes the position of the bounds center.
Finally, bounds and origin are not related concepts. Both allow to derive the frame of a view (See previous equations).
View1’s case study
Here is what happens when using the following snippet.
UIView* view1 = [[UIView alloc] initWithFrame:CGRectMake(30.0f, 20.0f, 400.0f, 400.0f)]; view1.backgroundColor = [UIColor redColor]; [[self view] addSubview:view1]; NSLog(@"view1's frame is: %@", NSStringFromCGRect([view1 frame])); NSLog(@"view1's bounds is: %@", NSStringFromCGRect([view1 bounds])); NSLog(@"view1's center is: %@", NSStringFromCGPoint([view1 center]));
The relative image.
This instead what happens if I change [self view] bounds like the following.
// previous code here... CGRect rect = [[self view] bounds]; rect.origin.x += 30.0f; rect.origin.y += 20.0f; [[self view] setBounds:rect];
The relative image.
Here you say to [self view] that its top left corner now is at the position (30.0, 20.0) but since view1’s frame origin starts from (30.0, 20.0), they will coincide.
Additional references (to update with other references if you want)
About clipsToBounds (source Apple doc)
Setting this value to YES causes subviews to be clipped to the bounds of the receiver. If set to NO, subviews whose frames extend beyond the visible bounds of the receiver are not clipped. The default value is NO.
In other words, if a view’s frame is (0, 0, 100, 100) and its subview is (90, 90, 30, 30), you will see only a part of that subview. The latter won’t exceed the bounds of the parent view.
masksToBounds is equivalent to clipsToBounds. Instead to a UIView, this property is applied to a CALayer. Under the hood, clipsToBounds calls masksToBounds. For further references take a look to How is the relation between UIView’s clipsToBounds and CALayer’s masksToBounds?.
