4

The effect I'm after: Having spacing between images that is only visible while scrolling (like the photos app).

A lot of old obj-c answers suggest extending the scroll view's bounds offscreen to make it page farther, and making this offscreen space the gap between images.

The documentation for pagingEnabled states:

If the value of this property is YES, the scroll view stops on multiples of the scroll view’s bounds when the user scrolls.

So in trying to change the multiples value, I extended the scrollView's width, and left paging enabled. Yet no answers I implement page past the gap - they always leave it in view:

enter image description here

So if the scroll width is longer, why isn't it paging the proper distance? 

    let gapMargin = CGFloat(20)
    scrollView.frame = CGRect(x: 0, y: 0, width: view.frame.width + gapMargin, height: view.frame.height)
    let exdScrollWidth = scrollView.frame.width

    //1
    let imageView1 = UIImageView()
    imageView1.backgroundColor = UIColor.green
    imageView1.frame = CGRect(x: 0, y: 0, width: exdScrollWidth - gapMargin, height: scrollView.bounds.size.height)

    //2
    let imageView2 = UIImageView()
    imageView2.backgroundColor = UIColor.yellow
    imageView2.frame = CGRect(x: exdScrollWidth, y: 0, width: exdScrollWidth - gapMargin, height: scrollView.bounds.size.height)

    //3
    let imageView3 = UIImageView()
    imageView3.backgroundColor = UIColor.red
    imageView3.frame = CGRect(x: exdScrollWidth * 2, y: 0, width: exdScrollWidth - gapMargin, height: scrollView.bounds.size.height)

    scrollView.contentSize.width = exdScrollWidth * 3

    scrollView.addSubview(imageView1)
    scrollView.addSubview(imageView2)
    scrollView.addSubview(imageView3)
Tim
  • 583
  • 1
  • 6
  • 18

2 Answers2

6

As the docs tell you, one "page" width is the bounds width of the scroll view.

So let's say the images are 100 points wide. And let's say the space between the images is to be 10 points. Then:

  • The scroll view's width must be 110 points.

  • The spaces must be distributed 5 points on each side of each image, like this (supposing we have 3 images):

    5pts - 100pts (im) - 10pts - 100pts (im) - 10pts - 100pts(im) - 5pts

This will cause each page to consist in a 100pt image with 5 pts of space on each side, a total of 110 pts, the width of the scroll view:

    5pts - 100pts (im) - 10pts - 100pts (im) - 10pts - 100pts(im) - 5pts
    |                      |                      |                    |

enter image description here

matt
  • 515,959
  • 87
  • 875
  • 1,141
  • Thanks for your reply. I have made every attempt to implement this - perhaps you could demonstrate how it's done. – Tim Mar 06 '17 at 06:03
  • Added a screencast, demonstrating. Each image view has a border so you can see there is indeed a gap between them. This was created _exactly_ as described in my answer. – matt Mar 06 '17 at 16:46
  • I see it is as you described, but please remember it is not as my question described. The code I included is my attempt, and it would be helpful if you referred to it. – Tim Mar 06 '17 at 22:27
  • On the contrary. My implementation _exactly_ solves the problem shown so neatly in your screen shots, and explains how the Photos app horizontal scrolling interface works. — If you find what I'm telling you just too too mysterious, why not use UIPageViewController instead? It takes care of the gap for you (UIPageViewControllerOptionInterPageSpacingKey) and is a much better choice if you have more than two or three image views to show in any case. – matt Mar 06 '17 at 22:33
0

It turns out I had an equal widths constraint set up that I'd forgotten about. This meant the multiple by which the scrollview paged was fixed at the width of the superview.

Tim
  • 583
  • 1
  • 6
  • 18