在 SwiftUI 構建可滾動的客製化標籤列　大大提升使用者體驗

無論是在構建社交媒體 App 或生產力工具 (productivity tool) 時，我們都可以利用標籤列 (Tab Bar) 介面讓它更加直觀和易於使用，提升使用者體驗。現在有了 SwiftUI 的 TabView，要創建無縫 (seamless)、而且可以客製化的標籤介面 (tab interface) 十分簡單。

在預設情況下，iOS 會以標準形式顯示標籤列，方便使用者可以快速切換不同 App。但是，開發者可能會想客製化標籤列，來滿足 App 的特定需求。

在這篇教學文章中，我會帶大家利用 SwiftUI 構建一個可滾動的動畫標籤列，並支援無限的標籤項目 (tab item)。完成這篇教學之後，我們會實作出以下的標籤列：

標籤視圖 (Tab View) 和標籤列簡介

如果你還沒有用過 TabView，可以先看看以下的簡介。要創建一個標籤視圖，我們只需要使用 TabView，並在當中嵌入子視圖。我們可以應用 tabItem 修飾符，指定每個子視圖的項目描述。讓我們看看以下例子：

struct ContentView: View {
    let colors: [Color] = [ .yellow, .blue, .green, .indigo, .brown ]
    let tabbarItems = [ "Random", "Travel", "Wallpaper", "Food", "Interior Design" ]

    var body: some View {
        TabView {
            ForEach(colors.indices, id: \.self) { index in
                colors[index]
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    .tag(index)
                    .tabItem {
                        Image(systemName: "\(index + 1).circle")
                        Text(tabbarItems[index])
                    }
            }
        }
    }
}

以上的程式碼會創建出一個簡單的標籤視圖，當中有 5 個標籤項目。我們用了 Image 來顯示標籤圖示 (icon)。如果我們在 Xcode 編寫以上的程式碼，應該會在預覽中看到以下的標籤列：

TabView 有另一個 init  方法，它需要一個狀態變量，當中包含標籤的 tag value。

TabView(selection: $selectedIndex)

舉個例子，讓我們在 ContentView 內宣告以下狀態變數：

@State private var selectedIndex = 0

現在，如果我們改變 selectedIndex 的數值，標籤視圖就會自動轉換到相應的標籤。我們可以這樣更改程式碼來測試一下：

TabView(selection: $selectedIndex) {
   .
   .
   .
}
.onAppear {
    selectedIndex = 2
}

你會發現，在顯示標籤視圖時，會自動選擇第三個標籤。

建立一個客製化的可滾動標籤列

如上圖的範例結果可見，我們想構建的標籤列是可滾動的，如果我們想放多於 5 個項目到標籤列，這個功能就十分有用了。要建立這個客製化標籤列，我們會用  ScrollView 和 ScrollViewReader 來構建自己的視圖。

讓我們這樣構建標籤列視圖，並把它命名為 TabBarView：

struct TabBarView: View {
    var tabbarItems: [String]

    @State var selectedIndex = 0

    var body: some View {
        ScrollViewReader { scrollView in
            ScrollView(.horizontal, showsIndicators: false) {
                HStack {
                    ForEach(tabbarItems.indices, id: \.self) { index in

                        Text(tabbarItems[index])
                            .font(.subheadline)
                            .padding(.horizontal)
                            .padding(.vertical, 4)
                            .foregroundColor(selectedIndex == index ? .white : .black)
                            .background(Capsule().foregroundColor(selectedIndex == index ? .purple : .clear))
                            .onTapGesture {
                                withAnimation(.easeInOut) {
                                    selectedIndex = index
                                }
                            }
                    }
                }
            }
            .padding()
            .background(Color(.systemGray6))
            .cornerRadius(25)

        }

    }
}

這個客製化標籤視圖可以接受一個陣列的標籤列項目。在這個範例中，我們會使用 String 陣列。但在實際 App 中，大家可以為選擇自己的客製化型別。

為了在標籤列中啟用滾動功能，我們會把所有標籤項目嵌入到一個滾動視圖中。此外，我們會用 ScrollViewReader 包裝滾動視圖，以確保所選的標籤項目是可見的。

在選擇特定標籤項目時，我們更新了 selectedIndex 變數來反映所選的 index。如此一來，我們就可以 highlight 所選的標籤項目，並向使用者提供反饋。

我們可以在預覽添加 TabBarView，來預覽這個客製化的標籤列。

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()

        TabBarView(tabbarItems: [ "Random", "Travel", "Wallpaper", "Food", "Interior Design" ]).previewDisplayName("TabBarView")
    }
}

現在，這個客製化的標籤列可以正常操作。但是，我們需要手動滾動標籤列，才能顯示最後一個項目。要解決這個問題，我們可以把以下程式碼添加到 ScrollView：

.onChange(of: selectedIndex) { index in
    withAnimation {
        scrollView.scrollTo(index, anchor: .center)
    }
}

當所選 index 更新後，我們會呼叫 scrollTo 方法來移動滾動視圖。

利用 matchedGeometryEffect 建立更漂亮的動畫

我們建立了一個動態、而且可滾動的標籤列，但我們其實可以建立更漂亮的動畫。現在，在切換標籤項目時，標籤列使用「淡出」動畫。如果我們在標籤列搭配使用 matchedGeometryEffect，就可以創建更流暢更漂亮的動畫。讓我們看看如何實作吧！

首先，為標籤列項目建立一個新結構 TabbarItem：

struct TabbarItem: View {
    var name: String
    var isActive: Bool = false
    let namespace: Namespace.ID

    var body: some View {
        if isActive {
            Text(name)
                .font(.subheadline)
                .padding(.horizontal)
                .padding(.vertical, 4)
                .foregroundColor(.white)
                .background(Capsule().foregroundColor(.purple))
                .matchedGeometryEffect(id: "highlightmenuitem", in: namespace)
        } else {
            Text(name)
                .font(.subheadline)
                .padding(.horizontal)
                .padding(.vertical, 4)
                .foregroundColor(.black)
        }

    }
}

有了 matchedGeometryEffect，我們只需要描述兩個視圖的外觀即可。然後，修飾符就會計算兩個視圖之間的差異，並自動為大小或位置變化設置動畫。因此，在上面的程式碼中，我們把被選擇的標籤項目 highlight 為紫色，而沒被選擇的項目則以普通文本樣式顯示。

在 TabBarView 中，宣告一個新的 namespace 變數：

@Namespace private var menuItemTransition

然後，這樣重新編寫 ForEach loop 的程式碼：

ForEach(tabbarItems.indices, id: \.self) { index in

    TabbarItem(name: tabbarItems[index], isActive: selectedIndex == index, namespace: menuItemTransition)
        .onTapGesture {
            withAnimation(.easeInOut) {
                selectedIndex = index
            }
        }
}

更新程式碼後，你會發現切換標籤項目的動畫變得更流暢和漂亮了。

使用客製化標籤列

在把 TabBarView 應用到 ContentView 之前，我們需要先在 TabBarView 做一個小改動。在 TabBarView 中，這樣把狀態變數修改為綁定變數：

@Binding var selectedIndex: Int

現在，我們就可以把這個客製化標籤列應用到其他視圖了。在 ContentView 這樣更新 body：

ZStack(alignment: .bottom) {
    TabView(selection: $selectedIndex) {
        ForEach(colors.indices, id: \.self) { index in
            colors[index]
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .tag(index)
                .ignoresSafeArea()
        }
    }
    .ignoresSafeArea()

    TabBarView(tabbarItems: tabbarItems, selectedIndex: $selectedIndex)
        .padding(.horizontal)
}

要把客製化標籤列合併到 App 中十分簡單，我們只需要把 TabView 包裝在 ZStack 中，並在上面疊加 TabBarView，就可以輕鬆地把將標籤列合併到 tab UI。

我們還需要更新預覽結構，來讓專案順利執行：

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()

        TabBarView(tabbarItems: [ "Random", "Travel", "Wallpaper", "Food", "Interior Design" ], selectedIndex: .constant(0)).previewDisplayName("TabBarView")
    }
}

現在讓我們測試一下標籤列的 UI 吧：

總結

對很多流行的手機 App 來說，標籤列介面是非常重要的元素，讓使用者可以快速和方便地切換到 App 的不同功能。雖然在大多數情況下，標準的標籤列都已經可以滿足我們的要求，但有時我們還是會希望客製化標籤列，以提升使用者體驗。

在這篇教學文章中，我們構建了一個動態、而且可滾動標籤列，並支援無限的標籤項目。我們還可以搭配 matchedGeometryEffect 使用，把標籤列的動畫提升到另一個層次。學會了這篇文章的技巧後，你就可以按自己 App 的需要，設計出無縫而且直觀的客製化標籤列。

如果大家想更深入了解 SwiftUI，可以參閱我們的《精通SwiftUI》一書。