Question

I am attempting to create a “metro” styled UIScrollView. It is similar to how iTunes app handles panels in the new ios version which wont be named.

I can’t figure out how to have my views layout/scroll so that the next view in the sequence shows up. I’ve tried all sorts of things like keeping the contentSize the screen width but moving each view over -10ish so it will show up like above. I’ve tried making scrollView whose bounds were smaller than the screen so it would show the part of the next view. Nothing works.

Here is diagram of what I’m trying to do:

It seems extremely trivial on paper but I can’t seem to get it work.

Answer 1

I’m not sure if I’m misinterpreting your requirements – but this might be a starting point to see how you could set it up:

- (void)viewDidLoad
{
  [super viewDidLoad];

  CGRect viewBounds      = self.view.bounds;
  CGRect scrollViewFrame = CGRectMake(0, 0, floorf(CGRectGetWidth(viewBounds) / 2.2), CGRectGetHeight(viewBounds));
  UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:scrollViewFrame];

  scrollView.center        = self.view.center;
  scrollView.contentSize   = CGSizeMake(CGRectGetWidth(viewBounds) * 3, CGRectGetHeight(viewBounds) * 3);
  scrollView.pagingEnabled = YES;
  scrollView.clipsToBounds = NO;

  UIPanGestureRecognizer *gestureRecognizer = scrollView.panGestureRecognizer;
  [self.view addGestureRecognizer:gestureRecognizer];

  for (int i = 0; i < 3; i++) {
    CGRect frame = CGRectMake(10.f + (i * CGRectGetWidth(scrollView.bounds)), 10.f, CGRectGetWidth(scrollView.bounds) - 20.f, (CGRectGetHeight(scrollViewFrame) * 3) - 20.f);
    UIView *view = [[UIView alloc] initWithFrame:frame];
    view.backgroundColor = [UIColor redColor];
    [scrollView addSubview:view];
  }

  [self.view addSubview:scrollView];
}

Literally just put this in an empty viewController’s viewDidLoad:

The key things to note are

• contentSize needs to be wide enough for all the panels
• clipsToBounds should be NO so you can see the additional views
• The bounds of the scrollview is essentially the main view port
• pagingEnabled should be set
• I’ve grabbed the panGestureRecognizer from the scrollview and attached it to the containing view instead so that panning is detected in the bounds of the containing view (which is larger) otherwise you are restricted to only detecting scrolls within the scrollviews bounds