UIView frame, bounds and center
Master System Design with Codemia
Enhance your system design skills with over 120 practice problems, detailed solutions, and hands-on exercises.
UIView is a foundational class in iOS development, representing rectangular areas on the screen that serve as containers for drawing and interaction. Understanding its properties is crucial for effective layout and interface design. In particular, three essential properties of UIView are frame, bounds, and center. These properties dictate how views are positioned and sized within their superview.
Frame
The frame is a CGRect that describes the view's position and size in the coordinate system of its superview.
Key Characteristics of Frame:
- Position and Size: The
framedefines both the location and dimensions of a view relative to its superview. - Origin and Size: It contains an origin
(x, y)and asize(width x height).
Example:
This code creates a UIView that is positioned 50 points from the left and 100 points from the top of its superview, with a width of 200 points and a height of 150 points.
Transformation Impact:
Applying transformations (rotation, scaling) affects the frame, as the bounds remain unchanged while the view's appearance relative to its superview altered. For instance, rotating a view will change its frame size and position due to its transformation matrix.
Bounds
The bounds is another CGRect describing the view’s internal coordinate system in relation to itself.
Key Characteristics of Bounds:
- Position and Size: The
boundsalways have an origin defaulting to(0, 0)and a size equal to the view's actual content area. - Internal Content Positioning: Adjusts how subviews within this view are positioned.
Example:
Most often, bounds have an origin set to zero but can be shifted for certain scrolling effects or nested view layouts.
Transformation Impact:
Transformations do not alter the bounds; they remain consistent as they reflect the untransformed dimensions of the view.
Center
The center property is a CGPoint representing the view's location concerning the coordinate system of its superview.
Key Characteristics of Center:
- View's Center Point: Specifies where the center of the view is located within its superview.
- Changes with Frame: Any change to the
frameorboundswill affect thecenter, and vice versa.
Example:
This positions the view’s center 150 points from the superview's left and 175 points from its top.
Comparing Frame, Bounds, and Center
Below is a table summarizing the key differences and characteristics:
| Property | Coordinate System | Includes | Used For |
| Frame | Superview | Position + Size
(origin , size) | Overall view layout |
| Bounds | Own view | Size only
(origin default is 0,0) | Internal coordinate system |
| Center | Superview | Only location
(x, y) | Locating the geometric center |
Additional Subtopics
Practical Developers Considerations:
- Performance: Direct manipulation of these properties is costly in performance-sensitive areas (such as animations), thus requiring careful handling, potentially through
CGAffineTransform. - Layout Changes: Changes in
frameandcentercan trigger layout updates. It is essential to consider these constraints and other layout mechanisms (like AutoLayout) to maintain harmony. - UI Changes: Interface rotation or view resizing often require adapting views using combined knowledge of
frame,bounds, andcenter.
Understanding these properties enables developers to create dynamic, aesthetically pleasing, and fully responsive interfaces for their iOS applications, fully leveraging the UIKit framework capabilities.

