Pixel / iOS interface layout size

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

1 the status bar

The status bar general height to 20 pixels, in a mobile phone or display the message will be amplified to 40 pixels high, pay attention to, two times the height of the status bar in the like can only be used in longitudinal mode. The following diagram

The user can hide the status bar, can also sets the status bar is gray, black or translucent black.

If you need to hide the status bar can be used to call:

[[UIApplication sharedApplication] setStatusBarHidden:YES animated:NO];

Or in the application file Info.plist, UIStatusBarHidden key is set to ture.

The 2 navigation bar

In the longitudinal mode navigation bar is 44 pixels high, in the transverse mode is 32 pixels high, the navigation bar provides a little tip model, the model will be extended to 30 pixels in height, the longitudinal mode of 320*74 pixels, 480*74 pixels in the transverse mode.

To add a hint to the navigation bar, setting self.navigationItem.prompt = @"................".

The 3 tab on the   toolbar;

Tab 48 pixels high, the toolbar is 44 pixels high. The two UI elements usually not used for transverse mode.

A typical navigation bar and status bar of the application for the vertical display retains the 320*416 region, 480*268 region for the lateral retention. If you use the tab bar or toolbar will make the height reduction of 48 or 44 pixels again.

4 keyboard and pickerView

This is the transverse 320*216 pixel, the longitudinal 480*162 pixels.

In addition, the UISwitch default to 94*28 pixels, UISegmentedControl usually 44 pixels high.

UITextField height of at least 30 pixels.

The 5.UIScreen class

[[UIScreen mainScreen] applicationFrame]According to the general will is using the toolbar, status bar, the navigation bar to return to the available area.

IPhone and iPad under common control width and standard is the same, so here is that use the iPhone.


Here are some common height control. Statusbar, Navigationbar and Tabbar width extremely icon size.

The table below for more details of the parameters, including Statusbar, Navigationbar, Tabbar, toolbar and Keyboard etc.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Posted by Arlen at December 01, 2013 - 1:43 PM