Question

Am currently developing an iPad app which uses a UIScrollView. The UIScrollView is populated with UIImage(s) and all the images are larger than the iPads width, twice the width, 1536px. What I would like it to do is when swiped/flicked it will scroll to the second image, i.e. 1536 and the third image to 3072 and so on. Its just to see a quick image when sliding across. I’ve had a look at scrollViewDidEndDragging but it gets really nasty and jumpy at times.

Is there a way of setting the animation to scroll by 1536 each time apart from the last UIImage in the UIScrollView? I know you can use setContentOffset but if I use this in the above method it doesn’t work as its using the current transition still and therefore making it very jumpy.

Edit

for (i = 1; i <= kNumImages; i++) 
{
    NSString *imageName = [NSString stringWithFormat:@"cocktail_%d.png", i];
    UIImage *image = [UIImage imageNamed:imageName];
    UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
    CGRect rect = imageView.frame;
    rect.size.width = kMainImageWidth;
    rect.size.height = kMainImageHeight;
    rect.origin = CGPointMake(xpos, 0);
    imageView.frame = rect;

    [mainImgScrollView addSubview:imageView];
    [imageView release];
    xpos += kMainImageWidth;
 }

Edit

All I needed to do was make the UIScrollView 1536px wide and it worked. The app will have 6 images to start with and more in the future. Hopefully there won’t be a memory issue to start with?

Thank you for your help.

Answer 1

The page size is the UIScrollView size. It is perfectly acceptable to make the UIScrollView itself larger than the width of the iPad screen. If you make the UIScrollView 1536px wide, then each page will be 1536px wide.

To allow the user to scroll around and see each picture, what you want is a scrollview containing a row of scrollviews. The outer scrollview is the one in the window, it is 1536px wide, and it is just for paging. The inner scrollviews are the width of the screen and they have their contentSize set to the image size so that the user can scroll around in each one and see the image.

(However, you’re going to want to rethink your architecture, since an app into which you have predrawn multiple images 1536px wide will not run (because it will exceed the available memory for the device). The WWDC2010 videos include an excellent talk on this very topic, i.e. how to design a paging scroll view that lets you page from image to image.)