June 03, 2014

Infinite Page Control

I just love UIPageControl, don’t you? It’s simple and intuitive, it does not get any more "native" than this since apple used it in SpringBoard for ages. UIPageControl is the perfect choice when you have a fullscreen UIScrollView (UICollectionView) with pagingEnabled and you want to encourage your users to “swipe to see more”.

DAPageControlView gives your users the exact same experience they get from UIPageControl and something more. While UIPageControl is a winner for static data, DAPageControlView might be a better choice for the case when you fetch your data from a server in chunks and/or do not know the total number of items.

Check out this video with a UICollectionView of PictureViews: at first it displays just 5 of them and as soon as the user reaches the 4th one, it requests the next chunk of pictures and displays them shortly after that.

Note, that after fetching the second "portion" of pictures, if we used UIPageControl, the dots would not fit the screen width, but DAPageControlView is scrollable and applies "perspective" effect to dots on the right and/or on the left if neccessary. If all dots can fit the screen DAPageControlView behaves exactly like UIPageControl.
Also there is an option to make the rightmost dot "blink" to let the user know that more items are loading.

If this might be useful for you, here is how it's done:
DAPageControlView is just a UICollectionView that depending on the contentOffset of a UIScrollView it is binded with, automatically updates its currentPage and, if neccessary, resizes its rightmost or leftmost page indicator views (dots) if there are more pages to the right or to the left accordingly.

So here is a quick tutorial:
First you create your DAPageControlView just like you would create a UIPageView

self.pageControlView = [[DAPageControlView alloc] initWithFrame:CGRectMake(0., 0., 320., 15.)];
self.pageControlView.numberOfPages = self.pagesCount;
self.pageControlView.currentPage = 0;
[self.view addSubview self.pageControlView];

And of course you need a UIScrollView to bind it with. I have a UICollectionView as I want to reuse its subviews:

self.collectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:layout];
self.collectionView.showsHorizontalScrollIndicator = NO;
self.collectionView.pagingEnabled = YES;
self.collectionView.dataSource = self;

Now we need to let our pageControlView know about the contentOffset of the collectionView. The easiest way is to do this in scrollViewDidScroll: (UIScrollViewDelegate method)

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    [self.pageControlView updateForScrollViewContentOffset:self.collectionView.contentOffset.x];
}

And that's pretty much it. There is a DAPageControlViewDelegate if you want to be notified when a currentPageproperty is changed (page indicator views can be selectable). Also there is a numberOfPagesAllowingPerspective to configure precisely that.

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

pod "DAPageControlView"

We would love to hear back from you if you find this useful or have any suggestions or even complaints.

We would love to hear from you.

This form sends a email right into our inbox. One of us will get back to you as soon as possible.

Thanks for contacting us!

We will respond as soon as possible - normally, within a day.

Want to get in touch even faster? Then, please, try:

Calling us at +1-424-777-2422.

Skyping factorial.complexity.

Something went wrong :(

We are very sorry. Here are some alternative ways to contact us:

Want to get in touch even faster? Then, please, try:

Phone +1-424-777-2422

Skype factorial.complexity

Email info@f17y.com