How to configure a UICollectionView Cell Size per Size Class?

Tristan Warner-Smith picture Tristan Warner-Smith · Oct 21, 2014 · Viewed 9.5k times · Source

I'm finding friction when trying to create responsive / adaptive UICollectionViewCells in the UIStoryboard.

The issue I'm seeing is that you don't seem to be able to set the Cell Size per Size Class and I'm trying to ascertain the right approach to this. I've designed the cells to adjust to their containers, so that they should autosize regardless of size class. This mostly works in that if I change the size class, select my cell view and do Update Frames then they all resize to fit their new size. However it's a one shot deal, if I go back to the Any/Any size class then I'm still seeing that resized version.

Here's what I'm aware I could try:

  • Create multiple cells, with fixed dimensions, one per size class and in the Storyboard view. I could then only use the right one at runtime but I could then see them at design time.
  • I could create a collection view Per Size class, each one only being installed for that size. This would work, but would be a pain to manage the multiple UICollectionViews
  • Create my interface and/or constraints programmatically (losing visibility of the design).

I'm hoping this is a solved scenario and I'm just missing something, but I'm aware that it could be that the IB tools don't match the code at this point.

Answer

Tristan Warner-Smith picture Tristan Warner-Smith · Oct 27, 2014

The solution I came up with was just to implement the UICollectionViewDelegateFlowLayout and implement the sizeForItemAtIndexPath method. This means that the cell dimensions can be set to match the available Size Class dimensions.

This still isn't ideal as you can't see the changes in the storyboard and you can't create a universal design and see it in each of the different formats.

I'm still hoping someone has a better option.