Correct way of layouting subviews

[danabeknar]

Hey @ekazaev!

I'm building a chat application on top of the Example project and trying to implement a view with following subviews (please see an attached image):

1. Author label
2. Image
3. Reactions
4. Date

These subviews are added as an arranged subview to a vertical UIStackView, which is added as a single subview to a let's call it MainView and used like TextMessageView or ImageView (in the example project). Another nuance is tapping on a reaction opens a reactions popup. Tapping a reaction on the popup leads to a new reaction on cell reactions, hence increasing the height and width of the cell in runtime.

Сonsidering things I said:

1. Do you think using UIStackView the right way?
2. What is the correct way of setting constraints where the cell has multiple views vertically and can increase dynamically?

As far as I understand I need to set the width (based on viewPortWidth) and height constraint of a subview in setupSize method, but in the example project all views (TextMessageView/ImageView/URLView) have only one subview. That's why I'm struggling with multiple vertical views.

Thank you! Let me know if you need any additional information.

[ekazaev]

@danabeknar hi

Thank you for the question.

There is nothing wrong with using UIStackView if you feel that it is suitable for your case. I use them everywhere.

When it comes to reactions i would suggest to use another container view above ImageView or what ever where you allocate your reactions if you have some. And if youll call the reload of such cell - the new size will be calculated using autolayout and cell will expand. Set all the constraints like it is a normal view. You may need to use viewPortWidth to limit your internal views correctly. The reason behind is that the cell doesn’t know where it appears but it has to tell the collection layout its preferred size. For example for textview such constraint needs to be set so it breaks the line at the right place. There is no such requirement for vertical constraint.

Here is an example from one of the apps that is using ChatLayout. The reply and the reaction are actually placed in a container view above text view. So such container view can be reused with other type of cells like image view.

FullSizeRender.MOV

[ekazaev]

@danabeknar I close this issue. Feel free to reopen if you need more info about this case