CODEWITHSUNDEEP
iosswiftiphoneswiftui
Arnav Motwani
Arnav Motwani

Reputation: 817

Swaping the color scheme of tab view indicators in SwiftUI 3

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

Upvotes: 0

Views: 775

Answers (2)

Wes Chua
Wes Chua

Reputation: 1106

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.

Upvotes: 1

eXCore
eXCore

Reputation: 306

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.

Upvotes: 1

Related Questions