1

On my Auto Layout learning process, I'm currently trying to replicate the Photos.app on iPhone.

Everything's working great, except for one little detail: I can't seem to replicate the "gutter" (spacing/padding) present on the official app.

Whenever I scroll to the next (or previous) picture, I'd like to see that blank space between images.

This is easily done without Auto Layout just by increasing the scroll view width and its contentSize:

CGRect sFrame = self.view.frame;
sFrame.size.width += 20; //gutter width

UIScrollView *photoScroller = [[UIScrollView alloc] initWithFrame:sFrame];
photoScroller.contentSize = CGSizeMake(sFrame.size.width * 3, sFrame.size.height);
photoScroller.pagingEnabled = YES;

But I just can't seem to replicate this behavior using Auto Layout. This is how I'm currently setting the scroll view (simplified):

UIScrollView *photoScroller = [[UIScrollView alloc] init];
photoScroller.pagingEnabled = YES;
photoScroller.translatesAutoresizingMaskIntoConstraints = NO;

[photoScroller addSubview:image_One];
[photoScroller addSubview:image_Two];
[photoScroller addSubview:image_Three];
[photoScroller addSubview:gutter_One];
[photoScroller addSubview:gutter_One_Two];
[photoScroller addSubview:gutter_Two_Three];
[photoScroller addSubview:gutter_Three];

[photoScroller addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[gutter_One(==20)][image_One][gutter_One_Two(==20)][image_two][gutter_Two_Three(==20)][image_Three][gutter_Three(==20)]|" options:0 metrics:0 views:dict]];

Is something like this achievable? Are there any possible constraints I can set to hint the system at this behavior?

Ps.: this is all done in code. Interface Builder is not used for this view.

Aloha Silver
  • 1,394
  • 17
  • 35
  • Why don't you increase the Scroll and content size in IB? – CaptJak Aug 20 '13 at 03:10
  • I'm using only code for this. There's no IB involved. Sorry I didn't make it clear. Edited the post. Anyway, since I'm using Auto Layout, I don't think it is possible to explicitly set the contentSize property. – Aloha Silver Aug 20 '13 at 03:14
  • You should be able to do it in code regardless of Auto Layout. Check if this works: http://stackoverflow.com/questions/12361519/how-to-create-a-paging-scrollview-with-space-between-views. – CaptJak Aug 20 '13 at 03:17
  • It doesn't, unfortunately. That's the same strategy I used previously, but it relies on setting the frames explicitly, thus having no effect when using Auto Layout (otherwise its purpose would be defeated). – Aloha Silver Aug 20 '13 at 03:24

0 Answers0