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

Posted 2023-03-14

【中文标题】对于每行有两个卡片单元的 UI，哪种布局更好？

【英文标题】：What layout is better for a UI with two card cells per row?

【发布时间】：2019-02-17 10:18:26

【问题描述】：

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

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

【参考方案1】：

应该使用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

【讨论】：

使用UICollectionView时如何添加边框线？

@jsloop 这应该是另一个详细的问题，因为可以有很多方法和许多预期结果。

【参考方案2】：

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