Tab Bar相關功能及設定

使用者在使用App的時候是不是都有遇到
可以利用不同的icon切換不同畫面的App(如Facebook app, Instagram等等)
底下要來提出一些屬性的設定來說明
不過首先來了解一下Tab Bar是怎麼產生的

Tab Bar是屬於Tab Bar Controller裡的一個物件
生成Tab Bar Controller可以從Library裡面拉現成的
也可以直接利用一般的View Controller生成:

  1. 點選到單一的View Controller項目上
  2. 選擇工具列上的Editor➔Embed in➔Tab Bar Controller

現在來看Tab Bar上的相關屬性設定
首先來看看Translucent這個設定(default是打開的)
這是讓Tab Bar可以半透明的設定(在Navigation Bar也有相同的屬性)

Translucent setting

以iPhoneX為例,可以發現底下touch bar(?)橫槓往上移動了
表示底下的空間已經固定為Tab Bar所用
View所能顯示的空間壓縮到僅Tab Bar上面的空間

Tab Bar也可以改變顏色,不是一層不變的白底(灰階?)
可以從Style選項將Bar顏色變成黑色(僅default/black)

Tab Bar Style setting

如果有需求將Tab Bar設計成其他顏色
也可以利用Bar Tint的選項改變顏色

Bar Tint setting

Tab Bar Controller上有一個Hide Bottom on Push的功能
意指觸發push的動作時隱藏底下的Bar
Navigation切換到新畫面就是以push方式產生
底下結合Navigation Controller做一個測試練習

Combine Navigation Controller & Tab Bar Controller

Navigation跳頁之後不想看到底下的Bar
首先選擇最後目的的view上的設定
可以看到Hide Bottom on Push的選項
勾選該項目就可以看到頁面底部的Bar消失了

Bottom Bar disappeared

--

--