操作欄和欄上按鈕(Bars & Bar Buttons)
iOS 7中,狀態欄是透明的,其他的操作欄(導航欄、tab欄、工具欄、搜索欄、搜索欄下面的范圍選擇欄)是半透明的。通常情況下,你希望能看到操作欄背后是你的內容。
大多數操作欄會將遮蔽住的內容進行模糊處理,除非你提供一張自定義背景圖。
為了標識操作欄的位置,iOS 7引入了barPosition屬性,它可以幫助你指定什么時候自定義背景圖片需要平鋪在狀態欄上。值UIBarPositionTopAttached表明操作欄貼近屏幕頂部,背景向上延伸入系統狀態欄區域。相對的,值UIBarPositionTop表示操作欄位于當前局部內容的頂部(比如,在彈出式氣泡的頂部)它不為狀態欄提供背景。
默認情況下,所有的欄上按鈕都是無邊框的。詳情請看第18頁的“欄上按鈕”。
系統狀態欄(Status Bar)
因為系統狀態欄是透明的,所以可以透過它看到后面的視圖。狀態欄的風格依照它內容的外觀呈現,包括時間、電量、Wi-Fi信號等。使用常量UIStatusBarStyle來指定使用黑色風格還是白色風格:
UIStatusBarStyleDefault 顯示黑色的文字內容。當狀態欄后面的內容是淡色的時候適合使用。

UIStatusBarStyleLightContent 顯示白色的文字內容。當狀態欄后面的內容是深色時使用比較合適。

有些情況下,導航欄和搜索欄的背景圖片可以向上延伸到狀態欄背后(詳情見22頁的“導航欄”章節和23頁的“搜索欄和范圍選擇欄”章節)。如果狀態欄下面沒有其他欄,內容視圖需要使用全屏高度。要了解視圖控制器是怎樣恰當地布局的,請看11頁的“使用視圖控制器”。在iOS 7中,通過獨立的視圖控制器,可以在app運行的時候改變狀態欄的風格。實現方法是在Info.plist中加入鍵UIViewControllerBasedStatusBarAppearance,并設置值為YES。
- 導航欄(Navigation Bar)
- 導航欄幫助用戶在不同信息層次結構中穿梭,并選擇性地管理屏幕內容。
iOS 7 iOS 6
![]()

iOS 7 讓在導航欄上增加搜索欄的變得非常簡單。詳情參考第16頁的“搜索欄和范圍選擇欄”。* 如果想用自定義的圖像來替換返回的箭頭“<”的話,還需自己創建一個相應的遮罩。在導航過場動畫的時候,iOS 7使用遮罩來讓上個層級的標題漸隱漸出。了解更多返回按鈕和遮罩圖像的控制屬性,請參閱 “UINavigationBar類參考” 。
如果你使用UIBarPositionTopAttached樣式創建了一個導航欄背景,確保圖像包含了系統狀態欄的區域。具體來說,你需要一個高分辨率下128像素的圖像。
下面這個表格描述了iOS 7如何對待不同高度的可變導航欄背景。(更多請看“UIImage類參考”)
表格 5-1 可變大小的背景圖片處理策略

搜索欄和范圍選擇欄(Search Bar & Scope Bar)避免使用超高的背景圖片來制作導航欄下面的自定義投影,這種技術在iOS 7中不起作用,因為超高的圖片會向上(系統狀態欄方向)擴展,而不是向下(導航欄下面)擴展。如果你想給導航欄增加投影,可以創建一個自定義圖片,然后使用shadowImage屬性來自定義投影圖片。
搜索欄接收用戶輸入的文字,下方可以附帶一個范圍選擇欄。
iOS 7 iOS 6
![]()

在iOS 7中,UISearchDisplayController包含了displaySearchBarInNavigationBar屬性,這樣你就可以將搜索欄放進導航欄,就像日歷app里面這樣:如果你使用UIBarPositionTopAttached的位置為搜索欄創建了一個背景圖片,請確保圖片的高度包含了狀態欄的高度。如果你創建了一個可變大小的背景圖片,參閱15頁的表格5-1獲取更多iOS 7調整背景圖片大小的策略。

范圍選擇欄則允許用戶選擇搜索結果的范圍。
注意:范圍選擇欄不能單獨出現;必須依附在搜索欄下面出現。
iOS 7 iOS 6
![]()

Tab欄(Tab Bar)
Tab欄讓用戶可以在不同子任務、視圖、模式之間切換。
iOS 7 iOS 6
![]()

如果使用了自定義icon的話,可以使用UITabBarItem中的selectedImage屬性來設置按下狀態的圖像。如果不提供按下狀態的icon,則兩個狀態會使用相同icon。
工具欄(Toolbar)
工具欄上放置當前屏幕或者視圖下相關的對象的操作按鈕。
iOS 7 iOS 6
![]()

如果你創建了可變大小的背景圖片,請參考15頁的表格5-1獲取iOS 7處理不同尺寸圖片的細節。
欄上按鈕(Bar Buttons)
在iOS 6中,欄上按鈕可以是有邊框的,也可以是無邊框的。在iOS 7中只能是無邊框的。
iOS 7中的導航欄按鈕 iOS 6中的導航欄按鈕
![]()
為了更加明確,在iOS 7中,app的欄上按鈕經常使用文字而不是圖形。例如,iOS 7中的日歷應用使用了Inbox(收件箱)代替了收件箱圖形:
iOS 7 iOS 6
![]()
在早期版本的iOS中,自定義欄上按鈕圖片會自動被當做“template image”。(template image被用作最終圖像的一個遮罩。)而iOS 7中,你可以使用以下UIImage屬性來指定是否需要把自定義的圖片當做template image來處理:
- UIImageRenderingModeAlwaysTemplate。圖片被用作Template Image。
- UIImageRenderingModeAlwaysOriginal。圖片按照原樣渲染。
如果你沒有指定對圖片的處理方法的話,圖片會使用包含它的視圖的默認處理方式。比如,tab欄默認會使用template處理方式,而進度滑塊則會使用原樣完整渲染的處理方式。
注意:template image會依照其父結構的著色進行著色(更多請看18頁的“使用著色”)。如果不想讓欄上的元素被著色,為圖片設置UIImageRendering-ModeAlwaysOriginal屬性。
內容視圖(Content View)
內容視圖用來顯示自定義的app內容。因為大多數內容視圖的外觀系統都沒有提供,所以iOS 7視覺上的變化對他們幾乎沒有影響。有個比較大的例外是分組聚合表格視圖,它在iOS 7上外觀有巨大的變化。
活動菜單(Activity)
活動菜單代表了一個可以響應當前選擇內容的功能,它可以是系統提供的或者自定義的。用戶可以通過系統提供的活動視圖控制器來使用這些功能,當用戶點擊分享按鈕的時候,活動視圖控制器就會從屏幕底部向上升起。
系統提供的活動菜單中可以提供兩種風格的按鈕:
- 原樣渲染的app圖標——比如下面這個郵件的icon
- 和tab欄上的按鈕一樣的風格——比如下面復制、打印這樣的icon
第三方功能總是使用第二種風格的icon。

如果要在你的app中提供某個服務,創建一個簡潔、線框狀的template image。創建template image的時候請遵守下述指導原則:
- 使用黑色或者白色,配合適當的alpha透明度
- 不要使用投影
- 使用抗鋸齒效果
活動菜單上的template image應該在區域中居中,分辨率大約在70 x 70像素左右。
集合視圖(Collection View)
集合視圖用來管理和有序排列項目,將它們以可定制的布局進行呈現。
在iOS 7中,集合視圖支持自定義過場動畫。了解更多請參考“UICollectionViewTransition-Layout類參考”。
照片應用使用了集合視圖來展示圖片集,并支持他們之間的過場動畫。

圖片視圖(Image View)
圖片視圖顯示一張圖片或者一系列動態的圖片。
在iOS 7中,UIImageView包含了著色屬性tintColor。當圖片視圖包含template image的時候,tintColor會被應用到圖片上。
地圖視圖(Map View)
地圖視圖展示地理數據,支持自帶地圖應用的大多數功能。
照片應用中的地圖視圖幫助用戶查看照片的地理位置信息。

在iOS 7,只能夠使用一個新的類MKOverlayRenderer來在地圖視圖上面創建覆蓋層。
如果要給地圖視圖增加3D外觀的話,只需給它的camera屬性分配一個相機對象即可(MKMapCamera的一個實例)。要了解更多,參考“MKMapView類參考”。
