CODEWITHSUNDEEP
iphoneobjective-ciosuiviewuipagecontrol
Andy B
Andy B

Reputation: 515

UIViews with UIPageControl

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...

Upvotes: 6

Views: 11665

Answers (2)

Matt Wilding
Matt Wilding

Reputation: 20163

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;
}

Upvotes: 21

kgutteridge
kgutteridge

Reputation: 8991

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

Upvotes: 2

Related Questions