Stack View Tutorial

Prior to iOS 9 when using Auto Layout it requires the creation of a lot of constraints, even when using relative simple user interfaces. In iOS 9, Apple introduces the Stack View, which will automatically create Auto Layout constraints for each subview that's added to it. In this tutorial we will create a vertical Stack View containing three subviews. This tutorial is made in Xcode 7 and for iOS 9.

Open Xcode and create a new Single View Application. For product name, use IOS9StackViewTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and make sure only iPhone is selected in Devices.

Go to the Storyboard. Drag a Label from the Object Library to the top of the main View. Double-click the Label and set the title to "Swift". Drag an Image View from the Object Library and place it below the Label. Next, drag a Button from the Object Library and place it below the Image View. Download the image and add it to the Project. Select the Image View and go to the Attribute Inspector. In the Image View section select the Apple_Swift_Logo.png image in the Image field. In the View section set the Mode to Aspect Fit.


Finally, drag a button from the Object Library add place it below the Image View. Double-click the button to set the title to "Start Coding". The Storyboard will look like this.

Hold down the Ctrl key and select the three objects in the main View. Select the Stack View button in the bottom-right corner of the Storyboard.

Now the Stack View is created the only thing that needs to be done is to set the Auto Layout Constraints. Select the Stack View and select the Pin button. Set the top constraint to 50 and choose "Add 1 Constraint".


Choose the Align menu and select "Horizontally in Container". Choose "Add 1 Constraint'.

It may be needed to update the frames, Choose the "Resolve Auto Layout Issues" button and select "Update Frames".

It is also possible to change the spacing of the object within the Stack View. Select the Stack View and go to the Attribute Inspector. In the .. section change the Spacing Value to 20. 

Build and Run the Project. Rotate the Device in the simulator and you will see the Stack View is properly aligned in both orientations.

You can download the source code of the IO9StackViewTutorial at the ioscreator repository on Github.