UICollectionView 水平分页与页面之间的空间

Posted 2023-03-10

【中文标题】UICollectionView 水平分页与页面之间的空间

【英文标题】：UICollectionView horizontal paging with space between pages

【发布时间】：2017-02-27 13:26:18

【问题描述】：

我正在寻找一种方法来用 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

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

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

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

【参考方案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 以使第一项和最后一项正确显示。

【讨论】：

但是很难复制所有的分页行为

感谢您的提示，通过在 CollectionViewLayout 中匹配您所说的 minimumLineSpacing = 20 和 sectionInset = UIEdgeInsets(top: 0, left: 10, bottom: 0, right: 10) 的插图来设法做到这一点

这就是我想要做的：我有一个三页的 ASPagerNode。我试图在页面之间设置 10 或 20 的最小行距。然后每个页面都是一个具有 3 列的 ASCollectionNode 我试图在 3 列之间具有相等的间距。我设法正确地隔开 3 列，但页面稍微向右偏移，我正在努力解决这个问题。

【参考方案2】：

默认情况下，UICollectionViewFlowLayout 的 minimumLineSpacing 为 10.0，当 collectionView 的 item 水平填充 (itemSize.width = collectionView.bounds.width) 并且 collectionView 启用分页时，大于零 'minimumLineSpacing' 将导致意外性能：从第二页开始，每页都有一个空白，按页码累加。 看来我们可以通过'minimumLineSpacing'扩展collectionView的宽度来解决这个问题。但是实践否定了这个解决方案：当有两个或更多页面时，collectionView不会给最后一个'lineSpacing'，所以它的'contentSize'不足以完全显示这个页面的内容，这意味着如果'minimumLineSpacing'是10.0 ，最后一页的结尾会超过 collectionView 的 contentSize 10.0。 最后，我使用以下简单的解决方案在每个项目之间插入一个边距（如 UIScrollView 的性能）：将每个 collectionViewItem 的宽度扩大一个固定值'pageSpacing'（如 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)
    

希望对你有帮助。