vendredi 31 juillet 2015

Best way to make a grid of views inside a UITableViewCell

I have a UITableView which cells contains a grid-style of subviews placed in a XIB. Today they are arranged with auto-layout and constraints. These subviews may be of a dozen of types, some of these types have a fixed width, other have to fill the empty space, all have a fixed height. Each cell displays a particular set of these types based on its needs.

The image below show 3 cells with their subviews

enter image description here

The point is that architecture requires a lot of rules to updates the constraints and is not easily maintainable when a new subview type is added. Using only a XIB per cell in that case doesn't seem to be the best choice as the initial interface builder layout is just one of the multiple possible arrangement, and the cell has to do a lot of work to adapt. Also I would prefer a solution which doesn't require to touch the previous subviews types when a new one is added.

I've considered the following solutions :

  • Insert a collectionView inside the UITableViewcell, and transform the subviews to UICollectionViewCells :

    • do you think this may be a performance issue to have so much collectionViews on the screen ? (we may have up to 10 cells simultaneously on screen, each with 1 to 10 cells)
    • Considering the UICollectionViewCells would not even ever scroll inside the UITableViewCell isn't that a little overload to use a collectionView in that case, just for arranging a set of views ?
  • Use the new UIStackView

    • the stackView is only compatible with iOS 9 so this means we have to maintain 2 versions of the code for a while
    • the stackView seems to be a little complicated to place each subview pixel perfect
  • Make an individual XIB for each subview type and make the corresponding UIView to compute its own constraints based on its neighbours, making thus a custom grid system

    • this is a little bit too a "custom" solution, therefore more difficult to maintain and understand for other developers
    • it still requires to make a lot of changes if in the futur it will be a fourth column of subviews for example (= it's not a real grid system which would adapt nicely)

Which solution would you use ? Do you have other suggestions ? Thanks

Aucun commentaire:

Enregistrer un commentaire