iOS Development
UIView
Frame vs Bounds
UIView Center
Mobile App Design

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 frame defines both the location and dimensions of a view relative to its superview.
  • Origin and Size: It contains an origin (x, y) and a size (width x height).

Example:

swift
let view = UIView()
view.frame = CGRect(x: 50, y: 100, width: 200, height: 150)

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 bounds always 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:

swift
let view = UIView()
view.bounds = CGRect(x: 0, y: 0, width: 200, height: 150)

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 frame or bounds will affect the center, and vice versa.

Example:

swift
let view = UIView()
view.center = CGPoint(x: 150, y: 175)

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:

PropertyCoordinate SystemIncludesUsed For
FrameSuperviewPosition + Size (origin , size)Overall view layout
BoundsOwn viewSize only (origin default is 0,0)Internal coordinate system
CenterSuperviewOnly location (x, y)Locating the geometric center

Additional Subtopics

Practical Developers Considerations:

  1. Performance: Direct manipulation of these properties is costly in performance-sensitive areas (such as animations), thus requiring careful handling, potentially through CGAffineTransform.
  2. Layout Changes: Changes in frame and center can trigger layout updates. It is essential to consider these constraints and other layout mechanisms (like AutoLayout) to maintain harmony.
  3. UI Changes: Interface rotation or view resizing often require adapting views using combined knowledge of frame, bounds, and center.

Understanding these properties enables developers to create dynamic, aesthetically pleasing, and fully responsive interfaces for their iOS applications, fully leveraging the UIKit framework capabilities.


Course illustration
Course illustration

All Rights Reserved.