開啟小鈴鐺通知
檢舉內容

客製化長相的UINavigationBarController

閱讀時間約 5 分鐘

上次客製化TabbarController,這次輪到UINavigationController
一言以蔽之,就是用iOS13後出的UINavigationBarAppearance調整

四種場景UI可設定

  1. standardAppearance:用於設置導航欄在標準狀態下的外觀。這通常是默認的外觀配置。
  2. scrollEdgeAppearance:用於設置導航欄在用戶滾動到內容邊緣時的外觀。當用戶滾動到內容的頂部或底部時,這個外觀配置會生效。
  3. compactAppearance:用於設置導航欄在緊湊狀態下的外觀,通常在設備處於橫向模式時生效。
  4. compactScrollEdgeAppearance:用於設置導航欄在緊湊狀態下並且用戶滾動到內容邊緣時的外觀。
為什麼會看到廣告
這邊我覺得很容易想錯,standardAppearance是指滾動的時候,scrollEdgeAppearance反而才是一開始會看到的(因為預設是頂端)。

原生樣式

原生樣式
zoomable

原生樣式


  • NavigationBar未滑動時背景是透明的
  • 返回鍵會自動帶入上一頁標題且為藍色
  • 標題黑色且字體大小固定

改變返回鍵&背景顏色&標題顏色大小

改變樣式!!!
zoomable

改變樣式!!!


class MyNVC: UINavigationController {

override func viewDidLoad() {
        super.viewDidLoad()
        let appearance = UINavigationBarAppearance()
        // 設定標題文字與大小
        appearance.titleTextAttributes = [.foregroundColor: UIColor.white, .font: UIFont.systemFont(ofSize: 20.0, weight: .semibold)]
        // 設定背景顏色
        appearance.backgroundColor = .systemBlue

        
        // 設定返回鍵normal狀態
        let a = UIBarButtonItemAppearance()
        let buttonItemAppearance = UIBarButtonItemAppearance()
        let normal = buttonItemAppearance.normal

        // 不顯示上一頁title(設成透明)
        normal.titleTextAttributes = [.foregroundColor: UIColor.clear]
        // 設定使用自己的圖片
        normal.backgroundImage = UIImage(named: "back")
        appearance.backButtonAppearance = buttonItemAppearance

        navigationBar.standardAppearance = appearance
        navigationBar.scrollEdgeAppearance = appearance

    }
}

我的做法是先subclass一個NVC,並在viewdidload時去設定他的appearance。

底部陰影

NG作法

// 會變一條實心的線
appearance.shadowColor = .gray
實心線
zoomable

實心線

有效做法

// 用圖的方式放上去
appearance.shadowImage = UIImage(named: "shadow")
陰影
zoomable

陰影

StackOverFlow上也有人是用程式動態渲染出陰影圖片再放,或在navigationBar的layer上加,可是都比較麻煩,最好就是請設計單獨出一張陰影線的圖片XD


用UINavigationBarAppearance的優點

  • 可以客製化的地方很多: 太多了反而覺得有點頭昏😵‍💫 裡面還有很多我沒用到的。
  • 客製化返回鍵UI又保留返回手勢

以前我們專案有另一種做法是去subclass VC,在viewdidLoad時把最左按鈕改成自定義的,缺點是會喪失掉原生的返回手勢,變成只能點擊按鈕返回,對使用者比較難用。

NG作法(不好用!)

class MyVC: UIViewController {
  override func viewDidLoad() {
        super.viewDidLoad()
        let goBackBtn = UIBarButtonItem(image: UIImage(named: "back"), style: .plain, target: self, action: #selector(goBack))
        self.navigationItem.leftBarButtonItem = goBackBtn
}

@objc func goBack() {
        self.navigationController?.popViewController(animated: true)
    }
}








NeonTigerX-avatar-img
NeonTigerX和其他 23 人喜歡這篇
avatar-img
7會員
35內容數
紀錄iOS開發上遇到的問題或是一些流程筆記。主要都是Swift。
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
Michelle Chen的沙龍 的其他內容
這篇文章介紹了 Swift 中字串的比較方法,並討論了使用日期字串進行比較的結果。同時也介紹了數字字串、符號字串和表情符號字串的比較原理。最後指出比較日期字串還是要轉成Date才是安全的做法。
最近碰到個神奇的需求,App啟動時,才要用firebase remoteConfig去決定初始畫面。該文章詳細介紹了在App啟動時如何利用firebase remoteConfig去決定初始畫面,以及解決在推播的情況下造成跳轉無效的問題。
這篇文章主要討論了在 iOS 開發中,使用 UIImagePickerController 來選取 GIF 圖片時會變成靜態截圖的問題,並推薦了使用新的 PHPickerViewController 選取 GIF 檔案。同時提供了一些處理 GIF 圖片的方法。
這篇文章介紹了 iOS 中常用的 Design Patterns,包括 MVC、MVVM、Singleton、Delegation、Observer 等。同時比較了 Delegate 和 Notification 的使用時機。參考資料中還有更多相關資訊。
本文紀錄了MVC和MVVM的差異,包括各自的優缺點和最大差異,並討論了MVVM的商業邏輯應該寫在哪的問題。
在寫SwiftUI view的時候,碰到一個瓶頸(? 帶有Binding的參數要如何preview。 舉例來說有個右邊圖片左邊文字的View,給他一個@Binding var isActive: Bool的狀態,當active時圖片要跟著改變: struct RightImageView: Vie
這篇文章介紹了 Swift 中字串的比較方法,並討論了使用日期字串進行比較的結果。同時也介紹了數字字串、符號字串和表情符號字串的比較原理。最後指出比較日期字串還是要轉成Date才是安全的做法。
最近碰到個神奇的需求,App啟動時,才要用firebase remoteConfig去決定初始畫面。該文章詳細介紹了在App啟動時如何利用firebase remoteConfig去決定初始畫面,以及解決在推播的情況下造成跳轉無效的問題。
這篇文章主要討論了在 iOS 開發中,使用 UIImagePickerController 來選取 GIF 圖片時會變成靜態截圖的問題,並推薦了使用新的 PHPickerViewController 選取 GIF 檔案。同時提供了一些處理 GIF 圖片的方法。
這篇文章介紹了 iOS 中常用的 Design Patterns,包括 MVC、MVVM、Singleton、Delegation、Observer 等。同時比較了 Delegate 和 Notification 的使用時機。參考資料中還有更多相關資訊。
本文紀錄了MVC和MVVM的差異,包括各自的優缺點和最大差異,並討論了MVVM的商業邏輯應該寫在哪的問題。
在寫SwiftUI view的時候,碰到一個瓶頸(? 帶有Binding的參數要如何preview。 舉例來說有個右邊圖片左邊文字的View,給他一個@Binding var isActive: Bool的狀態,當active時圖片要跟著改變: struct RightImageView: Vie
你可能也想看
Google News 追蹤
Thumbnail
2025 年,從分享精彩的 #Myvocus2024 年度回顧開始! #Myvocus2024 年度回顧通知已送達 vocus 的 2024 有超過 12 萬筆訂單、35 萬則以上的內容、16 萬以上的新會員、4 千+ 筆數位商品訂單,5 萬 + 則貼文! 曬曬你的 2024 vocus 吧!
Thumbnail
相信大家現在都有在使用網銀的習慣 以前因為打工和工作的關係,我辦過的網銀少說也有5、6間,可以說在使用網銀App方面我可以算是個老手了。 最近受邀參加國泰世華CUBE App的使用測試 嘿嘿~殊不知我本身就有在使用他們的App,所以這次的受測根本可以說是得心應手
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
這次的side bar不一樣了,上一次我好像做的太簡單了,所以完讀率只有14%,我好難過啊(;´д`)ゞ,所以我這準備的內容有多一點。 這次的目標 按鈕的排版 按鈕滑過去會有顏色變化 Side bar能夠展開 箭頭能夠移動至被選擇的物件上 宣告 這次我創了兩個檔案 SideBa
我自己是希望可以製作iOS app來更好存放我的文章, 更進階一點,可以變成直接錄音後, 照我設定的方式轉換成文檔,讓iPhone變成我更強的助手。 感覺有很多可以探索,用時間慢慢累積經驗。
Thumbnail
本文探討2024年UI/UX設計趨勢,包括深色模式和色彩適應性、微互動和動畫、3D元素與虛擬現實整合,以及以用戶為中心的數據驅動設計、無障礙設計和情感設計的新方法。
Thumbnail
iPhone 最新作業系統 iOS 18 控制中心大更新,預設有常用功能、音樂播放器、連線控制三個頁面,並允許使用者自訂頁面,可以直接在控制中心管理所需的功能、調整位置和選擇尺寸。
Thumbnail
Part.1 搞定基本的 UI 開始開發 iOS App。 首先準備一台 Mac,然後安裝 Xcode,新增專案,系統即刻生成基本的專案結構。coding 的起點在檔案 ContentView.swift: import SwiftUI struct ContentView: View {  
Thumbnail
2025 年,從分享精彩的 #Myvocus2024 年度回顧開始! #Myvocus2024 年度回顧通知已送達 vocus 的 2024 有超過 12 萬筆訂單、35 萬則以上的內容、16 萬以上的新會員、4 千+ 筆數位商品訂單,5 萬 + 則貼文! 曬曬你的 2024 vocus 吧!
Thumbnail
相信大家現在都有在使用網銀的習慣 以前因為打工和工作的關係,我辦過的網銀少說也有5、6間,可以說在使用網銀App方面我可以算是個老手了。 最近受邀參加國泰世華CUBE App的使用測試 嘿嘿~殊不知我本身就有在使用他們的App,所以這次的受測根本可以說是得心應手
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
這次的side bar不一樣了,上一次我好像做的太簡單了,所以完讀率只有14%,我好難過啊(;´д`)ゞ,所以我這準備的內容有多一點。 這次的目標 按鈕的排版 按鈕滑過去會有顏色變化 Side bar能夠展開 箭頭能夠移動至被選擇的物件上 宣告 這次我創了兩個檔案 SideBa
我自己是希望可以製作iOS app來更好存放我的文章, 更進階一點,可以變成直接錄音後, 照我設定的方式轉換成文檔,讓iPhone變成我更強的助手。 感覺有很多可以探索,用時間慢慢累積經驗。
Thumbnail
本文探討2024年UI/UX設計趨勢,包括深色模式和色彩適應性、微互動和動畫、3D元素與虛擬現實整合,以及以用戶為中心的數據驅動設計、無障礙設計和情感設計的新方法。
Thumbnail
iPhone 最新作業系統 iOS 18 控制中心大更新,預設有常用功能、音樂播放器、連線控制三個頁面,並允許使用者自訂頁面,可以直接在控制中心管理所需的功能、調整位置和選擇尺寸。
Thumbnail
Part.1 搞定基本的 UI 開始開發 iOS App。 首先準備一台 Mac,然後安裝 Xcode,新增專案,系統即刻生成基本的專案結構。coding 的起點在檔案 ContentView.swift: import SwiftUI struct ContentView: View {