前言

昨天大家已經學會如何用 Navigation View 了，現在讓我們為自己的 App 建立 Tab Bar 吧 !!!
大家可能需要先建立幾個 View 等等會比較好操作。

Tab View

Tab View 官方文件
A view that switches between multiple child views using interactive user interface elements.

Tab Bar 簡單來說就是用來切換不同頁面間的功能。大部分的 app 都會有 Tab Bar (Tab View) 功能讓大家使用。
而 swiftui 用 TabView 呈現 Tab Bar 效果，它也是一種用來包元件的容器...

這是 tab bar :

TabView{ /*內容*/ }

用 .tabItem 來幫 Tab Bar 外觀做修飾。
用 .badge 來顯示頁面的警訊。
用 .accentColor 來改變整個 Tab Bar 的顏色。也可以跟之前一樣使用 .foregroundColor(.color) 來改變 icon 顏色。

• accentColor 是放在整個 TabView 外。

TabView{ /*內容*/ 
    AView().tabItem{
        //tab bar的文字icon等等
    }
     .badge()
}.accentColor(顏色)//tab bar顏色

先建立 TabView 並在裡面放一些元件，如下圖：

接著可以多新增幾個，並試試 badge 的效果。

看一下效果如何。

這邊第三個 icon 沒有顯示出來，等等再做修改。
試著改變 tab bar icon 的顏色，並改好 icon。

接著直接將已經寫好的 view 放在裡面。請看以下範例架構。

TabView {
  AView()
    .tabItem {
      Image(systemName: /*icon名稱*/ )
      Text("First Tab")
    }
  BView()
    .tabItem {
      Image(systemName: /*icon名稱*/ )
      Text("Second Tab")
    }
  CView()
    .tabItem {
      Image(systemName: /*icon名稱*/ )
      Text("Third Tab")
   }
}

加上其他的 View 之後就完成啦~
展示影片：

SF Symbols

這邊介紹一下 sf symbols ，它是一個 apple 所提供的軟體，裡面有很多常用的 icon ，大家進到裡面後，找到自己需要的圖案，並記下名字就可以使用。

官網及下載
sf symbol介紹\教學

找到名字後，到 xcode 中打上。（這邊我所操作的是 gear）

Image(systemName:"icon名稱")

就完成啦~

今天就到這邊啦～
各位下篇再見～～～