[SwiftUI]TabViewのインジケーターの色を変えるには？

どうも、ちょげ(@chogetarou)です。

PageTabViewStyleを適用したTabViewのインジケーターの色を変える方法を紹介します。

方法

TabViewのインジケーターの色を変えるには、UIPageControlを使います。

具体的には、UIPageControl.appearance().currentPageIndicatorTintColorとUIPageControl.appearance().pageIndicatorTintColorのそれぞれに色を代入します。

init {
     //選択中のインジケータの色を代入
     UIPageControl.appearance().currentPageIndicatorTintColor = selectedColor

     //非選択中のインジケータの色を代入
     UIPageControl.appearance().pageIndicatorTintColor = unselectedColor
}

UIPageControl.appearance().currentPageIndicatorTintColorに代入した色は、選択中のインジケーターの色。

UIPageControl.appearance().pageIndicatorTintColorに代入した色は、非選択のインジケータの色になります。

使用例

struct ContentView: View {
    
    init() {
        UIPageControl.appearance().currentPageIndicatorTintColor = .red
        UIPageControl.appearance().pageIndicatorTintColor = UIColor.red.withAlphaComponent(0.2)
    }
    
    var body: some View {
        VStack {
            TabView  {
                PageView(text: "Home View")
                    
                PageView(text: "Data View")
                    
                PageView(text: "Person View")
            }
            .tabViewStyle(PageTabViewStyle())
            
        }
    }
}