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

最新推荐文章于 2025-10-26 01:53:37 发布

原创

最新推荐文章于 2025-10-26 01:53:37 发布 · 4.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#ios #卡片 #传送带 #电影选择 #uicollectionview

本文介绍了如何在iOS应用中创建一个类似于影院选座的卡片效果，使用UICollectionView实现传送带滚动，并详细讲解了缩放效果和滚动结束时定位中间元素的实现细节。还提供了Demo和集成使用的指南。

文章目录

一、场景
二、实现思路
三、实现细节
四、封装
五、集成使用
六、参考

一、场景

在我们的app中需要一个类似影院传送带式选择电影场次的控件，效果如下：

二、实现思路

控件选择
看控件特征，是一个可滚动的长列表，在iOS中一般都使用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(i