top of page
Writer's pictureArjav Dave

How to use Stack Views in iOS

Updated: Jul 17, 2022

I know Stack Views have been available since iOS 9 but I wanted to write an article about it anyway, since I really appreciate how easy they make the designing process.


In the early days of iOS UI Development there were Struts and Springs with all its strenuous and stressful ways to organise views. You would have to use autoresize masks and sometimes even resort to code to get the complex views provided by the fancy designers in your team.


To replace this dreadful phenomenon auto-layouts came into picture with iOS 6. This was a huge progress in terms of UI development. You can provide constraints between sibling views or add constraints relative to the superview. The complex views could be created with relative ease. But auto-layout has it’s own issues. Even though it reduces the efforts to design complex issues a lot of constraints still needs to be added. We will see an example below.


Another major improvement in UI came with support for stack views with iOS 9. As the name suggests you add views to a stack view and it will stack them horizontally or vertically. It’s a lot more flexible than it sounds.

We will have a look at an examples in this article which will show us the power of stack views.

Example: Rectangles in Portrait & Landscape with Stack Views


We will recreate the screen from this tutorial. Here is what the final result will look like. A minimum of 25–30 constraints are used with auto layout while only 4 constraints are needed with stack views.

Final Landscape & Portrait Screens

First of all in your view controller add a Vertical Stack View in your View and assign 20 on all sides as a spacing for the nearest neighbour for that stack view. Let’s call this a Parent stack view.

The only 4 constraints required

NOTE: These are the only 4 constraints we will be adding.

Secondly, go to the Attributes Inspector and set Distribution to “Fill Equally”. This is needed so that subviews when added are of equal heights.

Set Distribution to “Fill Equally”

Next add a single Horizontal Stack View (let’s call it Row) inside the main Vertical Stack View and mark it’s Distribution as “Fill Equally” as well. The Row as the name suggests holds a row inside the Parent.


Next add a Vertical Stack View inside the Row. We can name this Vertical Stack View as Container. A single Container will have an image and a label inside it along with it’s own separate colour. To differentiate the Container set a background colour to System Purple Color or whatever you like. We will add more containers later on.


Finally, add an image and a label to the Container. You might get some conflicts in the constraints which we are going to resolve next. We don’t want the label to be stretched vertically rather the image should be stretched. To accomplish this select the Size inspector for the label and mark Vertical Content Hugging Priority to Required or anything higher than that for the image as shown below. All the conflicts should now be resolved

Vertical Content Hugging Priority


Set any image you like for the image view and set the content mode as Center for the image in Attributes inspector.

Your view controller will look something like below:

View Controller


Add Spacing


It’s mainly missing some spacing and margins. Select Container stack view and set the Spacing to 20 in the Attributes inspector. We also want to add some padding to the Container so that the image and the label don’t stick to the borders. Go to Size inspector and set the Layout Margin as Fixed from the drop down. Set the left, right & top margin as 20 and the bottom as 30. You can change these as per your preference.

View Controller after setting margin and spacing

Your view controller Structure should look like below

View Controller structure


Duplicate Views


Time to copy paste things. This is the beauty of Stack View. Since there are no constraints involved you can just copy past views without worrying about conflicts, warnings or errors about the UI.

Select the Container and just copy and paste it. You will achive the below result:

Copied the Container


Lastly copy the Row and paste it. We are getting so close to our end result.


Change the background colour of each Container to get a more beautiful view.

Differnt Background Colours for each Container

When you rotate it in the landscape mode a nicely scaled screen is visible. To polish this page change the image and label as required.

I just cannot stress enough easy the stack views have made my life.


Advantages


As we have seen the Stack Views are really helpful when the views need to be stacked.

  1. One of the main advantages of using stack view is you can copy paste it without the need to set the constraints except the parent stack view.

  2. Stack Views are also very much easily integrated inside a scroll view. Only the constraints for the parent stack view needs to be set.

  3. If you remove a view from the middle of a stack view the other view auto arrange themselves. This is a huge plus compared to constraints.


Disadvantages


Personally I didn’t find any major drawbacks or disadvantages of using a Stack View. The only time I wouldn’t use a stack view is if there are too many overlapping elements in the view or a screen. In such cases Stack Views don’t help.


Conclusion


To conclude I am in love with Stack Views lately and have been using to design 99% of my views. They are very easy to use and are very much intuitive compared to auto-layout or even Swift UI. I am a bit pissed that Apple introduced it so late.


PS: Stack View are available in Android since the beginning in form of LinearLayout.


I am sure you will love my other articles:

87 views0 comments

Comments


bottom of page