UICollectionView 水平分页 space 页面之间

Question

我正在寻找用 UICollectionView.

替换本机 UIPageViewController 水平分页的方法

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

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

这很好用，我得到了水平分页效果。

现在我想在页面之间添加水平 space（就像你在 UIPageViewController 上使用 UIPageViewControllerOptionInterPageSpacingKey 一样）

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

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}
设置一个等于 minimumLineSpacing 的 contentInset 以使第一个和最后一个项目正确显示。

Answer 2

默认情况下，UICollectionViewFlowLayout 的 minimumLineSpacing 为 10.0，当 collectionView 的 item 水平填充（itemSize.width = collectionView.bounds.width）且 collectionView 启用分页时，大于零 'minimumLineSpacing' 将导致意外性能：从第二页开始，每页有一个间隙，按页码累加。
看来我们可以将collectionView的宽度扩大'minimumLineSpacing'来解决这个问题。但是实践否定了这个解决方案：当有两个或更多页面时，collectionView不会给最后一个'lineSpacing'，所以'contentSize'不足以完全显示这个页面的内容，这意味着如果'minimumLineSpacing' 为 10.0，最后一页的末尾将超过 collectionView 的 contentSize 10.0。
最后，我使用以下简单的解决方案在每个项目之间插入边距（如 UIScrollView 的性能）：将每个 collectionViewItem 的宽度扩展一个固定值 'pageSpacing'（例如 10.0），并扩展 collectionView 的宽度同样的价值。并且不要忘记，在布局collevtionViewCell的子视图时，有一个额外的间距，不是为了显示真正的内容。

这里是Swift3.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 水平分页 space 页面之间

UICollectionView horizontal paging with space between pages

ios

uicollectionview

uikit

uipageviewcontroller

uicollectionviewlayout