SwiftUI 框架

SwiftUI TabView 教學:利用 PageTabViewStyle 建立 Paged Scrolling 視圖

在 iOS 14 中,Apple 在 SwiftUI 框架引入了一個新的樣式:PageTabViewStyle,讓開發者創建頁面滾動 (paged scrolling) 界面。
SwiftUI TabView 教學:利用 PageTabViewStyle 建立 Paged Scrolling 視圖
SwiftUI TabView 教學:利用 PageTabViewStyle 建立 Paged Scrolling 視圖
In: SwiftUI 框架, UI

之前的這篇教學中,我們教過大家如何使用 TabView,來顯示 tab bar 界面。在 iOS 14 中,Apple 在 SwiftUI 框架引入了一個新的樣式:PageTabViewStyle,讓開發者創建頁面滾動 (paged scrolling) 界面。在這篇教學中,我們會教大家實作這種 tab 視圖樣式。

讓我們從一個簡單的 tab 視圖開始。創建一個 SwiftUI 專案後,讓我們如此替換 ContentView 結構:

struct ContentView: View {
 
    var colors: [Color] = [ .orange, .green, .yellow, .pink, .purple ]
    var emojis: [String] = [ "👻", "🐱", "🦊" , "👺", "🎃"]
 
    var body: some View {
        TabView() {
 
            ForEach(0..<emojis.endIndex) { index in
                Text(emojis[index])
                    .font(.system(size: 150))
                    .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: 250)
                    .background(colors[index])
                    .clipShape(RoundedRectangle(cornerRadius: 30))
                    .padding()
                    .tabItem {
                        Text(emojis[index])
                    }
            }
 
        }
 
    }
}

在預覽畫布 (preview canvas) 運行 App,你會看到 tab 視圖有 5 個 tab item。

swiftui-tab-view-paging

創建頁面滾動視圖

要將標準 tab 視圖轉換為頁面滾動視圖,我們只要附加 .tabViewStyle 修飾符,並指定使用 PageTabViewStyle 就可以了:

.tabViewStyle(PageTabViewStyle())

只需要一行程式碼,我們就可以將 tab bar 界面轉換為頁面滾動視圖。

swiftui-tab-view-paged-scrolling

客製化頁面指示器

在這種樣式中,tab 視圖會自動呈現頁面指示器 (paging indicator)(就是那些頁面小圓點)。在深色模式 (dark mode) 下,我們可以輕易看到這些小圓點。但是,在淺色模式 (light mode) 下,由於小圓點和背景的顏色相同,因此無法看到小圓點。要解決這個問題,我們可以將 indexViewStyle 修飾符附加到 TabView

.indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))

我們傳遞了 PageIndexViewStyle 的實例,它會設置 backgroundDisplayMode.always。這樣,iOS 就會在小圓點後面呈現半透明的背景。

不過,你也不一定要顯示頁面指示器。如果不需要它,你可以在實例化 PageTabViewStyle 時,另外提供一個參數:

.tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))

指定 indexDisplayMode 為 .never 之後,小圓點就會消失。此外,如果我們要調整小圓點的位置,可以將 .frame 修飾符附加到 TabView。你可以看看以下的例子:

.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: 250)

在上面的程式碼中,我們調整了 tab 視圖的高度。如此一來,我們就可以更改頁面指示器的位置了。

如果你喜歡這篇教學文章,想更深入學習 SwiftUI,可以參考一下我們 《精通 SwiftUI》這本書。

譯者簡介:Kelly Chan-AppCoda 編輯小姐。
原文SwiftUI Tab View: Building a Paged Scrolling View with PagedTabViewStyle

作者
Simon Ng
軟體工程師,AppCoda 創辦人。著有《iOS 16 App 程式設計實戰心法》、《iOS 16 App程式設計進階攻略》以及《精通SwiftUI》。曾任職於HSBC, FedEx等跨國企業,專責軟體開發、系統設計。2012年創立AppCoda技術部落格,定期發表iOS程式教學文章。現時專注發展AppCoda業務,致力於iOS程式教學、產品設計及開發。你可以到推特與我聯絡。
評論
更多來自 AppCoda 中文版
很好! 你已成功註冊。
歡迎回來! 你已成功登入。
你已成功訂閱 AppCoda 中文版 電子報。
你的連結已失效。
成功! 請檢查你的電子郵件以獲取用於登入的連結。
好! 你的付費資料已更新。
你的付費方式並未更新。