5

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: enter image description here

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.

enter image description here

Declan McKenna
  • 4,321
  • 6
  • 54
  • 72
PMT
  • 1,082
  • 8
  • 18
  • If lets say there are 8 VIPs, then what should actually happen? Like should the images/names be scrollable? Cause if you try and display 8 all together, the would appear quite small. Or is the overlapping fine? How should they appear will answer what you should do. – Rikh Mar 20 '17 at 16:25
  • My approach would be building a custom view with a StackView that adds/removes imagesViews based on it's size and automatically adds/changes the "+X" view. when necessary. – GetSwifty Mar 20 '17 at 17:07
  • @Rikh in case of 8 VIP's it will look like the 6th cell example, with the circles overlapping a lot. Should I do what -PEEJWEEJ suggested? – PMT Mar 20 '17 at 17:59
  • @PEEJWEEJ I have never work with StackViews, is it doable to handle dynamic and negative spacing between views? I will try this approach, thanks a lot :) – PMT Mar 20 '17 at 17:59
  • `UIStackView` are only from iOS 9 onwards, if you support iOS 8, then you will have a problem. Otherwise, if it solves your problem then thats the best solution, I myself haven never used `UIStackView` so I can't be of assistance :) . – Rikh Mar 20 '17 at 18:03
  • StackViews are pretty versatile. You can even put it in a scrollview if that's necessary. I would recommend messing around with it a bit. Though I would designing it to not need negative spacing. Usually if you need it, you're doing something wrong. :) – GetSwifty Mar 20 '17 at 18:04
  • I don't think `UIStackView` will work for you, if I understand what you're trying to do. "Negative spacing" won't work as needed. – DonMag Mar 20 '17 at 18:35
  • @DonMag how can I do the overlapping images? CollectionView? – PMT Mar 20 '17 at 20:04
  • @PMT - I may have spoken too soon... `UIStackView` may indeed be the way to go, it just takes a little "massaging." Take a look at my answer below. – DonMag Mar 20 '17 at 21:00

2 Answers2

5

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.

enter image description here

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.

DonMag
  • 69,424
  • 5
  • 50
  • 86
1

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,

vilanovi
  • 2,097
  • 2
  • 21
  • 25
  • 1
    I can have the numbers of participants, so I have control over this, but it will vary for each meeting. The thing is that the space available for the participants will always be the same 70% relative to the cell width (full screen width, so it will vary for different devices), but what worries me is the space between the circles, which will change depending of the number of participants. So I think I will try with then StackView approach that you suggested, thanks :D – PMT Mar 20 '17 at 18:10