我有一个水平滚动的收藏夹视图。它上面有几个单元格。已对该集合视图启用分页。
我想让它从居中单元格的左侧和右侧显示单元格的一部分(当它不是第一个或最后一个时),如下所示:
这是以下代码UICollectionViewDelegateFlowLayout
:
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: collectionView.frame.width - 50, height: collectionView.frame.height - 16)
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
return sectionInsets
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
return 10
}
并且sectionInsets
是以下内容:
private var sectionInsets = UIEdgeInsetsMake(8, 20, 8, 20)
当前,当我向右滚动时,右边的单元格越来越可见(单元格之间的间隔线向左边缘移动)
我尝试根据此处和此处的答案使用不同的值,但无法达到我想要的效果。
如果您对此有任何建议,我们将不胜感激。
实际上,解决方案并不难。由于此文章,显示了正确的方式来实现此功能,我终于实现了它。
要了解的主要内容是,建立在集合视图中的分页在这种情况下不起作用,因为单元格的大小小于屏幕的大小。因此,我们需要实现我们的自定义分页技术。
首先,在自定义助手中struct
,我们定义一个属性,该属性将在拖动之前保存单元格的索引:
var indexOfCellBeforeDragging: Int = 0
然后,我们创建一种用于计算单元格的部分插图的方法:
//Setting the inset
func calculateSectionInset(forCollectionViewLayout collectionViewLayout: UICollectionViewFlowLayout, numberOfCells: Int) -> CGFloat {
let inset = (collectionViewLayout.collectionView!.frame.width) / CGFloat(numberOfCells)
return inset
}
现在我们可以使用上面的方法来设置集合视图的项目大小。
//Setting the item size of the collection view
func configureCollectionViewLayoutItemSize(forCollectionViewLayout collectionViewLayout: UICollectionViewFlowLayout) {
let inset: CGFloat = calculateSectionInset(forCollectionViewLayout: collectionViewLayout, numberOfCells: 5)
collectionViewLayout.sectionInset = UIEdgeInsets(top: 0, left: inset/4, bottom: 0, right: inset/4)
collectionViewLayout.itemSize = CGSize(width: collectionViewLayout.collectionView!.frame.size.width - inset / 2, height: collectionViewLayout.collectionView!.frame.size.height)
collectionViewLayout.collectionView?.reloadData()
}
我们需要获取主要单元格(当前最大的单元格)的索引。为此,我们contentOffset
在x
轴上使用有关项目宽度和集合视图的信息:
//Getting the index of the major cell
func indexOfMajorCell(in collectionViewLayout: UICollectionViewFlowLayout) -> Int {
let itemWidth = collectionViewLayout.itemSize.width
let proportionalLayout = collectionViewLayout.collectionView!.contentOffset.x / itemWidth
return Int(round(proportionalLayout))
}
接下来,我们使用上述方法在开始拖动之前设置单元格的索引:
//Setting the index of cell before starting dragging
mutating func setIndexOfCellBeforeStartingDragging(indexOfMajorCell: Int) {
indexOfCellBeforeDragging = indexOfMajorCell
}
现在我们应该处理拖动的结束。此外,我们还要注意单元格上可能发生的弹起手势。在此,我们使用一些自定义阈值作为滑动速度。
//Handling dragging end of a scroll view
func handleDraggingWillEndForScrollView(_ scrollView: UIScrollView, inside collectionViewLayout: UICollectionViewFlowLayout, withVelocity velocity: CGPoint, usingIndexOfMajorCell indexOfMajorCell: Int) {
//Calculating where scroll view should snap
let indexOfMajorCell = indexOfMajorCell
let swipeVelocityThreshold: CGFloat = 0.5
let majorCellIsTheCellBeforeDragging = indexOfMajorCell == indexOfCellBeforeDragging
let hasEnoughVelocityToSlideToTheNextCell = indexOfCellBeforeDragging + 1 < 5 && velocity.x > swipeVelocityThreshold
let hasEnoughVelocityToSlideToThePreviousCell = ((indexOfCellBeforeDragging - 1) >= 0) && (velocity.x < -swipeVelocityThreshold)
let didUseSwipeToSkipCell = majorCellIsTheCellBeforeDragging && (hasEnoughVelocityToSlideToTheNextCell || hasEnoughVelocityToSlideToThePreviousCell)
if didUseSwipeToSkipCell {
let snapToIndex = indexOfCellBeforeDragging + (hasEnoughVelocityToSlideToTheNextCell ? 1 : -1)
let toValue = collectionViewLayout.itemSize.width * CGFloat(snapToIndex)
// Damping equal 1 => no oscillations => decay animation
UIView.animate(withDuration: 0.3, delay: 0, usingSpringWithDamping: 1, initialSpringVelocity: velocity.x, options: .allowUserInteraction, animations: {
scrollView.contentOffset = CGPoint(x: toValue, y: 0)
scrollView.layoutIfNeeded()
}, completion: nil)
} else {
let indexPath = IndexPath(row: indexOfMajorCell, section: 0)
collectionViewLayout.collectionView!.scrollToItem(at: indexPath, at: .centeredHorizontally, animated: true)
}
}
现在,在您的view controller insidescrollViewWillBeginDragging(_:)
方法中,我们需要获取主单元格的索引并将其设置为索引,然后再开始拖动(commentsPagingHelper
是helper结构的一个实例):
func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
let indexOfMajorCell = commentsPagingHelper.indexOfMajorCell(in: collectionViewLayout)
commentsPagingHelper.setIndexOfCellBeforeStartingDragging(indexOfMajorCell: indexOfMajorCell)
}
最后,我们处理scrollViewWillEndDragging(_:, withVelocity:, targetContentOffset:)
方法中主要单元格索引的更改:
func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
//Stop scrollView sliding:
targetContentOffset.pointee = scrollView.contentOffset
let indexOfMajorCell = commentsPagingHelper.indexOfMajorCell(in: collectionViewLayout)
commentsPagingHelper.handleDraggingWillEndForScrollView(scrollView, inside: collectionViewLayout, withVelocity: velocity, usingIndexOfMajorCell: indexOfMajorCell)
}
而已。希望这会对遇到类似问题的人有所帮助。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句