如何优化UICollectionViewCompositionalLayout代码实现iOS设备界面统一？

我希望iPhone与iPad上的界面保持一致，效果如图所示：

我使用UICollectionCompositionalLayout编写了如下代码来实现该需求：

func carouselSection(using section: Section) -> NSCollectionLayoutSection {
    
    let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .fractionalHeight(1.0))
    let layoutItem = NSCollectionLayoutItem(layoutSize: itemSize)
    
    var layoutGroupSize = NSCollectionLayoutSize(widthDimension: .absolute(0), heightDimension: .absolute(0))
    var layoutGroup = NSCollectionLayoutGroup.horizontal(layoutSize: layoutGroupSize, subitems: [layoutItem])
    
    switch UIDevice.current.userInterfaceIdiom {
    case .phone:
        
        let a:CGFloat = UIScreen.main.bounds.size.height/8
        let b:CGFloat = UIScreen.main.bounds.size.height
        
        layoutGroupSize = NSCollectionLayoutSize(widthDimension: .absolute(b - (a) ), heightDimension: .absolute(b))
        layoutGroup = NSCollectionLayoutGroup.horizontal(layoutSize: layoutGroupSize, subitems: [layoutItem])
        layoutGroup.contentInsets = NSDirectionalEdgeInsets(top: a, leading: a/2, bottom: a, trailing: a/2)
        
    case .pad:
        
        let a:CGFloat = UIScreen.main.bounds.size.height*0.25
        let h:CGFloat = a * 1.8
        let b:CGFloat = UIScreen.main.bounds.size.height
        
        layoutGroupSize = NSCollectionLayoutSize(widthDimension: .absolute(b - (h)), heightDimension: .absolute(b - (a)))
        layoutGroup = NSCollectionLayoutGroup.horizontal(layoutSize: layoutGroupSize, subitems: [layoutItem])
        layoutGroup.contentInsets = NSDirectionalEdgeInsets(top: a, leading: a/10, bottom: 0, trailing: a/10)
        
    default:
        
        print(UIScreen.main.bounds.size.height)
    }

    let layoutSection = NSCollectionLayoutSection(group: layoutGroup)
    layoutSection.orthogonalScrollingBehavior = .groupPagingCentered
    
    layoutSection.visibleItemsInvalidationHandler = { (items, offset, environment) in
        items.forEach { item in
            let distanceFromCenter = abs((item.frame.midX - offset.x) - environment.container.contentSize.width / 2.0)
            let minScale: CGFloat = 0.7
            let maxScale: CGFloat = 1.1
            let scale = max(maxScale - (distanceFromCenter / environment.container.contentSize.width), minScale)
            item.transform = CGAffineTransform(scaleX: scale, y: scale)
        }
    }
    
    return layoutSection
}

目前我已得到近似预期的效果，但代码中针对iPhone和iPad做了大量基于屏幕尺寸的硬计算，例如：

iPhone端计算：

let a:CGFloat = UIScreen.main.bounds.size.height/8
let b:CGFloat = UIScreen.main.bounds.size.height

iPad端计算：

let a:CGFloat = UIScreen.main.bounds.size.height*0.25
let h:CGFloat = a * 1.8
let b:CGFloat = UIScreen.main.bounds.size.height

我了解UICollectionViewCompositionalLayout本应只需少量计算即可实现多设备界面统一，因此想请教如何优化现有代码？

1. 用布局环境替代屏幕硬编码 #

不要直接调用UIScreen.main.bounds获取尺寸，改用NSCollectionLayoutEnvironment提供的容器尺寸，它会自动适配当前设备、横竖屏甚至分屏状态，适配性更强。

2. 提取通用布局参数 #

把设备相关的比例参数抽成配置结构体，避免重复计算，让布局逻辑更清晰：

// 统一管理布局比例配置
struct CarouselLayoutConfig {
    let topInsetRatio: CGFloat
    let horizontalInsetRatio: CGFloat
    let groupWidthRatio: CGFloat
    let groupHeightRatio: CGFloat
    let hasBottomInset: Bool
}

// 根据设备类型返回对应配置
private func configForIdiom(_ idiom: UIUserInterfaceIdiom) -> CarouselLayoutConfig {
    switch idiom {
    case .phone:
        return CarouselLayoutConfig(
            topInsetRatio: 1/8,
            horizontalInsetRatio: 1/16,
            groupWidthRatio: 7/8,
            groupHeightRatio: 1.0,
            hasBottomInset: true
        )
    case .pad:
        return CarouselLayoutConfig(
            topInsetRatio: 0.25,
            horizontalInsetRatio: 0.025,
            groupWidthRatio: 1 - (0.25 * 1.8),
            groupHeightRatio: 0.75,
            hasBottomInset: false
        )
    default:
        return CarouselLayoutConfig(
            topInsetRatio: 0,
            horizontalInsetRatio: 0,
            groupWidthRatio: 1.0,
            groupHeightRatio: 1.0,
            hasBottomInset: false
        )
    }
}

3. 重构布局逻辑，移除重复代码 #

在创建布局时，通过环境获取容器尺寸，结合配置参数计算，避免重复创建布局组：

func carouselSection(using section: Section, environment: NSCollectionLayoutEnvironment) -> NSCollectionLayoutSection {
    let containerHeight = environment.container.contentSize.height
    let config = configForIdiom(environment.traitCollection.userInterfaceIdiom)
    
    // 保持Item配置不变
    let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .fractionalHeight(1.0))
    let layoutItem = NSCollectionLayoutItem(layoutSize: itemSize)
    
    // 根据配置计算Group尺寸
    let groupWidth = containerHeight * config.groupWidthRatio
    let groupHeight = containerHeight * config.groupHeightRatio
    let layoutGroupSize = NSCollectionLayoutSize(
        widthDimension: .absolute(groupWidth),
        heightDimension: .absolute(groupHeight)
    )
    let layoutGroup = NSCollectionLayoutGroup.horizontal(layoutSize: layoutGroupSize, subitems: [layoutItem])
    
    // 计算内边距
    let topInset = containerHeight * config.topInsetRatio
    let horizontalInset = containerHeight * config.horizontalInsetRatio
    layoutGroup.contentInsets = NSDirectionalEdgeInsets(
        top: topInset,
        leading: horizontalInset,
        bottom: config.hasBottomInset ? topInset : 0,
        trailing: horizontalInset
    )
    
    // Section配置保持不变
    let layoutSection = NSCollectionLayoutSection(group: layoutGroup)
    layoutSection.orthogonalScrollingBehavior = .groupPagingCentered
    
    layoutSection.visibleItemsInvalidationHandler = { (items, offset, environment) in
        items.forEach { item in
            let distanceFromCenter = abs((item.frame.midX - offset.x) - environment.container.contentSize.width / 2.0)
            let minScale: CGFloat = 0.7
            let maxScale: CGFloat = 1.1
            let scale = max(maxScale - (distanceFromCenter / environment.container.contentSize.width), minScale)
            item.transform = CGAffineTransform(scaleX: scale, y: scale)
        }
    }
    
    return layoutSection
}

4. 额外优化建议 #

• 可以把缩放的minScale、maxScale也加入配置结构体，让布局调整更灵活
• 无需额外处理横竖屏适配，environment.container.contentSize会自动更新
• 用environment.traitCollection.userInterfaceIdiom替代UIDevice.current.userInterfaceIdiom，更适配分屏等复杂场景

内容的提问来源于stack exchange，提问作者user1342352532