iOS UICollectionView 卡片效果 傳送帶效果 Carousel FlowLayout 場景 實現思路 實現細節 封裝 集成使用 參考

場景

在我們的app中需要一個類似影院傳送帶式選擇電影場次的控件，效果如下：

實現思路

1. 控件選擇
   看控件特徵，是一個可滾動的長列表，在iOS中一般都使用UICollectionView來展現，這裏我們也選擇它。
2. 佈局選擇
   UICollectionView中每個item的顯示樣式都通過UICollectionViewLayout來控制，這裏明顯是一個“流式佈局”，我們可以選擇UICollectionViewFlowLayout來定製樣式。
3. 佈局控制
   在上面的顯示效果中，我們需要控制兩個點：
   • 縮放效果

     // 該方法指定UICollectionView的每個item滾動到相應rect的顯示效果（UICollectionViewLayoutAttributes，包含尺寸、透明度等信息）
     open func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]?
     

   • 滾動結束，定位到中間位置

     // 該方法指定UICollectionView滾動到的目標位置
     // a layout can return the content offset to be applied during transition or update animations
     open func targetContentOffset(forProposedContentOffset proposedContentOffset: CGPoint) -> CGPoint
     

實現細節

• 縮放效果

override open func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
    guard let superAttributes = super.layoutAttributesForElements(in: rect), let attributes = NSArray(array: superAttributes, copyItems: true) as? [UICollectionViewLayoutAttributes] else {
        return nil
    }
    return attributes.map({ self.transformLayoutAttributes($0) })
}

fileprivate func transformLayoutAttributes(_ attributes: UICollectionViewLayoutAttributes) -> UICollectionViewLayoutAttributes {
    guard let collectionView = self.collectionView else { return attributes }
    let isHorizontal = (self.scrollDirection == .horizontal)

    let collectionCenter = isHorizontal ? collectionView.frame.size.width / 2 : collectionView.frame.size.height / 2
    let offset = isHorizontal ? collectionView.contentOffset.x : collectionView.contentOffset.y
    let normalizedCenter = (isHorizontal ? attributes.center.x : attributes.center.y) - offset

    let maxDistance = (isHorizontal ? self.itemSize.width : self.itemSize.height) + self.minimumLineSpacing
    let distance = min(abs(collectionCenter - normalizedCenter), maxDistance)
    let ratio = (maxDistance - distance) / maxDistance

    let alpha = ratio * (1 - self.sideItemAlpha) + self.sideItemAlpha
    let scale = ratio * (1 - self.sideItemScale) + self.sideItemScale
    attributes.alpha = alpha
    attributes.transform3D = CATransform3DScale(CATransform3DIdentity, scale, scale, 1)
    attributes.zIndex = Int(alpha * 10)

    let scrollDirectionItemHeight = isHorizontal ? itemSize.height : itemSize.width
    var sideItemFixedOffset: CGFloat = 0
    switch sideItemBaselineType {
    case .top:
        sideItemFixedOffset = -(scrollDirectionItemHeight - scrollDirectionItemHeight * self.sideItemScale) / 2
    case .center:
        sideItemFixedOffset = 0
    case .bottom:
        sideItemFixedOffset = (scrollDirectionItemHeight - scrollDirectionItemHeight * self.sideItemScale) / 2
    }
    let shift = (1 - ratio) * (sideItemOffset + sideItemFixedOffset)
    if isHorizontal {
        attributes.center.y += shift
    } else {
        attributes.center.x += shift
    }
    
    return attributes
}

• 滾動結束，定位到中間位置

guard let collectionView = collectionView , !collectionView.isPagingEnabled,
    let layoutAttributes = self.layoutAttributesForElements(in: collectionView.bounds)
    else { return super.targetContentOffset(forProposedContentOffset: proposedContentOffset) }

let isHorizontal = (self.scrollDirection == .horizontal)

let midSide = (isHorizontal ? collectionView.bounds.size.width : collectionView.bounds.size.height) / 2
let proposedContentOffsetCenterOrigin = (isHorizontal ? proposedContentOffset.x : proposedContentOffset.y) + midSide

var targetContentOffset: CGPoint
if isHorizontal {
    let closest = layoutAttributes.sorted { abs($0.center.x - proposedContentOffsetCenterOrigin) < abs($1.center.x - proposedContentOffsetCenterOrigin) }.first ?? UICollectionViewLayoutAttributes()
    targetContentOffset = CGPoint(x: floor(closest.center.x - midSide), y: proposedContentOffset.y)
} else {
    let closest = layoutAttributes.sorted { abs($0.center.y - proposedContentOffsetCenterOrigin) < abs($1.center.y - proposedContentOffsetCenterOrigin) }.first ?? UICollectionViewLayoutAttributes()
    targetContentOffset = CGPoint(x: proposedContentOffset.x, y: floor(closest.center.y - midSide))
}

return targetContentOffset

封裝

Demo

拓展實現

• WTCarouselFlowLayoutBaselineType.top
  

• WTCarouselFlowLayoutBaselineType.center
  

• WTCarouselFlowLayoutBaselineType.bottom
  

• layout.itemSpacing = -15
  

集成使用

• Requirements
  iOS 8.0+

• CocoaPods

  pod "WTCarouselFlowLayout"
  

• Example

  import WTCarouselFlowLayout
  

  let layout = self.collectionView.collectionViewLayout as! WTCarouselFlowLayout
  layout.itemSize = CGSize(width: 70, height: 100)
  layout.scrollDirection = .horizontal
  layout.spacingMode = WTCarouselFlowLayoutSpacingMode.between(spacing: 50)
  //  layout.spacingMode = WTCarouselFlowLayoutSpacingMode.overlap(overlapSpacing: 15)
  layout.sideItemScale = 0.7
  layout.sideItemAlpha = 0.7
  layout.sideItemBaselineType = .center
  layout.sideItemOffset = 0.0
  

參考

UPCarouselFlowLayout