CODEWITHSUNDEEP
iosobjective-cuipagecontrol
RobertvdBerg
RobertvdBerg

Reputation: 187

Page control on subview

I am creating a view with a subview for a tutorial screen. Tutorial screen

I want the gray subview to be swipeable using the page control

I have implemented the example of http://www.appcoda.com/uipageviewcontroller-tutorial-intro/ but this works with whole ViewControllers and I want it to work with only the subview...

Does anyone have any idea how to implement the PageControl with the swipe gesture so that only the gray subview changes? Any good tutorial?

Upvotes: 1

Views: 2931

Answers (2)

Ty Lertwichaiworawit
Ty Lertwichaiworawit

Reputation: 2950

use UIView instead of ViewController

Here is a solution that works for me:

1) Create a scrollView and pageControl in your NIB or Storyboard

2) scrollView in ViewDidLoad

    self.scrollView.backgroundColor = [UIColor clearColor];
    self.scrollView.indicatorStyle = UIScrollViewIndicatorStyleBlack; //Scroll bar style
    self.scrollView.showsHorizontalScrollIndicator = NO;
    //dont forget to set delegate in .h file
    [self.scrollView setDelegate:self];

    self.scrollView.showsVerticalScrollIndicator = YES; //Close vertical scroll bar
    self.scrollView.bounces = YES; //Cancel rebound effect
    self.scrollView.pagingEnabled = YES; //Flat screen
    self.scrollView.contentSize = CGSizeMake(640, 30);

3) create your views you want in the scrollView and add them in an Array

//For instance, you want 3 views
    UIView *ViewOne = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.scrollView.frame.size.width, self.scrollView.frame.size.height)];
    [ViewOne setBackgroundColor:[UIColor redColor]];

    UIView *ViewTwo = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.scrollView.frame.size.width+1, self.scrollView.frame.size.height)];
    [ViewTwo setBackgroundColor:[UIColor greenColor]];

    UIView *ViewThree = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.scrollView.frame.size.width+2, self.scrollView.frame.size.height)];
    [ViewThree setBackgroundColor:[UIColor blueColor]];

    //add all views to array
    NSMutableArray *viewsArray = [[NSMutableArray alloc] initWithObjects:ViewOne, ViewTwo, ViewThree, nil];

4) pageControl in ViewDidLoad

    self.pageControl.numberOfPages = viewsArray.count;
    self.pageControl.currentPage = 0;
    self.pageControl.backgroundColor = [UIColor clearColor];
    [self.pageControl setTintColor:[UIColor whiteColor]];

5) Add it all up

    for(int i = 0; i < viewsArray.count; i++)
    {
        CGRect frame;
        frame.origin.x = (self.scrollView.frame.size.width *i) + 10;
        frame.origin.y = 0;
        frame.size = CGSizeMake(self.scrollView.frame.size.width - 20,     self.scrollView.frame.size.height);

        NSLog(@"array: %@", [viewsArray objectAtIndex:i]);

        UIView *view = [[UIView alloc] initWithFrame:frame];
        view = [viewsArray objectAtIndex:i];
        [self.scrollView addSubview:view];


    self.scrollView.contentSize = CGSizeMake(self.scrollView.frame.size.width*viewsArray.count, self.scrollView.frame.size.height);
}

6) Track the scrollView and update the pageControl (DONT FORGET THE SCROLLVIEW DELEGATE)

-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    CGFloat pageWidth = scrollView.frame.size.width;

    //int page = floor((scrollView.contentOffset.x - pageWidth*0.3) / pageWidth) + 1);

    self.pageControl.currentPage = (int)scrollView.contentOffset.x / (int)pageWidth;
    NSLog(@"CURRENT PAGE %d", self.pageControl.currentPage);
}

This should do the trick.

PS. Sorry for all the magic numbers.

Upvotes: 2

Jasarien
Jasarien

Reputation: 58448

The grey area must be a UIScrollView with a content view containing each page of the tutorial. Set pagingEnabled to YES on your scroll view so that it will snap to each page when you scroll.

Then you need to attach an action to the page control using addTarget:action:forControlEvents: and pass UIControlEventValueChanged as the event. Then the action must be a method that tells the scroll view to move forward or back a page depending on whether the value of the page control increased or decreased. You can do this by changing the scroll view's content offset, or by telling it to scroll so that a particular rect is visible.

Finally, implement the delegate of the UIScrollView, and use the methods that tell when the scroll view stopped scrolling (you'll need a combination of the did end decelerating, did end dragging and possibly did end scrolling animation), and update the page control's value when the scroll view changes pages.

And that's all there is to it. If you need more details, read the documentation for UIScrollView, UIScrollViewDelegate and UIPageControl.

Upvotes: 2

Related Questions