Expandable View Part2
In my previous write up, I have covered how can you create a nice collapsible view. In this blog, I am taking that approach to solving a situation when we have multiple collapsible views.
In this image, we have three views that can be collapsed and expanded independently from each other.
Steps to achieve this behavior
- To target small screens we have to make sure that the container view for these images should support scrolling behavior and for that, we have to start from a scroll view and adding its content view. This is a very nice article, if you are confused about how to get the scroll view working in your view.
- Add stack view to hold those three views(I like stack views because it helps in hiding or removing a view from the view heir-achy seamlessly).
- Next, add three UIViews and changed their types to `ExpandableView`(since that is the type of our expandable view). It’s better to create a reusable testable view and use it whenever you see there is code duplication. An important point to remember here is that make the height constraint of these views to `default high(750)` and depending upon your height value set it to its maximum height, for example, I had fixed its height to ≤200.
That’s it. We are almost done.
Lastly, we want to tell our stackview to expand and collapse based on the changes in its subviews. I have achieved it by calling `self.stackView.layoutSubviews()`. Please let me know if there is any better way to do that.
That’s about it. Let me know if there are any better of achieving this behavior.
You can find my code on Github.