Horizontal paged UIScrollView with a gap between each view -- views aren't centered

Question

Apple's WWDC 2010 Tutorial Video "Designing Apps with Scroll Views" works well with iOS 4, but with iOS 5 the pages are not centered:

enter image description here

It seems that

pagingScrollViewFrame.origin.x -= PADDING;

doesn't work in iOS 5.

My code is the following:

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

#define PADDING  10

- (void)loadView 
{    

    // Step 1: make the outer paging scroll view
    CGRect pagingScrollViewFrame = [[UIScreen mainScreen] bounds];
    pagingScrollViewFrame.origin.x -= PADDING;
    pagingScrollViewFrame.size.width += (2 * PADDING);

    pagingScrollView = [[UIScrollView alloc] initWithFrame:pagingScrollViewFrame];
    pagingScrollView.pagingEnabled = YES;
    pagingScrollView.backgroundColor = [UIColor whiteColor];
    pagingScrollView.showsVerticalScrollIndicator = NO;
    pagingScrollView.showsHorizontalScrollIndicator = NO;
    pagingScrollView.contentSize = CGSizeMake(pagingScrollView.bounds.size.width * 6, pagingScrollView.bounds.size.height);
    pagingScrollView.delegate = self;
    self.view = pagingScrollView;

    for(int i = 0; i < 6; i++)
    {
        UIView *view = [[UIView alloc] init];
        view.backgroundColor = [UIColor blueColor];

        CGRect bounds = pagingScrollView.bounds;
        CGRect pageFrame = bounds;
        pageFrame.size.width -= (2 * PADDING);
        pageFrame.origin.x = (bounds.size.width * i) + PADDING;
        view.frame = pageFrame;
        [pagingScrollView addSubview:view];
    }
}

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    [[UIApplication sharedApplication] setStatusBarHidden:YES   
                                    withAnimation:UIStatusBarAnimationSlide];
}

- (void)viewDidUnload
{
    [super viewDidUnload];
    // Release any retained subviews of the main view.
}

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    return (interfaceOrientation != UIInterfaceOrientationPortraitUpsideDown);
}

@end

What can I do?

score 1 · Answer 1 · answered Jun 01 '12 at 08:29

1

pageFrame.origin.x = (bounds.size.width * i) + PADDING;

change this part to

pageFrame.origin.x = (bounds.size.width + PADDING) * i;

answered Jun 01 '12 at 08:29

Umgre

667
1
6
15

Thanks for your answer! Unfortunately, this works only for the first of six views. Basically, I only need to know how to set a negative origin point (lets say x = -10, y = 0) using the iOS 5 SDK to archive my goal. Does anyone know how to do that? – noXare Jun 01 '12 at 12:45
because you made scrollview of 6 page width (pagingScrollView.bounds.size.width * 6) – Umgre Jun 01 '12 at 13:33
I don't understand. The content size of the scrollview must be as long as the total size of all pages inside. The content size defines the scroll range. so what's wrong with that? – noXare Jun 01 '12 at 14:47
1

When I use a UIScrollView with six views and without the gap between each view, it works fine. But I want to have these gap between the views. Basically I want the same as the iPhone photos app in fullscreen mode. The gap between the images occurs only while scrolling/switch from one image to the next. Unfortunately, I don't know how to archive that. – noXare Jun 01 '12 at 14:55
Used successfully [this](http://stackoverflow.com/questions/849383/photos-app-like-gap-between-pages-in-uiscrollview-with-pagingenabled) approach. – Nuthinking Apr 09 '13 at 17:38

Horizontal paged UIScrollView with a gap between each view -- views aren't centered

1 Answers1