Changing UIPageViewController own PageController regarding Color of Dots

Question

Hey I'm using a UIPageViewController to control what page I am on and for scrolling. I know it's possible to show a Page Controller along with it by simply adding the following two functions.

- (NSInteger)presentationCountForPageViewController:(UIPageViewController *)pageViewController

- (NSInteger)presentationIndexForPageViewController:(UIPageViewController *)pageViewController

What I want to know is if it's possible to change the color of the page controller, so the dots are more visible on the background I'm using?

I know a regular page controller has the properties:

@property(nonatomic,retain) UIColor *currentPageIndicatorTintColor
@property(nonatomic,retain) UIColor *pageIndicatorTintColor

However, I can't figure out for the life of me how to access these properties or the Page Controller for that matter from UIPageViewController.

It might be helpful, if someone just said how to change the properties in general?

Solution 1

You can use UIAppearance to configure UIPageControl colors. This applies to UIPageControls in UIPageViewControllers too.

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  UIPageControl *pageControl = [UIPageControl appearance];
  pageControl.pageIndicatorTintColor = [UIColor whiteColor];
  pageControl.currentPageIndicatorTintColor = [UIColor redColor];
}

Solution 2

If you would like to change the UIPageControl's colors for a specific UIPageViewController, you can use the following:

In Swift 3

let pageControl: UIPageControl = UIPageControl.appearance(whenContainedInInstancesOf: [MyPageViewController.self])
pageControl.pageIndicatorTintColor = UIColor.green
// ... any other changes to pageControl

Solution 3

UIPageControl conforms to UIAppearance protocol. The Apple Developper API Reference states about UIAppearance:

Use the UIAppearance protocol to get the appearance proxy for a class. You can customize the appearance of instances of a class by sending appearance modification messages to the class’s appearance proxy.

---

Therefore, using Swift 2.2, you may set UIPageControl's pageIndicatorTintColor and currentPageIndicatorTintColor in a subclass of UINavigationController or in your AppDelegate class (for a more global approach).

CustomNavigationController.swift:

class CustomNavigationController: UINavigationController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // Set pageIndicatorTintColor and currentPageIndicatorTintColor
        // only for the following stack of UIViewControllers
        let pageControl = UIPageControl.appearance()
        pageControl.pageIndicatorTintColor = UIColor.blueColor()
        pageControl.currentPageIndicatorTintColor = UIColor.greenColor()
    }

}

AppDelegate.Swift:

class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?

    func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {

        // Set pageIndicatorTintColor and currentPageIndicatorTintColor globally
        let pageControl = UIPageControl.appearance()
        pageControl.pageIndicatorTintColor = UIColor.blueColor()
        pageControl.currentPageIndicatorTintColor = UIColor.greenColor()

        return true
    }

}

Comments

[Rahul Gautam]

Hi, for tintColor its working. could you tell me how to reduce height of UIPageControl (I have tried pageControl.frame = CGRectMake(self.viewController.view.bounds.origin.x, self.viewController.view.bounds.origin.y+352, self.viewController.view.bounds.size.width, 10);)

[devios1]

Unfortunately this would change the tint color for all instances of UIPageViewController in the app. What if you want to customize them individually?

[Zorayr]

As @devios mentioned, this is an intrusive solution. Anyone know how we can do this specifically for a single UIPageViewController?

[Hellojeffy]

@Zorayr you can use let pageControl: UIPageControl = UIPageControl.appearance(whenContainedInInstancesOf: [MyPageViewController.self]) and begin customizing pageControl