0

The title itself might a bit misleading and I believe the problem is best explained with an example.

Take Facebook's feed, for instance. Every item consists of the following:

  • Header (user's name, etc), static height
  • Main content (text, attachment), dynamic height
  • Footer (number of likes and a couple of buttons), static height

At a minimum, the main content has one of the following:

  • Title, optional
  • Textual preview, optional
  • Attachment (of variable height), usually an image, optional

So, a few possible combinations of parts:

  • Title
  • Title, text
  • Title, text, attachment
  • Text
  • Text, attachment
  • etc

I've come up with two approaches:

1. Sections for each post, cells for parts

Note: the UIKit-provided header and footer wouldn't do, as I need specific spacing between each item. Therefore, I'd use these to get the spacing needed.

Also, I'm using RxSwift. This approach breaks the simplicity of data binding to the table view, although there's always a more complex alternative.

2. Multiple cell types

Not sure. Separate cell type for each possible combination of the above? Seems like an overkill.

3. Single cell type

The easiest approach. But, considering all the optional parts, there's quite a few constraints to switch and tweak (depending on the attachment height). UIStackView is not an option evidently, since the attachment must take the whole screen width, whilst the other parts use custom padding on each axis.

I'm looking for an outside perspective here, mainly from those who happen to have solved a similar problem in the past. An example of code would also be lovely (especially if it's scalable).

Target: iOS 13+.

Will AutoLayout perform alright in each of these?
What approach would you use?

barely sociable
  • 16
  • 1
  • 4
  • 1
    *"`UIStackView` is not an option evidently"* --- take a deeper look at how stack views work. You can use a vertical stack view, constrained to the full width of its superview (the cell's contentView, for example), with **Alignment: Center**, and then constrain the Width of each arranged subview to the Width of the stack view itself. Using a stack view with subviews that may also be stack views is probably the right starting approach. – DonMag Mar 16 '22 at 14:07
  • I agree with @DonMag. Solve this using a vertical stack view in a single cell type. You can make the cell's height contingent on the content of the stack view. – Daniel T. Mar 16 '22 at 17:23
  • @DonMag, oh, okay. ‘ directionalLayoutMargins’ in this case wouldn’t work for default padding inside the stack, am I correct? UIKit spew quite a few warnings regarding ambiguous constraints last time I gave that a try (making one of the subviews ignore the insets). I didn’t set the alignment though. – barely sociable Mar 16 '22 at 23:24
  • I've built a basic prototype and the stack solution seems to be working out so far, although I've yet to test its performance. Thanks. – barely sociable Mar 17 '22 at 07:44
  • Did you try a collection view with a compositional layout? https://developer.apple.com/documentation/uikit/uicollectionviewcompositionallayout – Abdul Momen Apr 21 '22 at 09:21

0 Answers0