Open in app

Sign in

Write

Sign in

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

從 iOS 13 開始，navigation bar & tab bar 的樣式可透過各種 appearance 設定，比方 scrollEdgeAppearance，standardAppearance，compactScrollEdgeAppearance & compactAppearance。相關的說明可參考以下連結。

讓 navigation bar 或 tab bar 捲動跟不捲動時都維持同一種樣式

iOS App 的上方跟下方時常會顯示 navigation bar & tab bar，預設的設計是捲動的內容跟 bar 重疊時 bar 的顏色為毛玻璃，沒重疊時則變成透明的 bar。比方以下 Music App 的…

medium.com

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

從 iOS 15 開始，navigation bar & tab bar 的樣式預設有一些跟之前不同的地方，以下我們分別討論兩種不同的情況:

medium.com

接下來我們將示範如何從 Interface Builder & 程式設定 scrollEdgeAppearance，修改 navigation bar & tab bar 的樣式。

ps:

  1. Xcode 13 以上的版本才可以從 Interface Builder 設定 appearance。
  2. App 的頁面會依據不同情況採用 scrollEdgeAppearance，standardAppearance，compactScrollEdgeAppearance 或 compactAppearance 的設定。若希望 App 在任何情況都顯示一樣樣式的 navigation bar， 請將 scrollEdgeAppearance & standardAppearance 設成一樣的樣式。

navigation bar 樣式

設定某個 navigation bar 的樣式

  • Interface Builder

點選 navigation controller 下的 navigation bar ，勾選 Scroll Edge。

  • 程式

從 navigation controller 讀取 navigationBar，然後設定它的 scrollEdgeAppearance。

let barAppearance = UINavigationBarAppearance()
navigationController?.navigationBar.scrollEdgeAppearance = barAppearance

App 的 navigation bar 套用同一個樣式

設定 UINavigationBar.appearance() 的 scrollEdgeAppearance。

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

接下來的例子，在程式的範例部分，我們將以 App 的 navigation bar 套用同一個樣式說明。

透明的 navigation bar

  • Interface Builder

在不捲動的畫面，不勾選 Scroll Edge 將變成透明的 navigation bar。

  • 程式

呼叫 configureWithTransparentBackground。

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

毛玻璃的 navigation bar

  • Interface Builder

在不捲動的畫面，勾選 Scroll Edge 將變成毛玻璃的 navigation bar。

  • 程式

呼叫 configureWithDefaultBackground。

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

毛玻璃的模糊效果

  • Interface Builder

設定 Scroll Edge Appearance 的 Blur Style。

  • 程式

設定 backgroundEffect。

let barAppearance = UINavigationBarAppearance()
barAppearance.configureWithDefaultBackground()
barAppearance.backgroundEffect = UIBlurEffect(style: .systemMaterialDark)
UINavigationBar.appearance().scrollEdgeAppearance = barAppearance

navigation bar 的背景顏色

  • Interface Builder

設定 Scroll Edge Appearance 的 Background。

  • 程式

設定 backgroundColor。

let barAppearance = UINavigationBarAppearance()
barAppearance.backgroundColor = .blue
UINavigationBar.appearance().scrollEdgeAppearance = barAppearance

navigation bar 的背景圖片

  • Interface Builder

設定 Scroll Edge Appearance 的 Image。

  • 程式

設定 backgroundImage。預設的 content mode 為 scaleToFill，可透過 backgroundImageContentMode 修改 。

let barAppearance = UINavigationBarAppearance()
barAppearance.backgroundImage = UIImage(named: "pattern")
UINavigationBar.appearance().scrollEdgeAppearance = barAppearance

navigation bar 下方的的 shadow 顏色

  • Interface Builder

設定 Scroll Edge Appearance 的 Shadow Color。

  • 程式

設定 shadowColor 為紅色。

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

設定 navigation bar 下方無陰影。

  • Interface Builder

設定 Scroll Edge Appearance 的 Shadow Color 為 Clear Color。

  • 程式
let barAppearance = UINavigationBarAppearance()
barAppearance.configureWithDefaultBackground()
barAppearance.shadowColor = nil 
UINavigationBar.appearance().scrollEdgeAppearance = barAppearance

標題的位置

  • Interface Builder

Scroll Edge Appearance 的 Title Offset 選擇 Custom Offset。

  • 程式

設定 titlePositionAdjustment。

let barAppearance = UINavigationBarAppearance()
barAppearance.configureWithDefaultBackground()
barAppearance.titlePositionAdjustment = UIOffset(horizontal: -100, vertical: 10)
UINavigationBar.appearance().scrollEdgeAppearance = barAppearance

navigation bar 的標題樣式

  • Interface Builder

Scroll Edge Text Attributes 的 Title 選擇 Custom。

  • 程式

設定 titleTextAttributes 或 largeTitleTextAttributes。

let barAppearance = UINavigationBarAppearance()
barAppearance.configureWithDefaultBackground()
barAppearance.backgroundEffect = UIBlurEffect(style: .systemMaterialDark)
barAppearance.titleTextAttributes = [
   .foregroundColor: UIColor.white,
   .font: UIFont.systemFont(ofSize: 50)
]        
UINavigationBar.appearance().scrollEdgeAppearance = barAppearance

navigation bar 上 button 的文字樣式

  • Interface Builder

Scroll Edge Bar Button Appearances 的 Button 選擇 Custom。

除了一般的 Button 可設定外，也可設定 Done Button & Back Button。

  • 程式

可設定 buttonAppearance，backButtonAppearance & doneButtonAppearance ，型別為 UIBarButtonItemAppearance。

let barAppearance = UINavigationBarAppearance()
barAppearance.configureWithDefaultBackground()
let buttonAppearance = UIBarButtonItemAppearance()
buttonAppearance.normal.titleTextAttributes = [
   .foregroundColor: UIColor.orange
]
barAppearance.buttonAppearance = buttonAppearance
UINavigationBar.appearance().scrollEdgeAppearance = barAppearance

navigation bar 的 button 圖文顏色

  • Interface Builder

從 Bar Button Item 或 Navigation Bar 設定 Tint。

  • 程式

設定 UIBarButtonItem.appearance() 的 tintColor。

UIBarButtonItem.appearance().tintColor = .orange

ps: 若有另外用 UIBarButtonItemAppearance 設定 button item 的樣式，button 的文字將依據 UIBarButtonItemAppearance 的設定。

navigation bar 的 back 按鈕設定

UIKit navigation bar 的 back 按鈕設定

預設的 back 按鈕文字

medium.com

舊版 Navigation Bar 的設定方法(Xcode 12 以前)

tab bar 樣式

設定 bar 背景樣式的方法跟 navigation bar 類似，因此以下我們主要說明如何調整 tab 的圖文樣式。

tab 的 icon 顏色

依據 normal & selected 狀態設定不同的 iconColor，normal 是未被選取的 tab，selected 是被選取的 tab。

let barAppearance = UITabBarAppearance()
barAppearance.configureWithDefaultBackground()
barAppearance.stackedLayoutAppearance.normal.iconColor = .gray     barAppearance.stackedLayoutAppearance.selected.iconColor = .orange
UITabBar.appearance().scrollEdgeAppearance = barAppearance

tab 顯示時有 stackedLayoutAppearance，inlineLayoutAppearance & compactInlineLayoutAppearance 三種模式。

  • stackedLayoutAppearance : 圖在上，字在下。
  • inlineLayoutAppearance : 圖在左，字在右。
  • compactInlineLayoutAppearance : 圖在左，字在右，針對較小的 iPhone。

剛剛的範例畫面為 portrait 的 iPhone，它將採用 stackedLayoutAppearance。若想在 landscape 的 iPhone 12 設定 icon 顏色，則要另外設定 compactInlineLayoutAppearance。

barAppearance.compactInlineLayoutAppearance.normal.iconColor = .gray
barAppearance.compactInlineLayoutAppearance.selected.iconColor = .orange

ps: 剛剛的範例設定 scrollEdgeAppearance，不過畫面若是捲動畫面，則要另外設定 standardAppearance，相關說明可參考以下連結。

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

從 iOS 15 開始，navigation bar & tab bar 的樣式預設有一些跟之前不同的地方，以下我們分別討論兩種不同的情況:

medium.com

tab 的 文字樣式

設定 titleTextAttributes。

let barAppearance = UITabBarAppearance()
barAppearance.configureWithDefaultBackground()
barAppearance.stackedLayoutAppearance.normal.iconColor = .gray       barAppearance.stackedLayoutAppearance.normal.titleTextAttributes = [
    .foregroundColor: UIColor.gray,
    .font: UIFont.systemFont(ofSize: 20)
]     
barAppearance.stackedLayoutAppearance.selected.iconColor = .orange   barAppearance.stackedLayoutAppearance.selected.titleTextAttributes = [
    .foregroundColor: UIColor.orange,
    .font: UIFont.systemFont(ofSize: 20)
]        
UITabBar.appearance().scrollEdgeAppearance = barAppearance

另一種設定 tab 圖文顏色的方法

  • Interface Builder

設定 Tab Bar 的 Image Tint。

  • 程式

設定 UITabBar.appearance() 的 tintColor。

UITabBar.appearance().tintColor = .orange

ps: 若有另外從 stackedLayoutAppearance，inlineLayoutAppearance & compactInlineLayoutAppearance 設定文字樣式，文字將依據它們的設定。

Swift
IOS
Xcode

--

--

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

Written by 彼得潘的 iOS App Neverland

6.5K Followers
Editor for

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

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams