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

Question

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



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

Answer 1

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

第一步

添加 UICollectionViewDelegateFlowLayout在您的 UIViewController ，例如:<#Your View Controller#> : UICollectionViewDelegateFlowLayout
第二步

每行的单元格数量是根据适合 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