使用 UICollectionView 创建网格布局

Question

我想构建一个类似于网格的集合视图布局。与

1. 包含子行的行
2. 包含子列的列
3. 高度可变的行。
4. 应该可以双向滚动。
5. 应该可以添加/删除行/列

我尝试使用集合流布局，但它开始变得复杂。构建自定义布局对我来说似乎是一个更好的选择。

我面临的一些问题：-

1. 数据结构（基本类层次结构）存储网格信息（仅限布局），支持轻松添加/删除行和列。
2. 在行可以是可变大小的情况下计算内容视图的高度。
3. 计算将位于可见矩形内的行范围。现在我要收集所有行的高度信息并将它们存储在一个数组中并进一步计算内容大小高度。另外，要确定哪些所有行都位于给定的矩形内，我必须应用一个谓词。每次调用“layoutAttributesForElementsInRect”时这样做也会在行数为 500+ 仍可接受时降低 fps。
4. 我尝试为可见的行和列维护布局属性的 NSSet，并在行/列移入和移出时清除/添加属性。但这在为可见项目创建每个属性时更慢。还有什么设计模式最适合网格？
5. 最后但并非最不重要的一点是，是否可以使用 UICollectionView 设计类似的东西？

关于如何处理的任何想法，

谢谢:)

Answer 1

所以，我遇到了同样的问题，我已经以这种方式解决了（快速示例）。

在此示例中，单元格绘制为正方形，2 列 x N 行。

class CustomViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout

    @IBOutlet var collectionView: UICollectionView! 

    override func viewDidLoad() {
      super.viewDidLoad()
      collectionView.delegate = self;
      collectionView.dataSource = self;
    }

    //MARK: - Collection view flow layout delegate methods -

    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
      let screenSize = UIScreen.mainScreen().bounds
      let screenWidth = screenSize.width
      let cellSquareSize: CGFloat = screenWidth / 2.0
      return CGSizeMake(cellSquareSize, cellSquareSize);
    }

    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAtIndex section: Int) -> UIEdgeInsets {
       return UIEdgeInsetsMake(0, 0, 0.0, 0.0)
    } 

    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAtIndex section: Int) -> CGFloat {
       return 0.0
    }

    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAtIndex section: Int) -> CGFloat {
       return 0.0
    }

}