对于每行有两个卡片单元格的 UI，哪种布局更好？

Question

如屏幕截图所示，为 iOS 创建每行两列的网格视图的最佳方法是什么？

我目前正在使用带有静态单元格的表格视图，但是 UI 在某些 iPad 上变形了。还有如何最好地安排网格边界？目前我使用中心图像视图，以及带有图像视图的水平图像视图的新单元格。但这感觉不对。

Answer 1

这看起来像是 UICollectionView 的工作！（将 UITableViewDataSource 协议方法更改为其等效的 UICollectionViewDataSource 应该不会太难。）

Answer 2

应该用 UICollectionView 制作，它有一个特定的代表 UICollectionViewDelegateFlowLayout，这使得它很容易达到那种外观。

步骤 1

在您的 UIViewController 中添加 UICollectionViewDelegateFlowLayout，例如：<#Your View Controller#> : UICollectionViewDelegateFlowLayout

步骤 2

每行的单元格数量是根据适合 UICollectionView 宽度的单元格数量计算的。因此，具有一半宽度的单元格将适合每行 2 个单元格。

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    return CGSize(width: collectionView.frame.width / 2, height: /* your desired height here */)
}

提示：

你甚至可以让它比屏幕的一半小一点，乘以这样的值：(collectionView.frame.width / 2) * 0.98，你也可以减去常数值。

您可能需要设置 collectionView.minimumInteritemSpacing = 0 因为此属性默认值为 10.0

文档： UICollectionViewFlowLayout

对于每行有两个卡片单元格的 UI，哪种布局更好？

What layout is better for a UI with two card cells per row?

ios

user-interface

design-guidelines