堆叠项轮播图

一种堆叠项(例如照片)的轮播图,类似于 iMessage 中看到的样式

这是什么?

iOS 15 上的 iMessage 以堆叠项轮播图的形式显示多张照片,用户可以滑动浏览。 这是该视图的重新实现。

Simulator.Screen.Recording.-.iPhone.13.Pro.-.2021-10-21.at.23.05.37.mp4

如何使用?

StackedItemsLayout

该轮播图已实现为自定义的 UICollectionViewLayoutStackedItemsLayout。 你可以直接在使用了分页的 UICollectionView 中使用此布局

let collectionView = UICollectionView(frame: .zero, collectionViewLayout: StackedItemsLayout())
collectionView.backgroundColor = nil
collectionView.alwaysBounceHorizontal = true
collectionView.clipsToBounds = false
collectionView.isPagingEnabled = true

//  configure the collection view as any other collection view 

StackedItemsView

你也可以使用便捷的包装视图 StackedItemsView。 这是一个泛型视图,它将 ItemType 和 CellType 作为泛型参数,并为你处理 collection view。

let stackedItemsView = StackedItemsView<UIColor, YourSubclassOfUICollectionViewCell>()

stackedItemsView.items = [.red, .blue, .brown, .green, .orange, .purple, .yellow, .gray, .cyan, .magenta]
stackedItemsView.configureItemHandler = { item, cell in
	// configure your cell here - it already has some shadow and corner radius parameters set on
	// the cell itself.
}
stackedItemsView.selectionHandler = { [weak self] item, index in
	// handle item selection here
}
view.addSubview(stackedItemsView)