Question

I am trying to create an app with horizontal scrolling, so that one would be able to scroll horizontally through a series of images. I watched the WWDC Session 104 video on this, and while they made an interesting app, they flew through the basics of it very quickly.

I understand using the UIScrollView, and that I have to enable paging. After that they say that I should add more views as subviews of the scrollview, but I am not clear on how to do that. I am also not clear on how I add my images to those views.

As you can probably tell I am pretty new at this so any help would be appreciated.

Answer 1

You want to look into UIImageView. It’s a view specifically for holding images.

When you add your images, you want to set their rects (probably using initWithFrame: for each UIImageView) so that:

• the first image is at 0,0
• the second image is at 320,0
• third is at 640,0 (etc)

I.e. each image is 320 pixels right of the previous.

The final step is to set the contentSize for your UIScrollView — this is a CGSize which describes the total size of the scroll view.

If you have 3 images, you would then set it to (320*3) * 480 using e.g.

myScrollView.contentSize = CGSizeMake(320*3, 480);

A lot of people, when they initialize the scroll view, have a for loop or similar which steps through the images they want to display. These for loops tend to look something like this:

CGFloat scrollWidth = 0.f;
for (UIImage *someImage in someNSArrayWithImages) {
    UIImageView *theView = [[UIImageView alloc] initWithFrame:
        CGRectMake(scrollWidth, 0, 320.f, 480.f)];
    theView.image = someImage;
    [myScrollView addSubview:theView];
    [theView release];
    scrollWidth += 320.f;
}
myScrollView.contentSize = CGSizeMake(scrollWidth, 480.f);

This way you’ll get things lined up and you’ll get the content size for you at the same time.

If you want to make it so that the scroll view “intelligently” scrolls to each image and stops when people slide left/right, you can do myScrollView.pagingEnabled = YES.

Hope that helps get you going.