0

I have a tab view defined by this code:

TabView {
    ViewOne()
    ViewTwo()
}
.tabViewStyle(PageTabViewStyle())
.indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))

This creates a tabview indicator like this. However id like to either use a darker color or swap the scheme of this one component. enter image description here

2 Answers 2

1

I believe the indexViewStyle is not customizable at the moment, because the IndexViewStyle protocol is not public.

However, you can try to use TabView(selection:) init and overlay, or somehow hide the original indexView and just make your own.

0

Not sure what does you mean by color scheme. If you want to change the color of the indicator or remove the background of the color you can do this:

struct PageView: View {
    
    init() {
        UIPageControl.appearance().currentPageIndicatorTintColor = .cyan
        UIPageControl.appearance().pageIndicatorTintColor = UIColor.red.withAlphaComponent(1)
        UIPageControl.appearance().backgroundStyle = .minimal
    }
    
    var body: some View {

        TabView {
            Text("First")
            Text("Second")
            Text("Third")
        }
        .tabViewStyle(.page)
        
    }
}

UIPageControl.appearance().currentPageIndicatorTintColor change the color of the current page dot. UIPageControl.appearance().pageIndicatorTintColor change the rest of the dot. Also, in Swift 14 onwards, new style is introduced to UIPageControl. The prominent style which is the one you have now with the rounded view and the old style called minimal style which I change in my code above in UIPageControl.appearance().backgroundStyle.

The output of my code is

enter image description here

If you want to change the color accordingly to dark or light mode, you can add a color set in your Assets and use it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.