如何使用 UICollectionViewCompositionalLayout 创建像图像一样的集合视图

Posted 2023-02-23

【中文标题】如何使用 UICollectionViewCompositionalLayout 创建像图像一样的集合视图

【英文标题】：How to create collection view like image with UICollectionViewCompositionalLayout

【发布时间】：2020-10-28 21:26:54

【问题描述】：

几天来，我不知道如何使用 UICollectionViewCompositionalLayout 制作像屏幕截图中那样的集合视图。任何人都可以帮忙吗？ Image!!!!

【问题讨论】：

看看github.com/jVirus/compositional-layouts-kit，看看你能不能用这些作为灵感。另外，youtube.com/watch?v=y1uXXVUu43o&ab_channel=LetsBuildThatApp 是一个不错的进入 UICollectionViewCompositionalLayout 的教程

【参考方案1】：

您可以将两个垂直的 NSCollectionLayoutGroup 组合在一个水平组中来实现这种布局。每个垂直组由两个元素组成，一个大的，另一个小的。

final class CustomLayout 



class func create() -> UICollectionViewCompositionalLayout
    
    //Obs: The size of each element is relative to his parent.
    //NSCollectionLayoutItem < NSCollectionLayoutGroup < NSCollectionLayoutSection < UICollectionViewCompositionalLayout
    
    
    
    //Defines the margin
    let margin: CGFloat = 5
    //Defines the space between the cells
    let contentInsests: CGFloat = 8

    
    // Create the big item that is 60% of your parent's height
    let bigItem = NSCollectionLayoutItem(
        layoutSize: NSCollectionLayoutSize(
            widthDimension: .fractionalWidth(1.0),
            heightDimension: .fractionalHeight(0.60)))
    
    bigItem.contentInsets = NSDirectionalEdgeInsets(
        top: contentInsests,
        leading: contentInsests,
        bottom: contentInsests,
        trailing: contentInsests)
    
    // Create the small item that is 40% of your parent's height
    let smallItem = NSCollectionLayoutItem(
        layoutSize: NSCollectionLayoutSize(
            widthDimension: .fractionalWidth(1.0),
            heightDimension: .fractionalHeight(0.40)))
    
    smallItem.contentInsets = NSDirectionalEdgeInsets(
        top: contentInsests,
        leading: contentInsests,
        bottom: contentInsests,
        trailing: contentInsests)
    

    //Here we Combine the two itens in a vertical group
    let group1 = NSCollectionLayoutGroup.vertical(
        layoutSize: NSCollectionLayoutSize(
            widthDimension: .fractionalWidth(0.5),
            heightDimension: .fractionalHeight(1.0)),
        subitems: [bigItem,smallItem])
    
    //Here we do the same reversing the order of the itens
    let group1Reversed = NSCollectionLayoutGroup.vertical(
        layoutSize: NSCollectionLayoutSize(
            widthDimension: .fractionalWidth(0.5),
            heightDimension: .fractionalHeight(1.0)),
        subitems: [smallItem, bigItem])
    
    
    //here we combine both in a nested group making the layout like in the image.
    //In this example we are making a custom layout with two "Image layout" per screen, so
   // We define his height as 0.5% of his parent's height. You can change it for your preference.
    let nestedGroup = NSCollectionLayoutGroup.horizontal(
        layoutSize: NSCollectionLayoutSize(
            widthDimension: .fractionalWidth(1.0),
            heightDimension: .fractionalHeight(0.5)),
        subitems: [
          group1,
        group1Reversed
        ]
    )
    
    
    //Here is our main group with two nested group
    let mainGroup = NSCollectionLayoutGroup.vertical(
        layoutSize: NSCollectionLayoutSize(
            widthDimension: .fractionalWidth(1.0),
            heightDimension: .fractionalHeight(1.0)),
        subitems: [
          nestedGroup,nestedGroup
        ]
    )
    
    
    
    let section = NSCollectionLayoutSection(group: mainGroup)
    
    
    section.contentInsets = NSDirectionalEdgeInsets(
        top: 0,
        leading: margin,
        bottom: 0,
        trailing: margin)
    
    let configuration = UICollectionViewCompositionalLayoutConfiguration()
    configuration.scrollDirection = .vertical
    let layout = UICollectionViewCompositionalLayout(section: section)
    layout.configuration = configuration
    return layout

Example