MaterialPageControl

Swift version of material-components-ios/PageControl which is influenced by Material Design specifications for animations and layout.

Demo

Installation

CocoaPods

PageViewController is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod "MaterialPageControl"

Swift Package Manager

To integrate using Swift Package Manager, add the following as a dependency to your Package.swift:

.package(url: "https://github.com/DeluxeAlonso/MaterialPageControl.git", .upToNextMajor(from: "1.0.0"))

Usage

You can initialize MaterialPageControl programatically or through interface builder and always must setup its numberOfPages property:

let pageControl = MaterialPageControl()
pageControl.pageIndicatorTintColor = .gray
pageControl.currentPageIndicatorTintColor = .black
pageControl.numberOfPages = 3

MaterialPageControl is designed to be used in conjunction with a scroll view. You must implement three scrollview delegate methods (-scrollViewDidScroll, -scrollViewDidEndDecelerating, and -scrollViewDidEndScrollingAnimation) and must forward them to the page control just like this:

func scrollViewDidScroll(_ scrollView: UIScrollView) {
  pageControl.scrollViewDidScroll(scrollView)
}

func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
  pageControl.scrollViewDidEndDecelerating(scrollView)
}

func scrollViewDidEndScrollingAnimation(_ scrollView: UIScrollView) {
  pageControl.scrollViewDidEndScrollingAnimation(scrollView)
}

If you want to have the page control default tap gesture behaviour you should implement it like this:

pageControl.addTarget(self, action: #selector(didChangePage(sender:)), for: .valueChanged)

@objc func didChangePage(sender: MaterialPageControl) {
    var offset = collectionView.contentOffset
    offset.x = CGFloat(sender.currentPage) * scrollView.bounds.size.width
    scrollView.setContentOffset(offset, animated: true)
}

Author

Alonso Alvarez, [email protected]

License

MaterialPageControl is available under the MIT license. See the LICENSE file for more info.