iOS 15 navigation bar & tab bar 的樣式設定(appearance)

從 iOS 15 開始,navigation bar & tab bar 的樣式預設有一些跟之前不同的地方,以下我們分別討論兩種不同的情況,然後再比較 iOS 15 & 14 的差異。

  • 不包含捲動內容的畫面。
  • 包含捲動內容的畫面。

不包含捲動內容的畫面: navigation bar & tab bar 預設透明

storyboard 的設計如下,我們在 UIViewController 的 view 上加入全螢幕的 image view。

執行 App,navigation bar & tab bar 都變透明了。

在 iOS 15 若畫面不包含捲動內容,navigation bar & tab bar 的背景顏色和 scrollEdgeAppearance 有關。當 scrollEdgeAppearance 為 nil 時,背景將變成透明。

If the value of this property is nil, UIKit uses the settings found in the standardAppearance property, modified to use a transparent background.
  • navigation bar 的 scrollEdgeAppearance
  • tab bar 的 scrollEdgeAppearance

若想顯示有顏色的 bar,我們必須設定 scrollEdgeAppearance。

方法1: 從 Interface Builder 設定

點選 Navigation Bar,勾選 Scroll Edge。

勾選 Scroll Edge 後,底下將多出 Scroll Edge Appearance 區塊,我們可設定背景的 blur style,顏色和圖片。Blur Style 選擇 Default 將呈現毛玻璃效果。

Tab Bar 也是類似的設定,勾選 Scroll Edge,然後從 Scroll Edge Appearance 區塊設定樣式。

執行 App,navigation bar & tab bar 呈現美麗的毛玻璃效果。

讓我們再調整 navigation bar,試試幾種不同的效果。Blur Style 選擇 Material (Dark),Scroll Edge Text Attributes 下的 Title 選擇 Custom,Title Color 選擇 White Color。

顯示深色的毛玻璃效果,標題文字變成白色。

Scroll Edge Appearance 下的 Background 選擇粉紅色。

顯示粉紅色背景。

方法2: 從程式設定

let barAppearance =  UINavigationBarAppearance()
barAppearance.configureWithDefaultBackground()
UINavigationBar.appearance().scrollEdgeAppearance = barAppearance

詳細的說明可參考以下連結。

包含捲動內容的畫面

storyboard 的設計如下,我們在 UIViewController 的 view 上加入全螢幕的 scroll view,scroll view 裡加入高度 1000 的 image view,因此 scroll view 可上下捲動。

App 執行的畫面如下,navigation bar 是透明的,顯示背後的白色,而 tab bar 則是毛玻璃。

當畫面包含捲動內容時,bar 採用的樣式分兩種情況:

  • 捲動的內容跟 bar 沒有重疊時,採用 scrollEdgeAppearance。
  • 捲動的內容跟 bar 重疊時,採用 standardAppearance。

App 啟動後,一開始 navigation bar 跟捲動的內容不重疊,所以採用的樣式是 scrollEdgeAppearance。而 scrollEdgeAppearance 預設是 nil,所以會變成透明。

If the value of this property is nil, UIKit uses the settings found in the standardAppearance property, modified to use a transparent background.

相反的,一開始 tab bar 跟捲動的內容是重疊的,所以採用 standardAppearance,而 standardAppearance 預設為毛玻璃樣式,因此 tab bar 呈現毛玻璃效果。

當畫面向上捲動,捲動的內容跟 navigation bar 重疊時,將採用 standardAppearance,此時 navigation bar 變成毛玻璃。

若將畫面繼續往上捲動,捲動的內容跟 tab bar 不重疊時,將採用 scrollEdgeAppearance,此時 tab bar 變成透明,顯示背後的白色。

讓 bar 維持同一個樣式,不管捲動的內容跟 bar 是否重疊

將 scrollEdgeAppearance & standardAppearance 設成一樣的樣式。

Navigation Bar 的多種 Appearances

剛剛我們提到了 scrollEdgeAppearance & standardAppearance,不過 Navigation Bar 其實還有 compactAppearance & compactScrollEdgeAppearance,可以針對 compact-height 模式做設定,有興趣的朋友可再進一步設定。

iOS 15 & 14 的 navigation bar & tab bar appearance

下表是 iOS 15 & 14 的 navigation bar & tab bar appearance 的差異比較。

同時相容 iOS 15 & 14

比較簡單的做法是採用統一的 bar 樣式,將 scrollEdgeAppearance & standardAppearance 設成一樣。

讓 bar 在任何頁面都是一樣的樣式

將 scrollEdgeAppearance & standardAppearance 設成一樣。

讓 App 的 navigation bar & tab bar 採用統一的樣式

透過 UINavigationBar.appearance() 或 UITabBar.appearance(),方法可參考以下連結。

從 Interface Builder & 程式設定 UIKit navigation bar & tab bar 的樣式

UIToolBar 也有 appearance

除了 UINavigationBar & UITabBar,UIToolBar 也有appearance,相關資訊可參考以下連結。

--

--

彼得潘的 iOS App Neverland
彼得潘的 Swift iOS App 開發問題解答集

彼得潘的iOS App程式設計入門,文組生的iOS App程式設計入門講師,彼得潘的 Swift 程式設計入門,App程式設計入門作者,http://apppeterpan.strikingly.com