David Janes' Code Weblog

September 26, 2009

UIPageControl + UIScrollView

code fragments,iphone,tips · David Janes · 7:58 am ·

This is an example of how to combine a UIPageControl and a UIScrollView together to create a “snap to page”-like effect that is seen on the iPhone’s home screen. This sample is partially based on Apple’s UIPageControl example.

XCode Sample Project

33 comments

  1. Thanks for your code. Have been thinking of this for a while.

  2. Alessign · 2009-10-24 07:11

    Thanks for the code – it helped me to solve my problem. Much easier than other samples. Anyway, I have a question about it. I added one “view” – menu (menuViewController) with button. The button is navigating to the “scrollingViewController” ….it works just fine, but I can not figure out how to navigate back to the “menuViewController” once the “scrollingViewController is in view. I added another custom button to the “scrollingViewController” in layer above the UIPageControl so it’s visible all the time when pages are swiping, but the action for it “[self dismissModalViewControllerAnimated:NO];” doesn’t seems to be working. It crashes…can somebody give me little clue where to start to solve this problem please?

    Thank you in advance

  3. David Janes · 2009-10-24 11:05

    I don’t think dismissModalViewControllerAnimated is what you’re looking for. Probably something like removeFromSuperview

  4. Alessign · 2009-10-27 05:24

    Thanks it works, but it has little issue. in AppDelegate I have this code:

    - (void)flipToMenu{

    viewController = [[MontgomeryPlaceViewController alloc] initWithNibName:nil bundle:nil];

    [cocktailView.view removeFromSuperview];
    [self.window addSubview:[viewController view]];
    [cocktailView release];
    cocktailView = nil;

    }

    ————and in pageControl using view this code———-

    - (IBAction)goBack:(id)sender {
    MontgomeryPlaceAppDelegate *mainDelegate = (MontgomeryPlaceAppDelegate *)[[UIApplication sharedApplication] delegate];
    [mainDelegate flipToMenu];

    }

    ———

    It works just fine but it leaves like 10px uncovered from previous view and you can still see half of UIPageControl unit. The white dots under current view. Any idea what that is?

    Thanks again

  5. Alessign · 2009-10-27 05:28

    have a look here what it does:

    http://olasz-ales.com/pic.html

  6. Alessign · 2009-10-28 05:37

    I figured it out:

    CGRect frame = window.frame;
    frame.origin = CGPointMake(0,20);
    window.frame = frame;

  7. Marko · 2009-11-14 15:28

    I looked at the code and I was wondering why you choosed to load ScrollingViewController.xib through the appDelegate. Is this because through the ScrollingViewController isn’t possible?

  8. David Janes · 2009-11-16 09:23

    I was just doing this as a proof of concept, so I probably just grabbed something I found and hacked it till I got a satisfactory result!

  9. Hi,

    Do you mind explaining whether all of these pages are loaded and kept in memory or created on the fly. Looking at the code it seems that it’s just making the pages once and showing them when needed. What happens if you try loading this with a hundred images?

    I’m pretty new to iPhone dev and memory management, I’m curious to know if there’s a way to dynamically create each page as it’s being called for. For example in the case of a photo gallery app.

    Cheers!

  10. David Janes · 2009-12-08 18:47

    You can easily create these on the fly – just make sure you always have the previous and the next one there so that scrolling is smooth. When you complete a scroll (detectable in delegate, probably) just relase the pages/images further than one away

  11. Thanks! This was exactly what I needed. You surely just saved me an hour at least of work.

  12. thanks! that’s exactly what i need!!

    however, could you somehow explain to me how you managed to get UIImage into the UIScrollView? I so need that method, i want to apply it to my own app, exactly the same thing you did here…

    thanks in advance!

  13. David Janes · 2010-02-19 14:11

    Use UIImageView to wrap the UIImage

  14. Victor Kovacs · 2010-03-05 21:44

    Thanks a Ton. Couldn’t Find this Anywhere. Life Saver.

  15. David · 2010-03-13 17:43

    Great Work! Is it possible to add a UIButton to each page? If so how would you do it?

  16. David Janes · 2010-03-14 08:27

    Umm, the usual way I’m sure? Instead of adding a UIImageView, add a UIView and add UIImageView and UIButton or whatever via addSubview:

  17. Matej Hrescak · 2010-03-27 17:33

    Hi,

    Very useful resource, thanks. Has a little bug though – when you scroll to a page and then use the UIPageControl, the pageControl is not updated. It’s because the scrollViewDidEndDecelerating is not fired when using the pageControl. Solution is in implementing this method too:

    - (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)_scrollView
    {
    pageControlIsChangingPage = NO;
    }

  18. David Janes · 2010-03-27 20:57

    Hi Matej, thank you! I had just reopened this code to reuse in a project…

  19. How many pages can I create? I want to create calendar app with different image on each day. Can I create 365 pages?

  20. Thank you very much I was in need of this because i had looked at several of my books and they all just had where you had to tap on the page control and it was very hard and annoying and when i tested my app my little brother said why isnt the page changing when i swipe and I knew that would also be a problem for the users so now thnx to your project it will be a nice clean and easy user interface…. THANK YOU XD

  21. shrey · 2010-11-23 05:59

    How do we implement it in the Landscape Mode?

  22. Hi David, thanks, best laid out UIPageControl and UIScrollView I have found.
    Can you point me in the right direction if I wanted to have text on each of the 5 pages instead of the 5 images.
    THANKS!!!

  23. admin · 2011-03-21 17:09

    When I’m doing text, I general use the UIWebView control – I’ve actually done this with this code, and I’m pretty sure it’s just a straight substitution.

  24. Alberto · 2011-03-27 09:53

    Hi! Many many thanks for this sample project, you really saved me :)
    But i have a little question….
    I’m using your code to create a tutorial, but there are 14 pages of images, and if i translate them all i must add too many images.. 14 for each language :\
    So here comes my question: i decided to create only 14 images and to add labels with text (easily localizable).
    But when i add a label as a subview on the scroll with:

    if ( pageControl.currentPage == 3) {
    [scrollView addSubview:mySubView];
    }
    and so on for others page.. But it “sticks” the subview only on the first page… How can I make it load on the page number 3 only? Thanks in advance :)

  25. Hi there,
    I must say this is the best bit of code for a UIScrollview I have seen :) Than\k You.
    Im just wondering is there away to make each image clickable and go to another nib for example?
    I am a newbie so please excuse me if Im asking a dumb question :)

  26. admin · 2011-09-06 03:45

    Try replacing the UIImageView with something like:

    UIButton* button = [UIButton buttonWithType:UIButtonTypeCustom];
    [button setBackgroundImage:image forState:UIControlStateNormal];
    button.contentMode = UIViewContentModeScaleAspectFill;
    [button addTarget:self action:@selector(onClick:) forControlEvents:UIControlEventTouchUpInside];

  27. Hi ..David,

    Thanks for such an Excellent & easy tutorial then any others !!! Superlike

    Now the thing I am looking to implement in my application following your example is : (CustomContoller )

    - (void)setupPage;

    I want to have several small views just like cubes/ Sudoko … in each View of Scrollview rather than ImageView & giving event to each small view.I view will have around 20views in each Page of ScrollView.How can I implement this things by creating my own Protocols, defining datasource & delegate methods.

    Structrure would be like this:

    –>UISrollView
    –>View1
    –>around 20 smallViews with each having events so that user can move to next view to show detail explanation.
    –>View1
    –>around 20 smallViews with each having events so that user can move to next view to show detail explanation.

    –>View1
    –>around 20 smallViews with each having events so that user can move to next view to show detail explanation.

    …n number of Views.

    Although I am sure to do this thing in my own way, but that is like scratch method, & called very poor programming.But I want to do this in smarter way,so that I can use the same thing in other classes to , that would reduce my coding & making good impression to my Client ;)

    Additionally, I know there I would have to take care of memory management!!!

    Please provide me some guide or code to perform this.

    Thanks,

  28. Richard · 2011-09-09 02:33

    Thanks a lot David. This is an awesome tutorial. I’ve been looking everywhere for a good example of page control and yours is the best!
    I have a question though. Is it possible to add some code so that when the orientation changes from vertical to horizontal, the images with the view rotate and the scroll view resizes so that the scrolling action is horizontal? It would be very much appreciated if you can help me out with this.

    Thanks a lot!

  29. admin · 2011-09-18 04:58

    On the iPad we handle rotation using

    - (void) willAnimateRotationToInterfaceOrientation:(UIInterfaceOrientation)_toInterfaceOrientation
                                             duration:(NSTimeInterval)_duration
    
    

    It’s probably the same on the iPhone.

  30. Brian · 2011-11-06 10:44

    Hi David…
    I’ve been trying to implement your solution to to make each image clickable, using UIButton instead of UIImageView, but have hit a wall. I can’t seem to get each image to click through to a new viewcontroller. Any hints on how you would do this? would be much appreciated!

    Thanks,

  31. admin · 2011-11-10 12:20

    Make sure you use addTarget for touchUpInside to the button.

  32. How do I make the images bigger

  33. [...] http://code.davidjanes.com/blog/2009/09/26/uipagecontrol-uiscrollview/ [...]

RSS feed for comments on this post.

Sorry, the comment form is closed at this time.

Powered by WordPress

Switch to our mobile site