What's the best approach to display a variable number of images within a TableViewCell in a xib file?

Question

I am building an app about meetings where I want to show a preview of the VIP participants in each meeting cell.

These participants are not clickable nor scrollable, the only purpose it's to quickly see them at a glance.

The problem is that the view is very dynamic:

• VIP's appear with image or initials
• The rest of the attendees is just a number
• if >5 VIP's, the circles start going together overlapping (spacing goes smaller)
• if 9 VIPs, big wrapping circle “All VIPs in Attendance"

This is how it will look:

What should I do?

• CollectionView (seems over-kill as I am not interested in any kind of interaction with the images)?
• StackView?
• Images (and change constrains programmatically)?

NOTE:

These is just one kind of Table View Cell, but we have a lot more variations, so we are building the custom cells in xib files. Xcode doesn't allow me to add a Collection View Cell in to the Collection View within the xib.

Answer 1

Interesting task - I'm sure there are numerous approaches, but here is one using UIStackView plus some on-the-fly calculations.

The idea is to define a maximum gap between views; a maximum width for all views; calculate the actual gap needed, and then let UIStackview handle the actual positioning.

Certainly not every feature you need, but should get you going in the right direction.

You can see/download the source for this here: https://github.com/DonMag/ScratchPad

Look at the Swift3/SpreadingViews sub-project for this example.

Answer 2

The problem with scrollable views (UIScrollView based views as UICollectionView), is that you will have to deal with the scroll, or pre-compute the width of your content, which is not always easy. For this reason, if you don't want to have scrollable content, I'd not use a UICollectionView, neither any UIScrollView based view.

Then you have the option to go with an UIStackView. Stack views are great to "append" multiple views and create some kind of "pile" of views in a very easy way. However, if you don't control how many items you need, you will overpass the boundaries of your container view.

Therefore, this is what I'd do:

"Fixed container view width" case: If your container view (your cell) has a fixed width (that never changes), I'd manually add as many UIImageViews I want to support in the XIB itself, and then hide/unhide them depending on the number of items I want to display.

"Variable container view width" case: If your container view (your cell) has a variable width (that changes depending on the screen size or whatever other factor), then you will have to compute in any case (do the math!) the amount of items you are able to display within the width you have available. Then, you can choose between using an UIStackView or adding your views & constraints manually to your container view.

Does what I say make sense?

Thanks,