如何计算像元大小？

Question

如何计算单元格大小，使得不同设备显示相同数量的行列单元格，并且单元格高度调整为设备的屏幕尺寸？

我尝试过这样计算，但不正确。

我哪里做错了？

override func viewDidLoad() {
    super.viewDidLoad()
    
    let homeFlowLayout = UICollectionViewFlowLayout()
    let itemsPerRow: CGFloat = 2
    let itemsPerColumn: CGFloat = 2
    let window =  UIApplication.shared.connectedScenes.first as? UIWindowScene
    let tabBarHeight = window?.windows.first?.safeAreaInsets.bottom ?? 0

    let availableWidth = UIScreen.main.bounds.width
    let width = availableWidth / itemsPerRow
    
    let availableHeight = UIScreen.main.bounds.height  - tabBarHeight
    let height = availableHeight / itemsPerColumn
    
    homeFlowLayout.itemSize = CGSize(width: width, height: height)
    homeFlowLayout.minimumLineSpacing = 10
    homeFlowLayout.scrollDirection = .vertical
    collectionView.setCollectionViewLayout(homeFlowLayout, animated: false)
}

Answer 1

这可能超出了您可能考虑的范围，但组合布局（如 Apple Implementing Modern Collection Views 示例和 WWDC 2020 的Advances in Collection View Layout 中所述）可以优雅地处理高度占整体的百分比视图（以及您在上一个问题中发布的正交滚动）。

为了获得五行，我只需将组的

fractionalHeight

定义为 ⅕（并设置

orthogonalScrolling

行为）：

func createLayout() -> UICollectionViewCompositionalLayout {
    let itemSize = NSCollectionLayoutSize(
        widthDimension: .estimated(100),
        heightDimension: .fractionalHeight(1)
    )
    let item = NSCollectionLayoutItem(layoutSize: itemSize)
    let groupSize = NSCollectionLayoutSize(
        widthDimension: .estimated(100),
        heightDimension: .fractionalHeight(1/5)
    )
    let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item])
    let section = NSCollectionLayoutSection(group: group)
    section.orthogonalScrollingBehavior = .continuousGroupLeadingBoundary

    return UICollectionViewCompositionalLayout(section: section)
}

结果：

我使用的唯一技巧是关于间距。如果我将每组的高度设置为⅕并添加间距，那么总高度相对于间距之和来说太高了。因此，我只是将其保留为没有间距，然后将内容插入到我的单元格中（示例中的图像）以实现所需的间距。也许还有另一种方法可以精确地达到 ⅕ 高度（包括间距），但它并没有让我跳出来。

我坦率地承认，如果您以前没有尝试过组合布局，这可能需要考虑很多。但是当您加入正交滚动（如果确实仍然需要的话），那么我认为组合布局真的开始发光。我已经完成了旧的“表视图单元格内的集合视图”技术，但它很快就会变得非常难看。构图布局一开始可能会感觉很陌生，但这是值得的，恕我直言。

前面提到的示例代码有丰富的示例，所以我鼓励您检查一下。