In iOS 9 Apple introduces a new UIStackView, a new class that leverages the power of Auto Layout. UIStackView allows you to lay out a collection of views in either a column or a row without having to add layout constraints to each view.

In this tutorial, I will show you here how to create animations with stack views. In this post on Auto Layout and Core Animation, I have already demonstrated how to animate views that have layout constraints. Remember, when using Auto Layout you are not allowed to modify the view frame. Please, notice that Xcode 6 has a bug that Xcode 7 current build seems to solve. Indeed, if you are using Xcode 6 and try to modify the frame of a view that has layout constraints, the frame changes without a problem (but this should not be possible). In Xcode 7 (as it was previously in Xcode 5), the frame is not modified. This is the correct behavior.

Stack views should behave in the same way. If a view is contained in a stack view and you try to modify the view frame, it should not change. So, how do you animate the frame of a view within a stack view?

When you use a stack view, you are responsible for the layout (position and size) of the stack view in the container. Then, the stack view manages the layout and size of its content. Views contained in the stack view are called arranged views.

Let\'s build an example. Launch Xcode 7 and create a Single View Application. Open the Main storyboard and add 2 views to the view controller\'s view. Set the size of one of them to 100x100 and the size of the other one to 200x100. Center them vertically in the viewcontroller\'s view and make their edges touch as shown in the following picture.

Add a button at the bottom of the view controller\'s view and add auto layout to the button so that it remains horizontally centered and 20 points from the bottom edge of the container.

To keep the two views in the position shown in the previous picture, we should add constraints to each of them. But instead, select the 2 views and choose in the Xcode menu Editor -> Embed In -> Stack View. Alternatively, you can also press the new button Stack at the bottom of the Storyboard, as highlighted in this figure.

When adding the stack view, Xcode 7 recognizes that the 2 views are organized horizontally and therefore adds a horizontal stack view. Now, since we are responsible for the position and size of the stack view in the container view, we need to add auto layout to it. So select the stack view in the view hierarchy of the storyboard as shown here.

Now, add the width and height constraints to the stack view (see next figure).

Additionally, add two constraints in order to center the stack view horizontally and vertically in the container (see next figure).

Now, that we have everything in place, I want to create an animation that changes the width of the two views. Since they are in a stack view and the stack view distribution is set to fill, I can generate this animation by simply animating the width of one of the two views. As I mentioned previously, we cannot change the width of the view, because that would be equivalent of changing the view frame. If you try to do so, you will see no animation.

So instead, let\'s add the width constraint to the view with size 100x100 (the left view). Then, add the following outlet to the ViewController class.

1 @ IBOutlet var widthConstraint : NSLayoutConstraint !

Let\'s also add another property that we will use later for the animation:

1 var compressed : Bool = true

Finally, add the following method to view controller and connect it to the button:

1 2 3 4 5 6 7 8 9 10 11 12 13 @ IBAction func animateConstraint ( ) { UIView . animateWithDuration ( 3.0 , delay : 0.0 , usingSpringWithDamping : 0.3 , initialSpringVelocity : 10 . 0 , options : . CurveLinear , animations : { ( ) -> Void in self . widthConstraint . constant = ( self . compressed == false ) ? 100 . 0 : 200 . 0 self . compressed = ! self . compressed self . view . layoutIfNeeded ( ) } , completion : nil ) }

Connect the outlet with the width constraint and the previous action to the button. Run the project and you should see something like this.

Conclusion

In this Xcode tutorial on Core Animation, I showed you how to create an animation with stack views. If you’re interested in learning more about how to use the Core Animation framework to create innovative iOS apps, take a look at our other Core Animation tutorials or attend one of our Advanced iOS trainings (http://training.invasivecode.com).

Keep innovating,

Geppy

Geppy Parziale (@geppyp) is cofounder of InvasiveCode (@invasivecode). He has developed iOS applications and taught iOS development since 2008. He worked at Apple as iOS and OS X Engineer in the Core Recognition team. He has developed several iOS and OS X apps and frameworks for Apple, and many of his development projects are top-grossing iOS apps that are featured in the App Store.

(Visited 1,010 times, 1 visits today)