SwiftUI scroll view page indicator color

In a SwiftUI scroll view with the page style, is it possible to change the page indicator color?

Do you mean a TabView with the tab view style of .page (PageTabViewStyle)? If so, it's currently not possible in SwiftUI (as of iOS 15 beta 5).

You can, however, reach down into UIKit and modify some of its appearance API.

Here's some examples of its usage:

// All page dots have a colour of red
UIPageControl.appearance().pageIndicatorTintColor = .systemRed
// Only the current page's dot is green
UIPageControl.appearance().currentPageIndicatorTintColor = .systemGreen
// All page dots have a colour of indigo but the current page's dot is blue
UIPageControl.appearance().currentPageIndicatorTintColor = .systemBlue
UIPageControl.appearance().pageIndicatorTintColor = .systemIndigo


Place this in the initialiser of your view.

struct SomeView: View {
  init() {
    // modify appearance
  }

  var body: some View { … }
}

There's a more delicate way to update UIPageControl appearance if you are using SwiftUI view from UIKit.

// SwiftUI with with UIPageControl
struct MyView: View { ... }
import SwiftUI
import UIKit

final class MyViewContainerController: UIHostingController<MyView> {
    init() {
        let view = MyView()
        super.init(rootView: view)
    }

    @available(*, unavailable)
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override func viewDidLoad() {
        super.viewDidLoad()

        let containerTypes = [MyViewContainerController.self]
        let appearance = UIPageControl.appearance(whenContainedInInstancesOf: containerTypes)
        appearance.currentPageIndicatorTintColor = .systemBlue
        appearance.pageIndicatorTintColor = .systemIndigo
    }
}
SwiftUI scroll view page indicator color
 
 
Q