美文网首页
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