In the past, iOS page layout was relatively traditional, and most people used Frame or AutoLayout for layout. After iOS9, UIStackView was introduced. UIStackView is a control for linear layout that can automatically manage subview layout and automatic filling. It draws on the front-end layout algorithm Flexbox and can easily implement various page layouts.
Although UIStackView is no longer a new control, many students still do not use it. Sometimes you need to modify other people’s code and see a lot of flaws in the messy layout code. So this is also the purpose of writing this article. I really recommend everyone to use StackView, which can get you twice the result with half the effort, and the time saved is not worth it.
Back to the topic, whether we use Frame or AutoLayout for layout, we need to set the position and size of all controls. Frame needs to specify the position layout, and AutoLayout needs to specify the constraint layout; and the UIStackView layout method highlights its advantage in that it does not require settings. Arrange the position and size of views (i.e. subviews) (not necessary), but automatically complete the layout through their own arrangement and distribution. In comparison, using UIStackView is more efficient. We can quickly complete various layouts by nesting UIStackView.
UIStackView layout ideas
The original intention of UIStackView is to simplify the interface layout and is suitable for laying out a collection of views in columns or rows.
UIStackView uses AutoLayout to position and size its arranged views. UIStackView aligns the first and last arranged views with their edges along the stack axis.
In a horizontal stack, all subviews are laid out horizontally from left to right. The left side of the first subview is aligned with the left side of the UIStackView, and the right side of the last subview is aligned with the right side of the UIStackView.
In a vertical stack, all subviews are laid out vertically from top to bottom. The top of the first subview is aligned with the top of the UIStackView, and the bottom of the last subview is aligned with the bottom of the UIStackView.
StackView will fill and arrange the views according to its own layout rules.
distribution:
- fill: Fill according to anti-stretch and compression priority (default stretches the first arranged view)
- fillEqually: The padding size is the same in the alignment direction (i.e. the same width for the horizontal layout and the same height for the vertical layout)
- fillProportionally: Fill proportionally to the size of the arranged view
- equalSpacing: Fill the space between views evenly
- equalCentering: Fill based on the same spacing between the center points of the arranged view
alignment:
- fill: Fill the arranged view to the available space of the StackView
- top: Arranged at the top of the StackView (similar to leading)
- bottom: Arrange at the tail of the StackView (similar to trailing)
- center: Arrange in the middle of StackView
- firstBaseline: Arrange with first baseline
- lastBaseline: Arrange based on the last baseline
If you need to set the spacing between the arranged views, you can set the space attribute. If the spacing between the arranged views is different, you can use the method to specify the spacing of an arranged view (this method is available for iOS 11 and above), or use a useless view to insert it in Replace the gap between views. This view is only used as a spacing (this method is often used when using xib and Storyboard, you can refer to it).
When you really understand these layout ideas of UIStackView, you will know that it can help you solve many tedious layouts. (Such as a changeable bottom action bar, a row of controls of different sizes, etc.)
From the above layout ideas, it is not difficult to see that in fact, we only need to determine the arrangement direction of the StackView, as well as the arrangement and alignment methods, so that we can roughly lay out the entire arrangement view, and then adjust the size according to different views. can be adjusted as well as the spacing.
Use UIStackView to automatically layout subviews. You only need to pay attention to each subview’s own size.
Usually there are many states, and in each state, the constraints of the control will change. If you use Frame layout, it will be very cumbersome when the layout is easy to change. There are a lot of layout codes, and it is difficult to maintain when there are many states. The same is true for AutoLayout, which requires writing a lot of updated layout constraints.
At this time, borrowing the idea of UIStackView, we can easily implement this layout. Each control only pays attention to its own size and does not depend on other controls. It is displayed when needed and hidden when not needed.
Usage scenario 1
Multiple UI elements horizontally. Then the display and hiding of UI elements are dynamic. If you use ordinary Masonry constraints, it will be processed. You need to update the constraints of all UI elements in the corresponding states according to the different states issued by the backend. But If using UIstackview. Only very little code is required.
The reference code is as follows: The final code that combines UIstackview to achieve the effect of equal distribution of three menus is as follows. You will find that there is no additional constraint code for the menu-encapsulated view SFImageTextView.