實現透明的 navigation bar & tab bar — 利用它的背景圖和陰影圖

iOS App 的上方，時常會看到一條毛玻璃的 navigation bar，不過偶爾我們會看到類似上圖這樣完全透明的 navigation bar。接下來就讓我們一步步實現透明的 navigation bar 吧。

新方法: iOS 13 客製 bar 模樣的 UINavigationBarAppearance

iOS 13 客製 bar 模樣的 UINavigationBarAppearance

舊方法: iOS 13 以前的版本

1 在 storyboard 設計搭配 navigation controller 的畫面。

App 啟動後，預設將看到毛玻璃的 navigation bar。

2 在 navigation controller 顯示的第一個 controller 裡將 navigation bar 變透明。

override func viewDidLoad() {
   super.viewDidLoad()
   let image = UIImage() 
    self.navigationController?.navigationBar.setBackgroundImage(image, for: .default)
}

利用 setBackgroundImage(_:for:) 將 bar 的背景圖片設成 UIImage( )，即可讓 bar 變透明，因為 UIImage( ) 是個看不到的圖片。

結果將如上圖所示，bar 變透明了 ! 因此，利用這個技巧，除了將 bar 變透明，我們還可讓它顯示特別的背景圖片，比方波浪狀的彩虹。

let image = UIImage(named: "rainbowLine")
self.navigationController?.navigationBar.setBackgroundImage(image, for: .default)

but，我們最害怕聽到 but 了，剛剛透明的 bar 的下方還殘留一條細細的分隔線。

這條線其實是 navigation bar 的 shadow 圖片，所以只要我們將它的 shadowImage 設成看不到的 UIImage()，就可消除這條礙眼的細線。

override func viewDidLoad() {
   super.viewDidLoad()
   let image = UIImage() 
        self.navigationController?.navigationBar.setBackgroundImage(image, for: .default)
   self.navigationController?.navigationBar.shadowImage = image
}

透過 shadowImage，我們甚至可在 bar 的下方加入特別的分隔線，比方以下例子。

self.navigationController?.navigationBar.shadowImage = UIImage(named: "rainbowLine")

值得注意的，若要實現透明的 navigation bar，記得它的 isTranslucent 必須為 true，否則將無法透明。

self.navigationController?.navigationBar.isTranslucent = true

在剛剛的例子，因為我們搭配 storyboard 上拉出的 navigation controller，它的 navigation bar 預設即勾選 Translucent，因此不用再另外設定。

若想將 App 所有的 UINavigationBar 變透明，則可透過 UINavigationBar.appearance( ) 實現，比方以下例子，我們在 App 啟動時將 bar 變透明。

AppDelegate.swift

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
   let image = UIImage()
   UINavigationBar.appearance().setBackgroundImage(image, for: .default)
   UINavigationBar.appearance().shadowImage = image
   return true
}

若想 App 所有的 UITabBar 變透明，方法差不多，一樣是將 backgroundImage & shadowImage 設為 UIImage()。

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
   let image = UIImage()
   UITabBar.appearance().backgroundImage = image
   UITabBar.appearance().shadowImage = image
   return true
}