UICollectionView 设置分页效果-偏移固定距离(swift)

最新推荐文章于 2025-01-26 09:08:13 发布

转载最新推荐文章于 2025-01-26 09:08:13 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5a310de05188254a701f0bd1

文章标签：

#swift

本文介绍如何使用UICollectionView实现自定义分页滚动效果。包括UICollectionView的初始化、代理方法的实现、UIScrollView代理方法的应用，以及通过计算确定cell停留在指定位置的逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简介

大家都知道UICollectionView是带有自己的分页效果的,也就是pagingEnabled属性,可以实现整个屏幕滚动的效果,但是有场景就需要我们自己去分页效果了,例如以下效果

需求与思路

实现下图效果,每一次滑动cell都会完成的停留在红线方框之内

1.首先初始化一个UICollectionView,并且遵守UICollectionViewDataSource,UICollectionViewDelegate,UICollectionViewDelegateFlowLayout代理方法

2.实现父类UIScrollView的代理方法 scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer)

3.定义一个分页序号,通过通过selectedIndex的值，将要停下来的坐标y,计算位移,并且判断当位移绝对值大于分页宽度的一半时,滚动到位移方向的相邻页

4.在最后增加一个cell,防止滚动到最后一页出问题

5.根据滚动速度来停止

直接上代码

//第一

func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer) {

let y = targetContentOffset.pointee.y

let pageHeight = itemHeight

//通过selectedIndex的值，将要停下来的坐标y,计算位移

let moveindex = y - pageHeight*CGFloat(selectedIndex)

//当位移绝对值大于分页宽度的一半时,滚动到位移方向的相邻页

if moveindex < -pageHeight*0.5{

selectedIndex -= 1

}else if moveindex > pageHeight*0.5 {

selectedIndex += 1

}

if abs(velocity.y) >= 2{

targetContentOffset.pointee.y = pageHeight * CGFloat(selectedIndex)

}else{

targetContentOffset.pointee.y = scrollView.contentOffset.y

scrollView .setContentOffset(CGPoint(x: 0, y: pageHeight * CGFloat(selectedIndex)), animated: true)

}

//第二

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

switch indexPath.item {

case numberOfItem:

let n = UIScreen.main.bounds.size.height/itemHeight

let height = UIScreen.main.bounds.size.height - itemHeight*n

return CGSize(width: itemWith, height: height)

default:

return CGSize(width: itemWith, height: itemHeight)

}

最后<代码思路,如有相同之处,不是故意为之>附上demo地址 demo