How to add a page indicator inside the navigation bar? - ios

Question

Like twitter did:
I have a PageViewController inside a UITabBarController which in turn is inside a UINavigationController.
Could anyone tell me how to show the page indicator inside the navigation bar?

Answer 1

Edit: I just figured out that navigationController.viewControllers only contains the stack.
I will post an edit in a minute
Edit 2: Well, it seems that you have to know the number of view controllers before hand.
Maybe not the best solution, but it works for me. Just tried :)
#interface ViewController () <UINavigationControllerDelegate>
#property (nonatomic, strong) UIPageControl *pageControl;
#end
#implementation ViewController
- (void)viewDidLoad
{
[super viewDidLoad];
UINavigationController *navController = self.navigationController;
navController.delegate = self;
navController.navigationBar.barTintColor = [UIColor colorWithRed:.2
green:.4
blue:.9
alpha:1];
CGSize navBarSize = navController.navigationBar.bounds.size;
CGPoint origin = CGPointMake( navBarSize.width/2, navBarSize.height/2 );
self.pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(origin.x, origin.y,
0, 0)];
//Or whatever number of viewcontrollers you have
[self.pageControl setNumberOfPages:2];
[navController.navigationBar addSubview:self.pageControl];
navController.delegate = self;
}
- (void)navigationController:(UINavigationController *)navigationController willShowViewController:(UIViewController *)viewController animated:(BOOL)animated
{
int index = [navigationController.viewControllers indexOfObject:viewController];
self.pageControl.currentPage = index;
}
#end
Here are some screenshots.

Answer 2

Here's the answer for those looking for a Swift solution.
(adjust formatting to your own needs)
class NavigationControllerWithPageControl: UINavigationController, UINavigationControllerDelegate {
let numberOfPages: Int
init(rootViewController: UIViewController, numberOfPages: Int) {
self.numberOfPages = numberOfPages
super.init(rootViewController: rootViewController)
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
delegate = self
navigationBar.addSubview(pageControl)
pageControl.centerXAnchor.constraint(equalTo: navigationBar.centerXAnchor).isActive = true
pageControl.centerYAnchor.constraint(equalTo: navigationBar.centerYAnchor).isActive = true
}
lazy var pageControl: UIPageControl = {
let navBarsize = navigationBar.bounds.size
let origin = CGPoint(x: navBarsize.width/2, y: navBarsize.height/2)
let pc = UIPageControl(frame: CGRect(x: origin.x, y: origin.y, width: 100, height: 20))
pc.translatesAutoresizingMaskIntoConstraints = false
pc.numberOfPages = numberOfPages
pc.currentPageIndicatorTintColor = .black
pc.pageIndicatorTintColor = UIColor.white//.withAlphaComponent(0.3)
pc.isUserInteractionEnabled = false
return pc
}()
func navigationController(_ navigationController: UINavigationController, willShow viewController: UIViewController, animated: Bool) {
let index = navigationController.viewControllers.firstIndex(of: viewController) ?? NSNotFound
DispatchQueue.main.async { [weak self] in
self?.pageControl.currentPage = index
guard let pageControlSubviews = self?.pageControl.subviews.enumerated() else {return}
for (_, dotView) in pageControlSubviews {
dotView.transform = CGAffineTransform(scaleX: 1.3, y: 1.3)
dotView.layer.borderColor = UIColor.black.cgColor
dotView.layer.borderWidth = 1
}
}
}
}
Usage:
let navigationViewController = NavigationControllerWithPageControl(rootViewController: SomeViewController(), numberOfPages: 7)
present(navigationViewController, animated: true, completion: nil)