iOS Table-view Elements

Table-view elements
ElementNameDescription
 iOS Table-view ElementCheckmarkIndicates that the row is selected
Disclosure indicator iOS Table-view ElementDisclosure indicatorDisplays another table associated with the row
Detail Disclosure button iOS Table-view ElementDetail Disclosure buttonDisplays additional details about the row in a new view (for information on how to use this element outside of a table, see Detail Disclosure Button)
Row Reorder iOS Table-view ElementRow reorderIndicates that the row can be dragged to another location in the table
Row insert iOS Table-view ElementRow insertAdds a new row to the table
Delete button control iOS Table-view ElementDelete button control In an editing context, reveals and hides the Delete button for a row
Delete button iOS Table-view ElementDelete buttonDeletes the row

Note: as with all system- provided buttons, avoid using the standard ones (described in the table below) to represent actions other than those for which they are assigned. In particular, avoid choosing a button based on its appearance, without regard for its documented meaning.

Table 7-2  Standard buttons available for toolbars and navigation bars (plain style)
ButtonNameMeaning
UIButtonBarAction Icon - iOS Human Interface GuidelinesShareOpen an action sheet that lists system-provided and app-specific services that act on the specified content
UIButtonBarCamera Icon - iOS Human Interface GuidelinesCameraOpen an action sheet that displays a photo picker in camera mode
UIButtonBarCompose Icon - iOS Human Interface GuidelinesComposeOpen a new message view in edit mode
UIButtonBarBookmarks Icon - iOS Human Interface GuidelinesBookmarksShow app-specific bookmarks
UIButtonBarSearch Icon - iOS Human Interface GuidelinesSearchDisplay a search field
UIButtonBarNew Icon - iOS Human Interface GuidelinesAddCreate a new item
UIButtonBarTrash Icon - iOS Human Interface GuidelinesTrashDelete current item
UIButtonBarOrganize Icon - iOS Human Interface GuidelinesOrganizeMove or route an item to a destination within the app, such as a folder
UIButtonBarReply Icon - iOS Human Interface GuidelinesReplySend or route an item to another location
UIButtonBarStop Icon - iOS Human Interface GuidelinesStopStop current process or task
UIButtonBarRefresh Icon - iOS Human Interface GuidelinesRefreshRefresh contents (use only when necessary; otherwise, refresh automatically)
UIButtonBarPlay Icon - iOS Human Interface GuidelinesPlayBegin media playback or slides
UIButtonBarFastForward Icon - iOS Human Interface GuidelinesFastForwardFast forward through media playback or slides
UIButtonBarPause Icon - iOS Human Interface GuidelinesPausePause media playback or slides (note that this implies context preservation)
UIButtonBarRewind Icon - iOS Human Interface GuidelinesRewindMove backwards through media playback or slides

Bordered action buttons for use in navigation bars and toolbars

Note: typically there is never more than one blue button in a bar, because the blue button represents the action the user is most likely to take in the current context.

ButtonNameMeaning
UIBarSystemItemEdit Bordered Action ButtonEditEnter an editing or content-manipulation mode
UIBarSystemItemCancel Bordered Action ButtonCancelExit the editing or content-manipulation mode without saving changes
UIBarSystemItemSave Bordered Action ButtonSaveSave changes and, if appropriate, exit the editing or content-manipulation mode
UIBarSystemItemDone Bordered Action ButtonDoneExit the current mode and save changes, if any
UIBarButtonSystemItemUndo Bordered Action ButtonUndoUndo the most recent action
UIBarButtonSystemItemRedo Bordered Action ButtonRedoRedo the most recent undone action
Standard Icons for Use in Tab Bars iOS provides the standard icons described in Table 7-4 for use in tab bars.

Standard Icons for Use in Tab Bars

iOS Standard Icons for Use in the Tabs of a Tab Bar
IconNameMeaning
UITabBarBookmarks Icon - iOS Tab Bar IconsBookmarksShow app-specific bookmarks
UITabBarContacts Icon - iOS Tab Bar IconsContactsShow contacts
UITabBarDownloads Icon - iOS Tab Bar IconsDownloadsShow downloads
UITabBarFavorites Icon - iOS Tab Bar IconsFavoritesShow user-determined favorites
UITabBarFeatured Icon - iOS Tab Bar IconsFeaturedShow content featured by the app
UITabBarHistory Icon - iOS Tab Bar IconsHistoryShow history of user actions
UITabBarMore Icon - iOS Tab Bar IconsMoreShow additional tab bar items
UITabBarMostRecent Icon - iOS Tab Bar IconsMostRecentShow the most recent item
UITabBarMostViewed Icon - iOS Tab Bar IconsMostViewedShow items most popular with all users
UITabBarRecents Icon - iOS Tab Bar IconsRecentsShow the items accessed by the user within an app-defined period
UITabBarSearch Icon - iOS Tab Bar IconsSearchEnter a search mode
UITabBarTopRated Icon - iOS Tab Bar IconsTopRatedShow the highest-rated items, as determined by the user

Standard Buttons for Use in Table Rows and Other UI Elements

Standard Buttons for Use in Table Rows and Other UI Elements

iOS provides the buttons described in Table 7-5 for use in table rows and other elements.

Standard buttons for use in table rows and other UI elements
ButtonNameMeaning
UIButtonTypeContactAdd Button - iOS Table Rows and other UI Element ButtonsContactAddDisplay a people picker to add a contact to an item.
UIButtonTypeDetailDisclosure - iOS Table Rows and other UI Element ButtonsDetailDisclosureDisplay a new view that contains details about the current item.
UIButtonTypeInfoDark - iOS Table Rows and other UI Element ButtonsInfoFlip to the back of the view to display configuration options or more information.

Note that the Info button is also available as a light-colored ā€œiā€ in a dark circle.

Detail Disclosure Button

Detail Disclosure button is used to reveal extra details or additional functionality to an item. The additional details/functionality are revealed in a separate view.

iOS Detail Disclosure Button
Detail Disclosure button revealing additional information and functionality inside a map annotation view

Page Curl Button

iOS System Provided Page Curl Button Icon
The page curl button providesa way for users to curl up to the bottom corner of a screen to see information underneath. For example, Maps allows people to lift the lower-right corner of a map view to access the buttons that maniuplate the map.

Note: do not use the page curl button to flip the screen; if flipping the screen is a necessity, use the Info button instead.

If you are utilizing the page curl button, ensure that some of the curled-page is still visible onscreen to emphasis the temporary nature of the action of flipping the screen. If the upper page disappears, the page curl becomes too much like a full-screen transition, and users lose their context.

The system-provided page curl button can be used in a toolbar.

Note: the page curl button is not available for use in a navigation bar.

The page curl button allows you to give users a way to curl up the bottom corner of a screen to see information underneath. For example, Maps allows people to lift the lower-right corner of a map view to access buttons that manipulate the map.