如屏幕截图所示,为 iOS 创建每行两列的网格视图的最佳方法是什么?
我目前正在使用带有静态单元格的 tableview,但 UI 在某些 iPad 上会失真。另外如何最好地安排网格边界?目前我使用中心的图像视图,以及带有图像视图的水平单元格的新单元格。但这感觉不对。
如屏幕截图所示,为 iOS 创建每行两列的网格视图的最佳方法是什么?
我目前正在使用带有静态单元格的 tableview,但 UI 在某些 iPad 上会失真。另外如何最好地安排网格边界?目前我使用中心的图像视图,以及带有图像视图的水平单元格的新单元格。但这感觉不对。
这应该用一个UICollectionView
,它有一个特定的委托,UICollectionViewDelegateFlowLayout
这使得它很容易达到那个外观。
步骤1
添加UICollectionViewDelegateFlowLayout
你的UIViewController
,比如:<#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
这看起来像是 UICollectionView 的工作!(将您的 UITableViewDataSource 协议方法更改为它们的 UICollectionViewDataSource 等效项应该不会太难。)