A Brief Introduction To UIStackview

In this blog, I have given a brief introduction about UIStackview introduced in iOS 9, and also explained how can we use UIStackview

iOS 9 has introduced UISTACKVIEW which has made complex UIDesign much easier and saved developer from implementing the number of constraints for giving equal spacing, proportional spacing etc.

According to the requirement, iOS 9 has provided both vertical stack view and horizontal stack view. To create a stack view drag and drop a vertical stackview or horizontal stackview as required.

Now just drag and drop the  UI elements in the stackview according to your requirement. The main benefit we get by using UIStackview is that now we don't have to implement constraints to the UIElements inside StackView but we just have to apply constraints to UIstackview, other elements inside it will automatically get adjusted as per our requirement. From attribute insector we can choose how we want inside UIElements to be adjusted for eg. we can choose fill, proportional, equal spacing etc

UIStackView Alignment

On the basis of an axis, we can choose how to align the elements into available space. If we select vertical axis, then we can align elements to the leading, trailing and center of the stack view and when we select horizontal axis, then we can align elements to top, center or bottom.

UIStackview properties

Here are some of the properties that define the how the stack view layout its content.

1. axis - stack view’s orientation can be determined by axis property, its orientation can be vertical or horizontal.
2. distribution - a layout of the arranged views can be determined to be determined to buy this property, along with the stock’s axis
3. isLayoutMarginsRelativeArrangement - we can determine whether the stack view lays out its arranged views relative to its layout margins.
4. spacing - this property is used to judge the minimum spacing between arranged views.
5. alignment - this property determines the layout of the arranged views perpendicular to the stack view’s axis
6. isBaselineRelativeArrangement - this property is used to calculate the vertical spacing between views from baselines.

Thanks.