美文网首页
UICollectionView 实现横向分页滑动

UICollectionView 实现横向分页滑动

作者: 苏东没有坡 | 来源:发表于2018-06-19 17:56 被阅读0次
    要实现的效果如下:
    QQ20180619-173259-HD.gif

    Github地址:https://github.com/Dwjiyi/HoriCollectionView

    Demo 里面提供了两套方案

    • 一套是现在在用的,利用scrollView的代理方法,利用scrollToItem手动滑动

    • 一套是当年刚实习的时候用的,拎不清,用的swipe手势的笨方法,Demo里面也留着了,算是提供一种思路,仅供参考!

    以下是第一套方案的核心代码:

        /// 即将开始拖拽
        func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
            // 1. 标记拖动前的位置
            dragStartX = scrollView.contentOffset.x
        }
        
        /// 即将结束拖拽
        func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
            // 2. 标记拖动后手指离开的位置
            let currentX = scrollView.contentOffset.x
            // 3. 计算手指拖动的距离
            let moveWidth = currentX - dragStartX
            // 4. 以0.5个itemWidth为界限, 多则滑到下一个/上一个,少则回到原位
            let movePage = Int(moveWidth / (itemSize.width * 0.5))
            if velocity.x > 0 || movePage > 0 {
                dragIndex = 1
            } else if velocity.x < 0 || movePage < 0 {
                dragIndex = -1
            } else {
                dragIndex = 0
            }
            // 5. 计算当前cell中心点的index
            let index = Int((dragStartX + (itemSize.width + minimumInteritemSpacing) * 0.5) / (itemSize.width + minimumLineSpacing))
            print("scrollViewWillEndDragging: \(index)")
            // 最后一个cell继续往右滑, 不滑了
            if (index == itemCount - 1 && dragIndex == 1) {
                return
            }
            collectionView.scrollToItem(at: IndexPath(row: index + dragIndex, section: 0), at: UICollectionView.ScrollPosition.centeredHorizontally, animated: true)
        }
        
        /// 滑动即将开始减速
        func scrollViewWillBeginDecelerating(_ scrollView: UIScrollView) {
            let index = Int((dragStartX + (itemSize.width + minimumInteritemSpacing) * 0.5) / (itemSize.width + minimumLineSpacing))
            print("scrollViewWillBeginDecelerating: \(index)")
            
            if (index == itemCount - 1 && dragIndex == 1) {
                return
            }
            collectionView.scrollToItem(at: IndexPath(row: index + dragIndex, section: 0), at: UICollectionView.ScrollPosition.centeredHorizontally, animated: true)
        }
    

    相关文章

      网友评论

          本文标题:UICollectionView 实现横向分页滑动

          本文链接:https://www.haomeiwen.com/subject/ukqzeftx.html