iPhone Development 101

iPhone 101

Code Tips






iPhone Development 101: User Interface:
Sizes of iPhone UI Elements

How to detect the current device size (and how to tell if it's an iPhone 5)

Element iPhone 4S (and earlier) iPhone 5
Window (including status bar) 320 x 480 pts 320 x 568 pts
Status Bar
(How to hide the status bar)
20 pts 20 pts
View inside window
(visible status bar)
320 x 460 pts 320 x 548 pts
Navigation Bar 44 pts 44 pts
Nav Bar/Toolbar Icon white icon - up to 20 x 20 pts (transparent PNG)
Tab Bar 49 pts 49 pts
Tab Bar Icon up to 30 x 30 pts (transparent PNGs)
Text Field 31 pts 31 pts
Height of a view inside
a navigation bar
416 pts 504 pts
Height of a view inside
a tab bar
411 pts 499 pts
Height of a view inside
a navbar and a tab bar
367 pts 455 pts
Portrait Keyboard (English) 320 x 216 pts 320 x 216 pts
Landscape Keyboard (English) 480 x 162 pts 568 x 162 pts
Launch Image
(Launch Image Sizes
for iPhone & iPad
640 x 960 pixels 640 x 1136 pixels
This page is available as an interactive version in the idev101 app!

Points vs. Pixels

Apple introduced retina displays starting with the iPhone 4. These have twice as many screen pixels as previous iPhones. You don't have to modify your code to support high-res displays; the iOS coordinate system uses points rather than pixels, so the dimensions and position in points of all UI elements remains the same across all devices.

iOS supports high resolution displays via the scale property on UIScreen, UIView, UIImage, and CALayer classes. If the object is displaying high-resolution content, its scale property is set to 2.0. Otherwise it defaults to 1.0.

Retina Graphics

To support high-resolution graphics on devices with retina displays, create two versions of the image: a standard size image, and a double-sized image with "@2x" added to the name:

Standard Size: High Resolution:

60 x 20

120 x 40

To refer to an image in your code (or in Interface Builder), use the filename of the standard sized image. iOS will automatically detect and use the @2x version if the device supports it:

imageView.image = [UIImage imageNamed:@"button.png"];

Adjusting Sizes

Click here to see how to adjust View Frames and Bounds.

Additional References