iPhone Development 101

iPhone 101

Code Tips




Mailing ListTwitter


iPhone Development 101: User Interface:
View Frames and Bounds

A computer screen has its own 2d coordinate system that allows the software to display objects at a certain location on screen.

The iPhone's screen is 320 points wide by 480 points high.

The top left corner is the origin (x=0, y=0). Positive values of x go right across the screen, while positive values of y go down the screen.

View other Sizes of iPhone UI Elements

Every UIView object, including windows, full-screen views, labels, buttons and other controls has its own frame property which describes the location (x/y coordinates) of the view within its superview, as well as the width and height of the view. The frame is a C structure type with structure members for the origin and size:

UIView's frame property: The CGPoint data type: The CGSize data type:
struct CGRect {
   CGPoint origin;
   CGSize size;
struct CGPoint {
   CGFloat x;
   CGFloat y;
struct CGSize {
   CGFloat width;
   CGFloat height;

You can position a view by assigning its frame to a CGRect:

[button setFrame:CGRectMake(x, y, width, height)];

Viewing / Adjusting Sizes in Interface Builder

When you drag elements around in Interface Builder, you're actually changing their frame property; Interface Builder just makes it easy to do. Sizes for specific UI elements can also be adjusted in the size panel (⌘3) of the Inspector window:

You can either drag the item around on screen, or type new numbers into the x/y/width/height boxes in the size panel to resize or reposition an object.

Frame and Bounds

The frame is the outer container for the view - the position of the item within its enclosing superview.

The bounds rectangle determines the origin and scale in the view's coordinate system within its frame rectangle. Setting this property changes the value of the frame property accordingly.

When you set the frame property, the size of the bounds property is set to match the size of the frame property. The center property is also adjusted to match the center point of the new frame.

Additional References