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

最新推荐文章于 2024-05-14 09:56:32 发布

wentianen

最新推荐文章于 2024-05-14 09:56:32 发布

阅读量4.2k

点赞数 1

分类专栏： ios 文章标签： ios 卡片传送带电影选择 uicollectionview

本文链接：https://blog.csdn.net/andanlan/article/details/78113577

版权

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

摘要由CSDN通过智能技术生成

一、场景

在我们的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.layoutAttrib