Home > Development > UIScrollView – A really simple tutorial

UIScrollView – A really simple tutorial

It’s very common to have a large amount of data that we want to display on the iPhone/iPod, but there’s no way that we can fit all at the same time on the screen (even on the iPad), that’s one of the functionalities of the UIScrollView.

The UIScrollView it’s a very versatile class, you can handle zooming, panning, scrolling, etc, and I have no intention of explaining all the properties and delegates (well, if you want to know something about the UIScrollView, fell free to request it in the comments, just let me know =D ), the documentation itself is pretty good, so you should give it a look.

In this post I’ll create a very simple project with three scrollable UIViews just to get familiar with the UIScrollView, and in the next post I intend to do some simple zooming example. So, the next  post will be about the UIScrollView as well.

The basics:

IMO, there’s 2 very important properties in UIScrollView, the contentSize and the contentOffset.

The contentsize is the width and height of your content, it’s a CGSize and a property of UIScrollView, let’s say that you have an image that’s 500×500, it would not fit on the iPhone screen, right? So, set your contentsize to 500,500. If you want to add more scrollable space at the bottom or at the top, you can use the property contentInset.top and contentInset.bottom, so you can add some extra space without changing the contentsize. And why would you need these insets? Well, if you have a UINavigationBar or a UIToolBar, like the photos app, you will use this.

Every UIScrollView has a scroll indicator (it’s visible by default, but if you want, you can hide it with showsHorizontalScrollIndicator and showsVerticalScrollIndicator), to give an indication of how far in the content you are, and you can change where the indicator starts using the scrollIndicatorInsets.top just like the contentInsets.

The contentOffset is the point that is currently visible, this point represents the top left of your screen. The contentOffset discards the contentInsets, so it can happen that the contentInset is negative, that’s not a problem.

The only thing that you need to have a functional UIScrollView is the UIView that you want to display and the contentSize of this UIView, so let’s start coding…

Create a View-based Application and name it SimpleScroll. Again, I always use the Window-based Application for my projects, but let’s pick the View-based just to speed things up.

Go to your SimpleScrollViewController class, in the loadView method and create your UIScrollView, we will create it with the same width and heigh as the view from SimpleScrollViewController

UIScrollView *scroll = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
Enable the pagination
scroll.pagingEnabled = YES;

If the value of this property is YES, the scroll view stops on multiples of the view bounds when the user scrolls. The default value is NO.

Create all three UIViews
NSInteger numberOfViews = 3;
for (int i = 0; i < numberOfViews; i++) {
CGFloat xOrigin = i * self.view.frame.size.width;
UIView *awesomeView = [[UIView alloc] initWithFrame:CGRectMake(xOrigin, 0, self.view.frame.size.width, self.view.frame.size.height)];
awesomeView.backgroundColor = [UIColor colorWithRed:0.5/i green:0.5 blue:0.5 alpha:1];
[scroll addSubview:awesomeView];
[awesomeView release];
}

The most important part in this for is to understand the xOrigin. This will place every UIView exactly where the previous UIView has stopped, in other words, each UIView will start at the end of the previous one.

Set the UIScrollView contentSize
scroll.contentSize = CGSizeMake(self.view.frame.size.width * numberOfViews, self.view.frame.size.height);

The contentSize is just the sum of the widths of the three UIViews, if the width of each UIView is 320, and we have three UIViews, your contentSize width will be 920.

Add the UIScrollView to the SimpleScrollViewController UIView
[self.view addSubview:scroll];
[scroll release];
And you’re done :)
At the end, you should have something like this :
- (void)loadView {
[super loadView];
self.view.backgroundColor = [UIColor redColor];
UIScrollView *scroll = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
scroll.pagingEnabled = YES;
NSInteger numberOfViews = 3;
for (int i = 0; i < numberOfViews; i++) {
CGFloat xOrigin = i * self.view.frame.size.width;
UIView *awesomeView = [[UIView alloc] initWithFrame:CGRectMake(xOrigin, 0, self.view.frame.size.width, self.view.frame.size.height)];
awesomeView.backgroundColor = [UIColor colorWithRed:0.5/i green:0.5 blue:0.5 alpha:1];
[scroll addSubview:awesomeView];
[awesomeView release];
}
scroll.contentSize = CGSizeMake(self.view.frame.size.width * numberOfViews, self.view.frame.size.height);
[self.view addSubview:scroll];
[scroll release];
}
As you can see, I changed the background color of the SimpleScrollViewController UIView to red, just to make sure that you can distinguish the content of the UIScrollView.
That is the tutorial, pretty simple, huh? Now you can show all the data that you want on this small screen ;) Next post I’ll write about how to enable zooming using a UIScrollView.
About these ads
  1. mike
    October 1, 2010 at 8:13 AM

    Great Blog. I learned a lot

  2. November 13, 2010 at 8:11 AM

    Since you’re using IB, the best solution is adding the UIScrollView directly in the xib file and declaring an outlet so you can use it later.

    • treviewz
      January 8, 2011 at 9:51 PM

      Great tutorial and it works! But, can you tell me how do you add multiple images in the UIView named awesome?

      For example, displaying an image on each page that is scrolled.

      Thanks!

      • January 8, 2011 at 10:05 PM

        You need to add the images in the UIScrollView in the correct position, like I did with the colors in this example, and then add the scrollview to the UIView.

  3. treviewz
    January 9, 2011 at 10:48 AM

    Alright! Thanks alot. This has helped me. Really appreciated! I have finally manage to understand about UIView and UIScrollView.

  4. Brettman
    March 20, 2011 at 6:47 PM

    Great tutorial. Just wanted to say thanks.

  5. March 23, 2011 at 11:01 PM

    Thank you, this was very easy to understand. It just took minutes for me to implement and customize this. Good lookin out!

  6. Joe
    March 30, 2011 at 4:05 PM

    Is it possible to tile UIViews built in IB instead of coding them?

  7. Joe
    March 30, 2011 at 8:51 PM

    Cool. Ok then, Can you add xib files to a UIScrollView?

    • March 30, 2011 at 8:59 PM

      Yes, you can create a xib file that it’s a UIView and do the exact same thing as I did in this example, but replace the UIView creation for the IBOutlet that it’s your UIView

  8. Joe
    March 30, 2011 at 9:51 PM

    Thanks for the responses. Going back a step. I’ve been able to implement numerous scrolling UIImageView examples (which tile images) but have not been able to find out how to scroll tiled UIViews instead (to allow custom built pages with buttons, positioned alerts ect…).

    My main problem is knowing where best to place my custom IUViews. I’m guessing they would be better off in the nib file that contains the UIScrollView. If so, should they be nested inside the UIScrollView or does that not matter?

  9. Joe
    March 30, 2011 at 10:21 PM

    Yeyhey, Just got your scroll app to work. That is the shortest and neatest piece of code I’ve seen that implements scrolling! No to find the illusive bit of code to replace your for loop contents :D

  10. Joe
    March 31, 2011 at 1:00 AM

    Hi iDevZilla,

    I created 3 xib files and hooked up the viewcontrollers and can successfully insert a view by adding [awesomeView insertSubview:view1.view atIndex:0]; on the end of your for loop.

    I was expecting my view ‘view1′ to show up three times tiled. But it only appears on the last (3rd) page. Would you know why?

    Would be grateful for any help.

  11. Joe
    March 31, 2011 at 2:51 AM

    My last comment to you (“At bloody last” thinks iDevZilla). I was able adapt your script to load up all three UIViews. Below is the final code.

    - (void)loadView {
    [super loadView];
    self.view.backgroundColor = [UIColor redColor];
    UIScrollView *scroll = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
    scroll.pagingEnabled = YES;
    NSInteger numberOfViews = 3;

    view1.view.frame = CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height);
    [scroll addSubview:view1.view];
    view2.view.frame = CGRectMake(self.view.frame.size.width, 0, self.view.frame.size.width, self.view.frame.size.height);
    [scroll addSubview:view2.view];
    view3.view.frame = CGRectMake(self.view.frame.size.width*2, 0, self.view.frame.size.width, self.view.frame.size.height);
    [scroll addSubview:view3.view];

    scroll.contentSize = CGSizeMake(self.view.frame.size.width * numberOfViews, self.view.frame.size.height);
    [self.view addSubview:scroll];
    [scroll release];
    }

    If it wasn’t for you iDevZilla, i wouldn’t have continued trying to get UIViews to work in a UIScrollView.

    Cheers

  12. vaijayanthi
    April 28, 2011 at 10:30 AM

    wow really good send ur next post url path.thanks for the wonderful tutorial.

  13. Qlimax
    September 21, 2011 at 2:20 AM

    Thank you, fantastic tutorial!

  14. meriam
    November 15, 2011 at 3:13 PM

    Thank you, you saved me today

  15. December 12, 2011 at 7:33 PM

    You should link to the next post ( http://idevzilla.com/2010/10/04/uiscrollview-and-zoom/ ) so people don’t have to manually find it :-)

  16. Tal
    January 30, 2012 at 4:32 AM

    Excellent tutorial!

    Thx!

  17. mark baer
    April 24, 2012 at 1:24 AM

    Good stuff, I was able to get your sample to work. I am still having difficulty getting my sample to work. I have a “form” with many fields, buttons, etc that fits perfectly in “Portrait” mode…When the user rotates to “Landscape” mode, the bottom of the form goes off of the ipad. That is when I would like the scroller to kick in. I’m having difficulties getting the scroller to work in that scenario. Do you have any recommendations? Do I have to change the content size of the scroller when the orientation changes? If so, how do I detect that?

    Any help would be great. This stupid little problem is killing me.

    thanks again…good stuff.

  18. bob mon'tall
    July 4, 2012 at 12:59 AM

    So, this is actually xOrigin, not yOrigin. Right?

    • July 4, 2012 at 1:16 AM

      You are correct, sir :)
      Thanks, already fixed the post.

  19. Ganesh
    August 2, 2012 at 6:11 PM

    Thank you, nice tutorial! simple code to understand

  20. Ans
    August 10, 2012 at 4:33 PM

    Nice one … saved my time;

  21. Greg The Good Guy
    October 25, 2012 at 2:21 AM

    Nice tutorial. It helped me a lot. But i have to say man, i don’t know if you already know but.. you are colorblind. That color is green and not red.

    • October 25, 2012 at 3:08 AM

      Thanks.
      Not sure if I understood your comment.
      There are 4 colors in this app, 3 in the UIScrollView (pink, grey and green) and red on self.view.

      I wrote
      “As you can see, I changed the background color of the SimpleScrollViewController UIView to red, just to make sure that you can distinguish the content of the UIScrollView.”

      The UIView is red, the screenshot is from a transition between view 2 and 3 :)

  22. December 3, 2012 at 10:48 PM

    Very nice tutorial this helped me finishing my application Thank you!!

  23. December 13, 2012 at 11:57 PM

    Hi iDevzilla:
    Thanks for your great tutorial on scroll view. I was trying to incorporate scrolling views into an existing app. The app has buttons that are out of sight beneath the existing image view (it doesn’t scroll). I created, what appears to be, custom buttons. It works. I was hoping to just replace the existing image view with a scrolling view. I want the user to be able to “tap through” whatever scrolling image happens to be in view at the time. Naturally, the buttons beneath the scrolling view are always in the same place. It doesn’t work. I can’t “tap through” the scrolling image to get at the buttons that are beneath it. Is there a way to do this?

    Incidentally, in reading your advice to developers on your website about reading the manual/documentation, I find it is very hard to understand Apple’s documentation. Maybe I have a mental block. I find that I can only understand what a “normal” person writes or says. No disrespect to Apple or other technical persons. I have always jokingly referred to non-techies as normal people – and after programming for several decades (mainframe), I have noticed a real difference between IT guys and “normal” people.(It’s a good thing – there’s room for both on this planet.)

  24. January 10, 2013 at 9:32 AM

    This is certainly the 3rd blog post, of urs I really went through.

    And yet I enjoy this particular 1, “UIScrollView – A really simple tutorial | iDevzilla”
    the most. Regards ,Marla

  25. sangram anand
    February 23, 2013 at 12:10 PM

    Thanks for the tutorial..:)

  26. Coy
    March 2, 2013 at 7:01 PM

    What precisely seriously motivated u to write “UIScrollView – A really simple tutorial |
    iDevzilla” midwestwg ? I actuallyhonestly adored the
    post! Thanks for your effort ,Freeman

  27. Mike Jensen
    March 24, 2013 at 5:26 AM

    I’ll add my two cents.. you’re awesome.

  28. Mike Jensen
    March 26, 2013 at 6:54 AM

    finally! the answer is here:

    http://stackoverflow.com/questions/1619990/delegating-uiscrollview-doesnt-work-help-needed

    I implemented the guys code that he said didn’t work, and it worked for me!

  29. Duraiamuthan
    May 7, 2013 at 12:27 AM

    Hi really simple to understand nicely put….

  30. May 28, 2013 at 12:54 PM

    Pretty! This was an extremely wonderful article.
    Many thanks for supplying these details.

  1. May 19, 2011 at 1:12 AM

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 151 other followers

%d bloggers like this: