10

I am trying to play a little with the iOS14 feature named TabView.

I am trying to create a carousel aspect. Everything is ok except that the index indicator is not showing(those 3 dots from the image). On a background different than white the dots are present but if the background is white the dots are not displayed. I was expecting to see them on some sort of grey color.

Do you know what is the source of this? I am trying to find an alternative without using ".indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))" because it will add a weird color background to the dots.

import SwiftUI

struct ContentView: View {
    var body: some View {
      SwiftUI.TabView {
                Text("test1")
                Text("test2")
                Text("test3")
                Text("test4")
            }
            .frame(width: UIScreen.main.bounds.width, height: 100)
            .tabViewStyle(PageTabViewStyle(indexDisplayMode: .automatic))
    }
}

This is how it looks on red background(on white there is nothing):

enter image description here

1 Answers1

11

Unfortunately it doesn't currently appear possible in SwiftUI as of iOS 15 beta 5.

However, you can reach down into UIKit and modify appearance like this:

TabView {
    Text("Page 1")
    Text("Page 2")
    Text("Page 3")
}
.onAppear() {
    UIPageControl.appearance().currentPageIndicatorTintColor = .black
    UIPageControl.appearance().pageIndicatorTintColor = .grey
}
Jamie
  • 170
  • 2
  • 16
  • 2
    To maintain compatibility with dark mode, I suggest setting `currentPageIndicatorTintColor` to `UIColor.label` and `pageIndicatorTintColor` to `UIColor.secondaryLabel`. – Felix May 05 '22 at 10:22