iOS UI Element Usage

1. Bars

• The Status Bar

The UIStatusBarStyle constant, controls the status bar style.
To specify the status bar style, you set a value in your Info.plist file. (For more information about the
contents of this file, see “UIKit Keys”; to learn how to set values, see Property List Editor Help .)

一般不建议自定义状态栏,主要考虑到兼容性

On iPhone, specify the color of the status bar. You can choose gray (the default color), opaque black, or
translucent black (that is, black with an alpha value of 0.5).

Be sure to choose a status bar appearance that coordinates with the rest of your iPhone app. For example,
avoid using a translucent status bar if the navigation bar is opaque. 避免使用同名的状态栏如果导航栏不是透明的。
On iPhone, set whether the change in status bar color should be animated. Note that the animation causes
the old status bar to slide up until it disappears off the screen while the new status bar slides into place.

• Navigation Bar  UINavigationBar

A navigation bar enables navigation through an information hierarchy and, optionally, management of screen
contents.A navigation bar is contained in a navigation controller, which is an object that manages the display of your
hierarchy of custom views

On iPhone, changing the device orientation from portrait to landscape can change the height of the navigation
bar automatically. On iPad, the height and translucency of a navigation bar doesn’t change with rotation.
On iPhone, a navigation bar always displays across the full width of the screen. On iPad, a navigation bar can
display within a view—such as one pane of a split view—that doesn’t extend across the screen.

在iphone中如果改变设备的方向会自动改变状态条的高度。而在ipad中状态条的高度和透明度时不会随着旋转而改变的。iphone中状态条的宽度总是全屏的宽度，

在ipad中，状态条却是可以显示在一个视图中的。

• Use the title of the current view as the title of the navigation bar.
• Use system-provided buttons according to their documented meaning.
• If appropriate, customize the appearance of a navigation bar to coordinate with the look of your app.
• If appropriate, customize the appearance of navigation-bar controls.
• Make sure that a customized back button still looks like a back button.

On iPhone, be prepared for the change in navigation bar height that occurs on device rotation. In particular,
make sure that your custom navigation bar icons fit well in the thinner bar that appears in landscape orientation.
Don’t specify the height of a navigation bar programmatically; instead, you can take advantage of the
UIBarMetrics constants to ensure that your content fits well.

在iphone中注意横屏时导航栏的高度变化，不要在程序中指定导航栏的高度，而是可以利用UIBarMetrics来使得内容适配。

• Toolbar UIToolbar

A toolbar contains controls that perform actions related to objects in the screen or view.

A toolbar is typically contained in a navigation controller, which is an object that manages the display of a
hierarchy of custom views. toolbar一般都会嵌入到navigation controller中

On iPhone, a toolbar always appears at the bottom edge of a screen or view, but on iPad it can instead appear
at the top edge. 在iphone中经常出现在屏幕或者视图的下方，但是在ipad中却是可以显示在上方的。

On iPhone, changing the device orientation from portrait to landscape can change the height of the toolbar
automatically. On iPad, the height and translucency of a toolbar don’t change with rotation.

iphone中屏幕旋转会改变工具条的高度，但是在ipad中却不会改变

1. Maintain a hit target area of at least 44 x 44 points for each toolbar item. If you crowd toolbar items too closely together, people have difficulty tapping the one they want.
2. On iPhone, be prepared for the change in toolbar height that occurs on device rotation

• Tab Bar  UITabBar

On iPhone, a tab bar can display no more than five tabs at one time; if the app has more tabs, the tab bar
displays four of them and adds the More tab, which reveals the additional tabs in a list. On iPad, a tab bar can
display more than five tabs.

在iphone中tab bar只能一次显示5个tabs，如果有多余的会显示more tab，而ipad中却是可以显示超过5个tab的

• Don’t use a tab bar to give users controls that act on elements in the current mode or screen

2, Content Views

• Create a streamlined image that represents your service.
• Create the image in the following sizes:

For iPhone and iPod touch: About 43 x 43 pixels  About 86 x 86 pixels (high resolution)
For iPad:About 55 x 55 pixels About 110 x 110 pixels (high resolution)

• Image View UIImageView
• Scroll View UIScrollView

1. A scroll view helps people see content that is larger than the scroll view’s boundaries (the image shown below is both taller and wider than the scroll view that contains it).
2. Support zoom behavior appropriately.
3. Consider using a page control with a paging-mode scroll view.
4. In general, display only one scroll view at a time.

• Split View(iPad Only) UISplitViewController

A split view is a full-screen view that consists of two side-by-side panes.

• Table View UITableView

A table view presents data in a single-column list of multiple rows.

• Plain tables

• Grouped tables

• Text View  UITextView
• Web View   UIWebView
• Alerts, Action Sheets, and Modal Views
• An action sheet displays a set of choices related to a task the user initiates (shown below on iPhone). UIActionSheet

An action sheet has two different appearances. On iPhone, an action sheet always emerges from the bottom
of the screen and hovers over the app’s views (an action sheet for Safari on iPhone is shown above). The side
edges of an action sheet are anchored to the sides of the screen, which reinforces its connection to the app
and to the user’s most recent action.

On iPad, an action sheet is always displayed within a popover; it never has full-screen width (to learn more
about popovers, see “Popover (iPad Only)” (page 144)). An action sheet can cause a popover to appear, or it
can appear within a popover that’s already open. In both cases, there’s a strong visual connection between
the action sheet and the user’s action. For example, the action sheet shown here is displayed when the user
taps the Mail Reply button on iPad.

On iPhone, coordinate the action sheet background appearance with the navigation bars and toolbars.

On iPhone, include a Cancel button so that users can easily and safely abandon the task

On iPad, choose whether to display an action sheet with animation or without animation.

Avoid making users scroll through an action sheet.

On both devices, use the red button color if a potentially destructive action can be performed.

1. Controls

Activity Indicator UIActivityIndicatorView
An activity indicator shows that a task or process is progressing (shown here with a label).

Date Picker UIDatePicker

A date picker displays components of date and time, such as hours, minutes, days, and years.

Picker  UIPickerView
A picker displays a set of values from which a user picks one.

Progress View  UIProgressView

Refresh Control UIRefreshControl

A refresh control performs a user-initiated content refresh—typically in a table (shown here above the mailbox
list).

Scope Bar UISearchBar

A scope bar—which is available only in conjunction with a search bar—allows users to define the scope of a
search (shown here below a search bar).

Stepper UIStepper

A stepper increases or decreases a value by a constant amount.

Table 7-2 Standard buttons available for toolbars and navigation bars (plain style)

Table 7-3 Bordered action buttons for use in navigation bars and toolbars

Standard Icons for Use in Tab Bars

Standard Buttons for Use in Table Rows and Other UI Elements

Custom Icon and Image Creation Guidelines

Create different sizes of your app icon for different devices. If you’re creating a universal app, you need to
supply app icons in all four sizes.
For iPhone and iPod touch both of these sizes are required:
● 57 x 57 pixels
● 114 x 114 pixels (high resolution)
For iPad, both of these sizes are required:
● 72 x 72 pixels
● 144 x 144 (high resolution)
When iOS displays your app icon on the Home screen of a device, it automatically adds the following visual
effects:
● Rounded corners
● Drop shadow
● Reflective shine (unless you prevent the shine effect)

For the App Store, create a large version of your app icon in two sizes so that it looks good on all devices:
● 512 x 512 pixels
● 1024 x 1024 pixels (high resolution)

Launch Images

For iPhone and iPod touch launch images, include the status bar region. Create launch images of the
following sizes.
For standard iPhone and iPod touch devices:
● 320 x 480 pixels
● 640 x 960 pixels (high resolution)
For iPhone 5 and iPod touch (5th generation):
● 640 x 1136 pixels
For iPad launch images, do not include the status bar region. Create launch images of these sizes (most iPad
apps should supply a launch image for each orientation):
● For portrait:
● 768 x 1004 pixels
● 1536 x 2008 pixels (high resolution)
● For landscape:
● 1024 x 748 pixels
● 2048 x 1496 pixels (high resolution)

Small Icons

For iPhone and iPod touch, iOS uses the same icon for both Spotlight search results and Settings. If you do not
provide this icon, iOS might shrink your app icon for display in search results and in Settings. For your iPhone
app, create two small icons that measure:
● 29 x 29 pixels
● 58 x 58 pixels (high resolution)

For iPad, you supply separate icons for Settings and Spotlight search results. For Settings on iPad, create two
icons that measure:

● 29 x 29 pixels
● 58 x 58 pixels (high resolution)
For Spotlight search results on iPad, create two icons that measure:
● 50 x 50 pixels
● 100 x 100 pixels (high resolution)

Icons for Navigation Bars, Toolbars, and Tab Bars

For toolbar and navigation bar icons on iPhone, iPod touch, and iPad, create an icon in the following sizes:
● About 20 x 20 pixels
● About 40 x 40 pixels (high resolution)
For tab bar icons on iPhone, iPod touch, and iPad, create an icon in the following sizes:
● About 30 x 30 pixels (48 x 32 pixels maximum)
● About 60 x 60 pixels (96 x 64 pixels maximum) for high resolution