26 Tab Bar Controller & Navigation Controller 的相關練習

為了更熟悉操作Tab Bar Controller 和 Navigation Controller,來研究看看他們還有哪些功能。

一、讓 navigation bar 放大。

controller 可個別控制 navigation bar 是否放大。捲動後 navigation bar 縮小
當畫面上的 Scroll View, Table View, Collection View, Text View 捲動時,都可以讓 navigation bar 縮小。

首先點選你的navigation bar,然後往下滑找到 Prefers Large Titles。

二、修改 navigation bar 的 back button 標題: 當從A畫面進入B畫面,B畫面顯示的back button標題,要由A畫面controller的navigation item的 Back Button 欄位設定。(我這邊是先設定好back button的內容,再拉segue)

三、研究 navigation controller 手勢觸發 bar 隱藏的功能: navigation controller 元件的 Hide Bars 欄位:

在Navigation Controller的Hide Bars屬性欄有四種可觸發Bar隱藏選項可以打勾。

我的媽我找很久,在這邊勾選(點灰色的那面navigation controller 上面那一條細細的長條)

(一)、 On Swipe隱藏的呈現:上滑的方式打開Bar,下滑的方式隱藏Bar。

(二)、On Tap隱藏的呈現:點一下會隱藏,再點一下會出現,再點一下又會隱藏。

(三)、When Keyboard Appears時隱藏的呈現:鍵盤出現則Bar隱藏起來

(四)、When Vertically Compact 時隱藏的呈現:當畫面轉向時Bar隱藏起來

四、研究 navigation bar & tab bar 的欄位。(我使用xcode15 版本,且僅研究無程式的方式)

(一)、navigation bar 樣式:

  1. 固定樣式:

點選 在灰色那一頁的navigation controller的 navigation bar ,勾選 Scroll Edge。

2. 毛玻璃的模糊效果

設定 Scroll Edge Appearance 的 Blur Style。

3. navigation bar 的背景顏色

(一)捲動後不一樣

(二)捲動仍一樣

4. navigation bar 的背景圖片

設定 Scroll Edge Appearance 的 Image。

5. navigation bar 下方的的 shadow 顏色

6. 設定 navigation bar 下方無陰影。

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

7. 標題的位置

Scroll Edge Appearance 的 Title Offset 選擇 Custom Offset。

8. navigation bar 的標題樣式

Scroll Edge Text Attributes 的 Title 選擇 Custom(我改紅色字體)。

9. navigation bar 上 button 的文字樣式

Scroll Edge Bar Button Appearances 的 Button 選擇 Custom(我改紫色)。

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

--

--

HydeeChen
彼得潘的 Swift iOS / Flutter App 開發教室

純種文組生轉職程式異世界 持續學習swift, Objective C, flutter…