UIViews with UIPageControl

Question

I'm a beginner when it comes to page control, and that's why I'm not sure 100% if my title agrees with what I want. I want to make a UIPageControl that when the user swipes on the screen, the view would switch over to another view and the UIPageController at the bottom of the screen would update itself. Also, to make my request even more confusing, I want a tab bar at the bottom of the screen that would stay put as the views change.

A great example of this is The Iconfactory's Ramp Champ: http://img.slidetoplay.com/screenshots/ramp-champ_5.jpg

The bar at the bottom stays put while the rest of the items on the screen moves. What would be the easiest way to do this?

EDIT: I know I have to use a UISrollView, I just don't know how to go about implementing it...

Matt Wilding · Accepted Answer · 2013-08-11T19:46:34.417

I believe what you're looking for is actually a UIScrollView with pagingEnabled set to YES. You can leave the scrollview as a view above a regular UITabBar. You'll use a UIPageControl to get the little dots. You can update it programmatically when the UIScrollView scrolls to a page by implementing an appropriate delegate method of the scroll view, maybe -scrollViewDidScroll:.

Assume you have two ivars: scrollView and pageControl. When you know how many pages your scroll view will have, you can set the contentSize of scrollView. It should be a multiple of the scrollView's bounds. For example, if the number of pages is static you can hardcode it in your -viewDidLoad...

- (void)viewDidLoad {
    // Any other code.

    scrollView.pagingEnabled = YES;
    scrollView.contentSize = CGSizeMake(scrollView.bounds.size.width * 3, scrollView.bounds.size.height); // 3 pages wide.
    scrollView.delegate = self;
}

Then, to update your little dots...

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {

    CGFloat pageWidth = scrollView.bounds.size.width;
    NSInteger pageNumber = floor((scrollView.contentOffset.x - pageWidth / 2) / pageWidth) + 1;
    pageControl.currentPage = pageNumber;
}

Thanks, do you have any sort of source code on how to do this? (I can't find any) — Andy B, Jan 21 '11 at 21:16
@Andy B, maybe you should post some code with your current attempt... What exactly do you mean by "not working"? — Matt Wilding, Jan 21 '11 at 22:55
Never mind, I found this tutorial that might help me out: http://ykyuen.wordpress.com/2010/05/22/iphone-uiscrollview-with-paging-example/ — Andy B, Jan 22 '11 at 01:10
Your page number code didn't work for me — might I suggest `int pageNumber = round(scrollView.contentOffset.x/scrollView.frame.size.width);` — Albert Renshaw, Jan 08 '23 at 04:52

score 2 · Answer 2 · answered Jan 21 '11 at 21:28

You need to use a UIScrollView

Assuming you have a named ivar called scrollView

    int amountOfFrames = 10;
    scrollView.pagingEnabled = TRUE;
scrollView.contentSize = CGSizeMake(scrollView.frame.size.width * amountOfFrames, scrollView.frame.size.height);
     scrollView.delegate = self;

You will then need to implement the required delegate methods, so that you can update your page control

- (void)scrollViewDidScroll:(UIScrollView *)sender 
{
    // Switch the indicator when more than 50% of the previous/next page is visible
    CGFloat pageWidth = scrollView.frame.size.width;
    int page = floor((scrollView.contentOffset.x - pageWidth / 2) / pageWidth) + 1;
    pageControl.currentPage = page; 
}

You need to place whatever content you want to be scrollable inside these scrollview, ideally lazyload into it, if the content you will displaying will require a lot of heap memory, use the scrollviewDidScroll to remove and add content at the required positions

Thanks for the help, but that didn't mean much to me. I've been developing for only about seven months now. Do you have any source code? — Andy B, Jan 21 '11 at 21:37

UIViews with UIPageControl

2 Answers2