如何为垂直滚动的UICollectionView实现带叠层缩放的轮播效果

这种带前后层叠、相邻缩放、垂直滚动吸附的轮播效果，不需要依赖第三方库，通过自定义UICollectionViewLayout子类就能完全精准匹配需求，可控性远高于找现成的三方库，刚好能实现你要的「焦点单元格居中层级最高，前后相邻单元格靠后叠放、仅上下边缘露出」的效果。

1. 基础布局配置 #

• 新建继承自UICollectionViewFlowLayout的自定义布局类，比如命名为VerticalStackCarouselLayout
• 在类中提前定义可调整的常量参数，方便后续调优：
  • 单个Cell的固定尺寸
  • 相邻Cell的垂直重叠间距（一般设为Cell高度的15%-20%，用来制造层叠露出的基础）
  • 相邻非焦点Cell的最小缩放比例（一般0.8-0.9区间，和焦点Cell的1.0缩放形成层次）
  • 最大可见层叠层数（比如只显示焦点Cell前后各2层，更远的Cell直接隐藏，减少性能消耗）
• 给绑定这个布局的UICollectionView关闭自带的分页效果，后续用自定义吸附逻辑替代，调整contentInset让首尾的Cell也能正常滚动到居中焦点位置。

2. 重写布局核心方法实现动态效果 #

这部分是整个效果的核心，所有位置、缩放、层级的动态变化都在这里处理：

• 重写prepareLayout()方法
  • 加一个布局属性数组做缓存，避免滚动时重复计算所有Cell的属性，提升滑动帧率
  • 计算当前可视区域的垂直中线坐标：值为collectionView.bounds.midY + collectionView.contentOffset.y，这个就是所有布局调整的参考基准，代表当前焦点位置的Y坐标
  • 遍历所有需要显示的Cell索引，逐个生成对应的布局属性对象，根据每个Cell的中心和中线的距离动态调整参数
• 重写layoutAttributesForElements(in:)方法
  • 从缓存中筛选出当前可视区域内的所有布局属性返回
  • 给每个布局属性设置zIndex：距离中线越近的Cell，zIndex值越高，保证居中的焦点Cell永远在最上层，前后相邻的Cell依次降低zIndex，从机制上实现层叠关系
• 重写shouldInvalidateLayout(forBoundsChange:)方法，直接返回true，保证每次滚动时布局会实时刷新，缩放、层叠效果能跟着手指滑动连续变化，不会出现停滞
• 重写targetContentOffset(forProposedContentOffset:withScrollingVelocity:)方法
  • 实现滚动吸附逻辑：用户抬手停止滚动时，自动计算距离当前中线最近的Cell，调整contentOffset让这个Cell刚好居中停在焦点位置，避免滚动停在两个Cell中间的割裂感

3. 具体属性的动态调整逻辑 #

针对每个生成的Cell布局属性，按以下规则调整：

• 计算该Cell的中心位置和垂直中线的距离差distance = abs(cellCenterY - 中线坐标)
• 如果distance超过了之前定义的最大可见层叠距离，直接把这个Cell的alpha设为0隐藏，不参与显示
• 缩放比例：距离为0（完全居中的焦点Cell）时缩放为1.0，距离越远缩放值越小，按线性关系计算即可，比如scale = 1 - (distance / 最大有效距离) * (1 - 最小缩放值)
• 位置调整：保持Cell的垂直位置和默认垂直滚动的位置一致，靠之前设置的负的行间距制造基础重叠，不需要额外偏移
• 透明度：可以配合缩放同步降低，越远的Cell透明度越低，进一步强化层叠的纵深感

• 不要在自定义布局里直接修改系统的itemSize属性，所有的尺寸、位置调整都要基于生成的UICollectionViewLayoutAttributes对象修改，避免和系统布局逻辑冲突
• 滚动过程中要及时清空缓存的布局属性，避免因为contentOffset变化出现布局错位
• 调整zIndex的时候注意计算顺序，不要让下方的Cell层级高于上方的相邻Cell，避免出现叠放顺序颠倒的问题
• 重叠间距不要设置过大，露出的边缘部分占Cell高度的1/5左右视觉效果最好，太大会显得Cell挤压变形

内容的提问来源于stack exchange，提问作者Harsha