问题 UICollectionView水平分页,页面之间有空格


我正在寻找一种替代原生的方法 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:单元格应填充整个屏幕宽度,单元格之间的空间应仅在切换页面时可见。


11355
2018-02-27 13:26


起源



答案:


解决方案一:

  1. collectionView.isPagingEnabled = false
  2. 添加一个 minimumLineSpacing 对于页面之间的距离
  3. 实行 targetContentOffsetForProposedContentOffset:withScrollingVelocity: 将contentOffset移动到最近的页面。您可以根据您的简单数学计算页面 itemSize 和 minimumLineSpacing,但要做到正确可能需要一些工作。

解决方案二:

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

12
2018-02-27 14:04



但是很难复制所有的分页行为 - Eyal
你是对的,我添加了一个更简单的解决方案 - Jon Rose
好主意谢谢 - Eyal
感谢您的提示,设法通过匹配你说的插图来做到这一点 minimumLineSpacing = 20 和 sectionInset = UIEdgeInsets(top: 0, left: 10, bottom: 0, right: 10) 在CollectionViewLayout中 - raulriera


答案:


解决方案一:

  1. collectionView.isPagingEnabled = false
  2. 添加一个 minimumLineSpacing 对于页面之间的距离
  3. 实行 targetContentOffsetForProposedContentOffset:withScrollingVelocity: 将contentOffset移动到最近的页面。您可以根据您的简单数学计算页面 itemSize 和 minimumLineSpacing,但要做到正确可能需要一些工作。

解决方案二:

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

12
2018-02-27 14:04



但是很难复制所有的分页行为 - Eyal
你是对的,我添加了一个更简单的解决方案 - Jon Rose
好主意谢谢 - Eyal
感谢您的提示,设法通过匹配你说的插图来做到这一点 minimumLineSpacing = 20 和 sectionInset = UIEdgeInsets(top: 0, left: 10, bottom: 0, right: 10) 在CollectionViewLayout中 - raulriera


  • 默认情况下,UICollectionViewFlowLayout的minimumLineSpacing为10.0,当collectionView的项目水平填充(itemSize.width = collectionView.bounds.width)且collectionView启用分页时,大于零'minimumLineSpacing'将导致意外的性能:从第二页开始,每页有一个差距将由页码累计。
  • 似乎我们可以通过'minimumLineSpacing'扩展collectionView的宽度来解决这个问题。但是pratice否定了这个解决方案:当有多个页面或者更多页面时,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)
    }
}

希望能帮到你。


0
2017-07-17 01:58