Kodeco Forums

Video Tutorial: Introducing Stack Views Part 4: Animating Stack Views

🎓 Courses & Articles
1

Learn how easy it is use animation with stack views to create slick looking animations for your app.

This is a companion discussion topic for the original entry at https://www.raywenderlich.com/3942-introducing-stack-views/lessons/5
2

Awesome tutorial! Not sure if it’s a mini bug but the length of the video is around 7:17 while the title says 6m 4s

3

@simonqq

Thanks for spotting that - I’ve fixed it!

sam

4

Hi Sam. First of all Thanks for this great tutorial series.

Now my question: Im working with Xcode 7.3.1 and iOS 9.3 and have followed your suggestions in the previous parts and added a autolayout constraint conntection the pancake image view and the map to have the same size.
Now I implemented the hide map function, and hiding the map also lets the image disappear. What’s your suggestion to solve this problem?

Stefan

5

@beezlebug

If I understand you correctly, then I think you need to make the constraint between the map and the image adaptively installed. That means that constraint is only installed in the size class overrides that the map is installed. Then you need to check the constraints that define the size of image when the map isn’t installed. Since you’re using stack views, it’s entirely possible that nothing needs to change, however, in some circumstances you might need to add a new constraint that defines the size of the image view in size class overrides that don’t contain the map view.

sam

6

Hi Sam. Thanks for your quick reply. But I think I didn’t get my question right.

I the previous parts of this great video series, there where the problem that with the current version of Xcode 7 the map doesn’t show up in the Details view (portrait), a the suggested solution was to add a constraint between map and pancake image. That works great, and to support the correct layout in landscape, we made this constraint not be installed in wAny hC. This also worked fine.

But now I want to implement the “Hide Map” feature (like “Hide Details”). The Hide Map button tap will be handled like this:

@IBAction func handleShowMapButtonPressed(sender: UIButton) {
    if mapView.hidden {
        animateView(mapView, toHidden: false)
        showMapButton.setTitle("Hide Map", forState: .Normal)
    } else {
        animateView(mapView, toHidden: true)
        showMapButton.setTitle("Show Map", forState: .Normal)
    }
}

But in portrait, this will also hide the pancake image, I guess because of the equal heights constaint.

Now I guess one has to disable this constraint before hiding the map and then enable it again as long as not being in size class wAny hC.

Is this the right approach? How can this be done in code?

Stefan

7

Hi Stefan,

I think your approach will work fine. You can make an @IBOutlet to the equal height constraint, in the same way that you would for a UIView. That way you can uninstall and install it at will in the code, using the active property.

You can check the current size class of a UIView or UIViewController (anything that adopts the UITraitEnvironment protocol) with the traitEnvironment property.

Hope that helps - I think that’s everything you need to update you method to handle size the equal height constraint.

sam

8

Thanks for you reply! I will try it out asap!

9

Seems to work. Just have to get the size class check and the animations right …

1 Like