Question

我正在寻找一种用UIPageViewController替换原生UICollectionView水平分页的方法。

到目前为止，我做了以下事情：

let layout = UICollectionViewFlowLayout()
layout.scrollDirection = .horizontal
layout.itemSize = collectionView.frame.size
layout.minimumLineSpacing = 0
layout.minimumInteritemSpacing = 10

collectionView.setCollectionViewLayout(layout, animated: false)
collectionView.isPagingEnabled = true
collectionView.alwaysBounceVertical = false

这很好用，我得到一个水平的分页效果。

现在我想在页面之间添加水平空格（就像你将UIPageViewControllerOptionInterPageSpacingKey上的UIPageViewController一样）

到目前为止，我无法在不损坏分页效果的情况下添加空格。我正在寻找与UIPageViewController相同的行为：单元格应该填满整个屏幕宽度，单元格之间的空间应该只在切换页面时可见。

Answer 1

解决方案一：

collectionView.isPagingEnabled = false
为页面之间的距离添加minimumLineSpacing
实现targetContentOffsetForProposedContentOffset:withScrollingVelocity:将contentOffset移动到最近的页面。您可以根据itemSize和minimumLineSpacing计算简单数学页面，但要做到这一点可能需要做一些工作。

解决方案二：

collectionView.isPagingEnabled = true
为页面之间的距离添加minimumLineSpacing
分页大小基于collectionView的边界。所以将collectionView放大，然后使用screenSize。例如，如果您的minimumLineSpacing为10，则将collectionView的框架设置为{0，-5，width + 10，height}
将contentInset设置为等于minimumLineSpacing，以使第一个和最后一个项目正确显示。

Answer 2

默认情况下，UICollectionViewFlowLayout的minimumLineSpacing为10.0，当collectionView的项目水平填充（itemSize.width = collectionView.bounds.width）并且collectionView启用分页时，大于零＆＃39; minimumLineSpacing＆＃39;会导致意想不到的表现：从第二页开始，每个页面都有一个差距，这个差距将按页码累计。
我们似乎可以通过“最小空间距离”来扩展collectionView的宽度＆＃39;解决这个问题。但是pratice否定了这个解决方案：当有两页或更多页时，collectionView不会给最后一页提供一个＆＃39; lineSpacing＆＃39;，所以它的内容大小＆＃39;不足以完全显示此页面的内容，这意味着如果最小的内容空间＆＃39;为10.0，最后一页的结尾将超过collectionView的contentSize 10.0。
最后，我使用以下简单的解决方案在每个项目之间插入一个边距（如UIScrollView＆＃39; s性能）：将每个collectionViewItem的宽度展开一个固定值＆page; PageSpacing＆＃39; （例如10.0），并将collectionView的宽度扩展为相同的值。并且不要忘记，在布局collevtionViewCell的子视图时，还有一个额外的间距，不能用于展示真实内容。

继续使用Swift 3.1编写的代码，我确信它很容易为您理解：

let pageSpacing: CGFloat = 10

class ViewController: UITableViewController {
     override func viewDidLoad() {
        super.viewDidLoad()

        let layout = UICollectionViewFlowLayout()
        layout.itemSize                = CGSize(width: view.frame.width + pageSpacing, height: view.frame.height)
        layout.scrollDirection         = .horizontal
        layout.minimumInteritemSpacing = 0
        layout.minimumLineSpacing      = 0

        let frame = CGRect(x: 0, y: 0, width: view.frame.width + pageSpacing, height: view.frame.height)
        let collectionView = UICollectionView(frame: frame, collectionViewLayout: layout)
        view.addSubview(collectionView)
    }
}

class MyCell: UICollectionViewCell {
    var fullScreenImageView = UIImageView()
    override func layoutSubviews() {
        super.layoutSubviews()
        fullScreenImageView.frame = CGRect(x: 0, y: 0, width: frame.width - pageSpacing, height: frame.height)
    }
}

希望能帮到你。

UICollectionView水平分页，页面之间有空格

2 个答案: