Deep insight into Stack View

Introduction :  Apple has introduced this class to make the developer life easy. While working in a complex layout adding and removing constraints is very tedious task but after the introduction of this tool while working on complex layout it will be very easy to create complex UI. This is very powerful tool they have added in iOS development. Its very similar to liner layout in android but having much more control over it.

Power of Stack View :

• You can define how the subviews of stack view should be positioned.
• You can define how the subviews of stack view should be sized.
• You can define how much padding of subview element will be taking.
• You can define how much inter item spacing between subview will be.
• And the most and important thing is to manage the auto layout constraints for its all subviews.

Stack View manage the views constraints on the basis of these parameters:

1. Intrinsic Content size
2. Content hugging priority
3. Compression resistance priority

So we can say, using stack view in interface builder, it will support developer in three different ways like,

1. Easy to build
2. Easy to maintain
3. Lightweight

So I would say, start using stack view and use the constraints when it needed.

So we need to only give the size and position of the stack view and stack view itself responsible for managing its content.

As we all know most of the constraints we add on a view are relative to its parents or sibling so if one constraints is not satisfied may be there are chances that we have to remove all the constraints of super view and need to add again.

Lets start with very basic properties of stack view and then we will deep dive into it.

Main pillar properties of Stack view:

1. Axis

a. Horizontal : If your controls aligned in a horizontal fashion then wrap all controls in  Horizontal Stack view.

b. Vertical :If your controls aligned in a horizontal fashion then wrap all controls in  Vertical Stack view.

Stack view provide two axis for laying out our collection of views either vertical or horizontal

2. Distribution: This property helps the stack view to identify how the subviews of stack view laid out along its axis.

• . Fill : Fill property of stack view is responsible to fill complete space of stack view by the arranged subviews , and the space will be always filled along stack view axis. Stack view perform this thing by calculating content hugging priority of its arranged subviews.If some space is left that need to be fill then that space will be filled by arranged subview of stack view which having least content hugging priority.
• .FillEqually :  By using this property every single view will take same amount of space.
• .FillProportionally : This is very strong property of scrollview using this we can give proportional space to its views.
• .EqualSpacing : By using this property we can give equal space  as name suggest to its arranged subviews.
• .EqualCentering :

3. Alignment: Alignment give you power that how you want to align your controls it could be top or bottom or center.

4. Spacing: If you want to add some spacing between controls use this  property.

Animation : When you try to hide or show any control in an animation block its providing better effect than earlier.

How it works internally either is using auto layout or anything else to manage the ui content dynamically?

So yes, internally its using the auto layout to draw or create complex layout but its providing a high level of abstraction by which developer life will be very easy while working on complex layout. Stack view keeps the reference of its every subview we added in the form of arrangedSubview Array.

How to decide to use horizontal stack view or vertical stack view:

When you see that in your layout so many controls are laying out horizontally in same level so add these controls on horizontal stack view. Vice versa for Vertical.

We can also add number of stack views in top stack view. It could be either vertical or horizontal.

Drag and drop your controls on interface builder and stack view set the constraints of its arranged subviews.

So lets do some coding :

We are going to create a demo by using the power of stack view and adoptive autolayout.

1. So as per the screen shot we have four labels and one ImageView. In portrait mode, we want imageview on top and label will laying out below the image view. I am attaching the screen shot what i supposed to create when my application is in portrait mode.

2. When user rotate the device in landscape mode, I want this layout in different way refer the screen shot.

So if we will design to achieve our both requirement for portrait and landscape using Auto layout we need add some complex constraint  or we need to design separate view for landscape but using Stack view its very easy to create such design.

Lets start how to design this using Stack view. I am dragging the image view and four label as you can see in screen shot and your interface builder will look like this.

Now Question comes how to add Stack views on these controls.

There are two ways to do that.

1. First add stack view and then add controls over it.
2. Add control first then select control on which you want to add auto layout. In interface builder they have added a new button(Refer screen shot) to add Stack view.

Now stack view properties comes into the picture, they help you to decide the Size, Position, and Margin. Select any Stack view and go to attribute inspector and set the property as you want.

Use these four properties provided in Stack View to give the position,alignment and space between the controls.

Now as we have seen that we have created single view for landscape and portrait so how it will look different in landscape so for that In adaptive auto layout we have + button to configure the view properties different for different orientations.

Tap on plus button and for outer stack view set axis horizontal. So top stack view arranged its subviews in horizontal way , so when you rotate it will mange the views accordingly.

Conclusion : At last, I want to conclude that stack view is a kind of safe house where we need not to think about applying complex constraints .

Happy Coding 🙂