What is the best approach to display a variable number of images in a TableViewCell in an xib file?

Question

I am creating a meeting app where I want to show a preview of VIP members in each cell of the meeting.

These participants are not clickable and scrollable, the only goal is to quickly view them at a glance.

The problem is that the view is very dynamic:

• VIP appears with image or initials
• The rest of the participants is just a number
• if> 5 VIP, circles begin to come together (distance less)
• if 9 VIPs, a large circle for wrapping "All VIPs in attendance"

Here's how it would look:

What should I do?

• CollectionView (seems to be too killed because I'm not interested in any kind of interaction with images)?
• Stackview
• Images (and changing restrictions programmatically)?

Note:

This is just one kind of Table View Cell, but we have a lot more options, so we create custom cells in xib files. Xcode does not allow me to add a View Cell collection to a collection view in xib.

Answer 1

An interesting task - I'm sure there are many approaches, but here you can use UIStackView plus some on-the-fly calculations.

The idea is to determine the maximum gap between views; maximum width for all types; calculate the required gap, and then let UIStackview handle the actual positioning.

Of course, not every function you need, but you need to go in the right direction.

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

Take a look at the Swift3 / SpreadingViews subproject for this example.

Answer 2

The problem with scrollable views (UIScrollView views as UICollectionViews) is that you have to deal with a scroll or pre-calculate the width of your content, which is not always easy. For this reason, if you do not want to have scrollable content, I would not use UICollectionView, nor any view based on UIScrollView.

Then you have the opportunity to switch from UIStackView. Stack views are good for "adding" several views and creating a kind of "heap" of views in a very simple way. However, if you do not control the number of items that you need, you will overcome the boundaries of your container view.

Therefore, this is what I would do:

"Container size with fixed container . " If your container view (your cell) has a fixed width (which never changes), I would manually add as many UIImageViews that I want to support in XIB and then hide / show them depending on the number of elements I want to display.

"Width of a container view with a variable width . " If your container view (your cell) has a variable width (which varies depending on the screen size or any other factor), then you will have to calculate in any case (do the math!) The number of objects that you can display within the width available you. You can then choose between using UIStackView or manually adding your views and constraints to the container view.

Does what I say make sense?

Thanks,