带有故事板的 CollectionView 样式

Posted 2023-03-14

【中文标题】带有故事板的 CollectionView 样式

【英文标题】：CollectionView Styling with Storyboard

【发布时间】：2018-02-28 23:12:51

【问题描述】：

所以我目前正在使用 collectionViews 构建一个应用程序。但是接下来我希望行居中对齐。 （如果这有意义的话）。

正如您在这张图片中看到的：

两个项目之间有一个巨大的白色区域。为什么第二个项目不在第一个项目的正下方，空白区域为 8px？

此外，我希望我的应用程序可以在 iPad 和 iPhone 上运行，因此可以通过此应用程序对我进行缩放。我希望我可以让每一行代表 25% 的视图区域。我将如何做到这一点？但仍然保持它在 iPad 和 iPhone 上的美观/清洁和功能。

编辑： 此外，如果我降低尺寸以便可以在彼此下方放置 3 个，它们首先垂直堆叠而不是水平堆叠。即使它是一个水平滚动的collectionview？

【问题讨论】：

请提供一个最小示例（即测试 XCode 项目）。

【参考方案1】：

空白是因为UICollectionView 使用的是默认UICollectionViewFlowLayout

用这个方法来实现你想要的：

func setCollectionLayout()

    let totalWidth = UIScreen.main.bounds.width
    let size = totalWidth * 0.1 // this is how you set item with a proportion of the screen
    let collectionLayout = UICollectionViewFlowLayout()
    collectionLayout.scrollDirection = .vertical
    collectionLayout.itemSize = CGSize(width: size , height: size)
    collectionLayout.minimumInteritemSpacing = 8
    collectionLayout.sectionInset = UIEdgeInsetsMake(8 , 0 , 8 , 0)
    collectionView.collectionViewLayout = collectionLayout
    collectionView.layoutSubviews()

如果您想要进一步自定义，您可以覆盖 UICollectionViewFlowLayout