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.

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

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屋！