UICollectionView水平分页，页面之间有空格 [英] UICollectionView horizontal paging with space between pages

问题描述

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

I'm looking for a way to replace the native UIPageViewController horizontal paging with a UICollectionView.

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

so far i did the following:

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

这个工作正常，我得到一个水平的分页效果。

this works fine and i get an horizontal paging effect.

现在我想在页面之间添加水平空格（就像你会用<$ c一样） $ c> UIPageViewControllerOptionInterPageSpacingKey on UIPageViewController ）

Now i want to add horizontal space between the pages (like u will do with UIPageViewControllerOptionInterPageSpacingKey on UIPageViewController)

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

so far i couldn't fine a way to add the spaces without damaging the paging effect. im looking for the same behavior as with the UIPageViewController: the cell should fill the entire screen width, and the space between the cells should only be visible when switching a page.

推荐答案

解决方案一：

1. collectionView.isPagingEnabled = false


2. 为距离添加 minimumLineSpacing 页面之间


3. 实现 targetContentOffsetForProposedContentOffset：withScrollingVelocity：将contentOffset移动到最近的页面。您可以根据 itemSize 和 minimumLineSpacing 计算简单数学页面，但可能需要一些工作才能获得没错。

1. collectionView.isPagingEnabled = false
2. add a minimumLineSpacing for the distance between pages
3. implement targetContentOffsetForProposedContentOffset:withScrollingVelocity: to move the contentOffset to the closest page. You can calculate the page with simple math based on your itemSize and minimumLineSpacing, but it can take a little work to get it right.

解决方案二：

1. collectionView.isPagingEnabled = true


2. 添加 minimumLineSpacing 之间的距离页面


3. 分页大小基于collectionView的边界。因此，将collectionView放大，然后使用screenSize。例如，如果您的 minimumLineSpacing 为10，则将collectionView的框架设置为{0，-5，width + 10，height}


4. 将contentInset设置为等于 minimumLineSpacing ，以使第一个和最后一个项目正确显示。

1. collectionView.isPagingEnabled = true
2. add a minimumLineSpacing for the distance between pages
3. the paging size is based on the bounds of the collectionView. So make the collectionView larger then then screenSize. For example, if you have a minimumLineSpacing of 10 then set the frame of the collectionView to be {0,-5, width+10, height}
4. set a contentInset equal to the minimumLineSpacing to make the first and last item appear correctly.

这篇关于UICollectionView水平分页，页面之间有空格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！