iOS UICollectionView 卡片效果 传送带效果 Carousel FlowLayout

场景

实现思路

UICollectionView

UICollectionView

item

UICollectionViewLayout

UICollectionViewFlowLayout

// 该方法指定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

封装

WTCarouselFlowLayoutBaselineType.top

WTCarouselFlowLayoutBaselineType.center

WTCarouselFlowLayoutBaselineType.bottom

layout.itemSpacing = -15

集成使用

pod "WTCarouselFlowLayout"

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

参考