对于每行两个卡片单元的UI，哪种布局更好? [英] What layout is better for a UI with two card cells per row?

问题描述

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

What is an optimal way to create a grid view for iOS with two columns per row as shown in the screenshot?

我目前正在使用带有静态单元格的tableview，但是UI在某些iPad上会变形.另外如何最好地布置网格边框?目前，我使用中心视图的imageview，并为具有imageview的水平视图使用新的单元格.但这感觉不对.

I am currently using tableview with static cells, but the UI gets distorted on some iPad. Also how best to arrange the grid border? Currently I use imageview of center ones, and a new cell for the horizontal ones with an imageview. But this does not feel right.

推荐答案

应使用UICollectionView进行，它有一个特定的委托UICollectionViewDelegateFlowLayout，可以很轻松地达到那种外观.

That should be made with an UICollectionView, it has a specific delegate which is UICollectionViewDelegateFlowLayout that makes it very easy to reach that appearance.

第1步

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

第2步

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

The amount of cells per row is calculated based on the amount of cells that fit the UICollectionView width. Therefore, having cells with half the width will fit 2 cells per row.

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值，也可以减去常数值.

You can even make it a little smaller than half the screen, by multiplying values like this: (collectionView.frame.width / 2) * 0.98, you can also subtract constant values.

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

You may need to set collectionView.minimumInteritemSpacing = 0 since this attribute default value is 10.0

文档: UICollectionViewFlowLayout

这篇关于对于每行两个卡片单元的UI，哪种布局更好?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！