UIScrollView 中图像之间的边距

Margin between images in UIScrollView

我想要的效果:图像之间的间距仅在滚动时可见(如照片应用)。

许多旧的 obj-c 答案建议将滚动视图的边界扩展到屏幕外以使其页面更远,并使屏幕外 space 成为图像之间的间隙。

pagingEnabled 的文档指出:

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

因此,在尝试更改倍数值时,我扩展了 scrollView 的宽度,并启用了分页功能。然而,我没有通过差距实现页面的答案 - 他们总是把它留在视野中:

所以如果滚动宽度更长,为什么分页距离不合适?

    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)

如文档所述,一个 "page" 宽度是滚动视图的边界宽度。

假设图像宽度为 100 点。假设图像之间的 space 为 10 点。那么:

  • 滚动视图的宽度必须为 110 点。

  • space必须在每张图片的每边分布5个点,像这样(假设我们有3张图片):

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

这将导致每个页面包含一个 100pt 图像,每边有 5 pts space,总共 110 pts,滚动视图的宽度:

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

原来我设置了等宽约束,但我忘记了。这意味着滚动视图分页的倍数固定在超级视图的宽度上。