icon-image
Welcome to Innominds Blog
Enjoy our insights and engage with us!

Stack Views in iOS

Introduction

Apple Inc, introduced a powerful feature Stack Views from IOS 9, XCode 7 to make developer's life easy while creating UI. Using Stack Views, we can arrange all UI objects in either Rows or Column.

If we are using Stack Views we can shelve using auto layout constraints.

After reading this blog you will be able to learn following concepts.

  1. What is Stack View?
  2. Where to use Stack Views?
  3. How to use Stack Views?
  4. Usage of Stack Views?

What is a Stack View?

Stack View provides a streamlined interface for laying out a collection of views in either a column or a row. For views embedded in a Stack View, they are usually known as Arranged Views.

If Views are arranged in a row it is called Horizontal Stack View. If views are arranged in a column it is called Vertical Stack View.

Picture1-1

Where to use Stack View?

If you want to arrange views in a particular order, then the Stack View is really helpful without using any auto layouts. Inner views can be a combination of anything. ex: Buttons, Labels, Image views etc.

How to use Stack View?

We have two ways to use stack view in Xcode:

  1. You can select a Stack View either vertical or horizontal from the Object library, and place it into the storyboard. You then drag and drop view objects such as labels, buttons and image views into the Stack View.
  2. Also, you can use the Stack Views in the auto layout bar. For this approach, you select two or more views and then choose the Stack option. Then the Interface Builder embeds the objects into a Stack View and resizes it automatically.

Let’s create a Register Screen with Stack Views.

Create Xcode Project

Add Username, Email, Password text fields in the storyboard. Add Register button

1

Select all Subviews

2

Select embedded in stack option from layout section

3

Don't panic, you are on the right path. You need to adjust Stack View. Add constraints for Stack View. I have added as follows:

4

Add constraints. Now Stack View looks as follows:

5

Select Stack View alignment settings. And select Fill option to fill views in Stack View

6

7

For spacing between views select Distribution and make equal spacing. Also, you can add space using spacing option below to Distribution. By default, it is 0

8.0

8.1

 

8.2

Now UI looks as follows:

9

If you add another text filed in Stack View. It will automatically adjust UI as follows:

9.1

You may download the sample project from here

Summary:

In this sample, I have created a register screen with Stack Views. You can add buttons, text fields easily without changing layouts. It will auto adjust. Stack View simplifies developing user interfaces. Especially if you are using repeated elements or similar views Stack Views will come handy.

Topics: Mobility

Krishna Prakash Narasannagari

Krishna Prakash Narasannagari

Principal Engineer - Software Engineering

Subscribe to Email Updates

Authors

Show More

Recent Posts