Creating Grid Layout using UICollectionView

Question

I'd like to build a collection view layout something similar to grid. With

1. Row containing sub rows
2. Columns containing sub columns
3. Rows with variable height.
4. Scrolling should be possible in both directions.
5. It should be possible to add/delete row/columns

I tried using collection flow layout but It started becoming complex. Building a custom layout seems a better option to me.

A few problem faced by me :-

1. Data structure(Basic class hierarchy) to store grid information(layout only) that supports easy addition/deletion of rows and columns.
2. Calculating height of content view given that the rows can be of variable size.
3. Calculating row range that will lie within the visible rect. Right now i to have collect the height information for all the rows and store them in an array and further calculate the content size height. Also to decide which all rows lie within the given rect, I have to apply a predicate. Doing so on every call to "layoutAttributesForElementsInRect" also drops the fps when the no of rows is 500+ still acceptable.
4. I tried maintaining an NSSet of layout attributes for visible rows and columns and purging/adding attributes as rows/columns move in and out. but this was more slower the creating each and every attributes for visible items. Also What design patterns are best suited for grids?
5. Last but not the least will it be possible to design something like this with UICollectionView?

Any ideas on how to process with this,

thanks :)

Answer 1

So, I had your same problem and I had solved in this way (swift example).

In this example, cell are drawn squared, 2 columns x N rows.

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
    }

}