collectionView非整屏滚动(卡片式效果)

卡片效果

一.问题说明

在使用 collectionView 时,遇到了下面的问题.滚动并非全屏的.如果是全屏则使用isPagingEnabled属性就可以解决.基本上一些常见的轮播图也可以这么处理.先在发现如果设置该属性,滚动的距离是屏幕的宽.
下面说一下思路:

二.解决思路

2.1布局

首先先完成基本布局

// 继承FlowLayout 可以减少一部分布局麻烦
class CredirCardLayout: UICollectionViewFlowLayout {
    // 用于存放每个 item 的样式
    fileprivate lazy var attrsArray: [UICollectionViewLayoutAttributes] = [UICollectionViewLayoutAttributes]()
    override init() {
        super.init()
        // 设置布局为水平滚动 
        scrollDirection = .horizontal
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    // 布局准备工作,主要用于计算每个 item 的位置
    override func prepare() {
        super.prepare()
        let itemCount = collectionView?.numberOfItems(inSection: 0)
        let itemW: CGFloat = ScreenW * 0.84
        let itemH: CGFloat = 250
        let margin: CGFloat = -30
        let left: CGFloat = (ScreenW - itemW - 2 * margin) / 2.0

        for index in 0.. [UICollectionViewLayoutAttributes]? {
        let size = collectionView?.frame.size
        let origin = collectionView?.contentOffset
        // 显示区域
        let visiableRect = CGRect(x: (origin?.x)!, y: (origin?.y)!, width: (size?.width)!, height: (size?.height)!)
        
        let centerX = (collectionView?.contentOffset.x)! + (collectionView?.frame.width)! * 0.5
        
        for att in attrsArray {
            if visiableRect.intersects(att.frame) {
                // 获取中心点
                let itemCenterX = att.center.x
                
                // 计算缩小的比例. fabsf是取绝对值的函数
                let scale = 1 - (fabsf(Float(itemCenterX - centerX))) / 1000.0
                                
                att.transform = CGAffineTransform(scaleX: CGFloat(scale), y: CGFloat(scale))
            }
        }
        
        return attrsArray
    }
    
    // ContentSize大小
    override var collectionViewContentSize: CGSize {
        return CGSize(width: (attrsArray.last?.frame.maxX)! + 30, height: 0)
    }
    
    // 当边界改变时调用此方法,可以频繁计算 item 的大小 
    override func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool {
        return true
    }
}

到这里基本的 layout 布局就基本完成.

2.2当滚动停止时,停留到中间

extension CredirCardLayout {
  // 滚动将要停止时调用
    override func targetContentOffset(forProposedContentOffset proposedContentOffset: CGPoint, withScrollingVelocity velocity: CGPoint) -> CGPoint {
        
        let lastRect = CGRect(origin: proposedContentOffset, size: (collectionView?.frame.size)!)
        
        // 屏幕中心的位置
        let centerX = proposedContentOffset.x + (collectionView?.frame.width)! * 0.5
        
        // 取出范围内的属性
        let array = layoutAttributesForElements(in: lastRect)
        var  adjustOffsetX: CGFloat = CGFloat(MAXFLOAT)
        
        for att in array! {
            if fabsf(Float(att.center.x - centerX)) < fabsf(Float(adjustOffsetX)) {
                adjustOffsetX = att.center.x - centerX
            }
        }
        return CGPoint(x: proposedContentOffset.x + adjustOffsetX, y: proposedContentOffset.y)
    }

}

2.3 设置滚动页

到这里你可能会发现当滚动时,会滑动很多页.这样子肯定不行.
先说一下思路,再看解决方案:
思路一: 通过判断左划,还是右划.设置滚动的 offset.x
这里我们会遇到几个 scrollerView 的代理方法

// 当开始拖动时,调用,此时记录位置,便于后面进行比较
func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
        offsetX = scrollView.contentOffset.x
}

    // 当将要结束时调用, 此处可以判断是左划还是右划    
 func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer) {
      if offsetX > scrollView.contentOffset.x { // 右划

      } else { // 左划

       }   
}
    
    // 滑动减速时调用
func scrollViewWillBeginDecelerating(_ scrollView: UIScrollView) {
   if offsetX > scrollView.contentOffset.x { // 右划 
           
   } else { // 左划

   }
}
    
 // 滚动时调用会频繁调用
func scrollViewDidScroll(_ scrollView: UIScrollView) {
     
}

通过这几个方法测试会发现问题.当手的滑动的力度不同时,调用的方法是不样的.所以判断起来极端的麻烦.

思路二: 如何处理手拖动速度的问题
由于上面已经处理了当滚动停止时一定会停在 item 的中心,所以现在考虑的就是怎样可以区分手划的力度呢.通过测试触发的手势发现通过手势的移动是很难判断.最后只能让滚动慢下来.

最终解决方案:设置decelerationRate

 collecton.decelerationRate = 0.5

decelerationRate这个属性的取值范围是0-1;用于决定用户举起手指后减速率。通过设定滚动的减速率,来限制 offset. 当然这种方法有些取巧.暂时还没有想到太好的计算方式.