Swift Components Tour – Animating Autolayout

In this lesson

Back in the Swift Components Tour app, let’s talk about how to animate changes in autolayout constraints.

04:50 Swift 200
Kyle Roberts
Swift Guru at Large

Kyle's Series

Transcript

Tap on time to skip ahead

00:10

Hello, world. Kyle here with Brax.tv. Today we are going to talk about animating changes in Autolayout constraints. Just for reference, here’s the view controller that we’re going to be working in, the TextField’s view controller. As in the Swift Components Tour app, and in the code right now, I have a reference to a top text field height constraint, which is connected to this height constraint of the top text field. Let’s just say that our goal for this video is that each time this text field is edited, or I guess either of the text fields are edited, in any way, then let’s increase the height of the top text field height constraint just a little bit.

00:54

Here we are in this method, textFieldDidChange, which is a method that is called when either of the text fields are edited. Let’s just start this method. A very normal, bare bones animation block. UIView.animateWithDuration. Let’s set the duration to 0.3 seconds. We will press Enter here on the block part so that it will autocomplete the block for us. In the code, let’s just try setting the self.topTextFieldHeightConstraint.constant. Let’s add five pixels to that each time. Hopefully what we’re looking for is that each time we change the text in either of the text fields that the top text field will get just a little bit taller. To be specific, by five pixels. So let’s run the app and test that out.

02:02

So that took forever. We’re back and the simulator is finished launching. We have our changes in the simulator right now. What we’re looking for right here is that each time we edit either of these text fields, the height of the top text field should increase by five pixels over a duration of 0.3 seconds. Remember, on this screen, these text fields will only except number entries. I’m just going to be typing 1 over and over again. Each time the text does change, the text field is getting larger. But if you look closely, it doesn’t look like it’s animating at all. It’s just instantly increasing the size by five pixels. There’s no smooth adjustment from it’s current height to five pixels larger. We can fix that here in the code, as usual.

02:57

The way to do that is we need to call self.view.layoutIfNeeded. One of the side effects of calling this method, the view that we call this method on, and it’s subviews, will readjust their position on this screen if their Autolayout constraints have changed or if something has caused them to need to readjust for whatever reason. This is the method we want to call. I think we can actually call it on the first text field so we’re not worrying about running this process for the entire view and all of it’s subviews, we’re just running it on the first text field. Let’s run this and see what happens.

03:37

That went a little faster, but I skipped ahead anyway so now we’re back in this same screen. Now when we edit this text field, it should animate to be taller over a duration of 0.3 seconds. Look at that, that is beautiful. It’s working. That is because we can actually move setting this constant to anywhere in this method, as long as we set it before this animation is actually run. When we do call this layoutIfNeeded method inside the animation block, it will actually animate the change in any of those constraints. Just to make it a little more dramatic, so that we can see everything, let’s make it increase it’s size by 50 pixels over a duration of 1.3 seconds. We’re back so let’s give it a try. It’s a lot more dramatic. The text does go a little weird and wonky. But that’s not what we’re here to talk about. We’re just here to talk about how we can animate changes in Autolayout constraints and we have done that here. Thanks for watching.

Additional Info

Register to get access to additional resources and info.