Natasha The Robot, Natasha The Robot, Natasha The Robot Proofreading: saitjr; Final draft: Chiba knows the wind

Last week I attended the iOSDevCampDC as a guest and had the opportunity to hear @Atomicbird give a great talk about StackView. I understood the basics of StackView, but it was blindfolded to see how easy it was to make cool animations.

Here is an example of the @Atomicbird demo, which I modeled in my blog. The app has a Settings button that allows users to select an emoji to represent their current status.

www.natashatherobot.com/wp-content/…

Initial setup

The initial setup is simple: add StackView to View, add constraints, and use buttons to make up this cute emoticon menu.

Stackview is very simple and easy to learn, so even if you haven’t, this part can be fun. 🙂

The next step is to manipulate the emoticon buttons (except for the set buttons) and create an Outlet Collection for those buttons that need to be animated.





As you can see, creating an Outlet Collection is the same as creating an Outlet, except that an Outlet Collection is an array of child controls. So hold down the Control key and drag the mouse to create a new Outlet Collection.

Animation 🎉

We will animate it by controlling the hidden property of the emoticon button. First, make sure the emoticon buttons are hidden by default. Iterate over all the emoticon buttons to hide them.

<

@IBOutlet var emojiButtons: [UIButton]! {
didSet {
    emojiButtons.forEach {
        $0.isHidden = true
    }
}
}
Copy the code

Are you ready for the hard part?

When the Settings button is clicked, perform an animation to traverse all the emoticon buttons and toggle their hidden state.

@IBAction func onSettingsButtonTap(_ sender: AnyObject) { UIView.animate(withDuration: 0.3) {self. EmojiButtons. ForEach {$0. IsHidden =! $0.isHidden } } }Copy the code

conclusion

These refined techniques make StackView more powerful than you can imagine. I was encouraged to do more creative things with StackView. Thank you so much @Atomicbird!

You can see my sample code here and compare it to Autolayout.

Interested in learning more tips? Join the Swift community carnival in New York City on September 1,2. You can get a $100 discount with NATASHATHEROBOT.

This article is translated by SwiftGG translation team and has been authorized to be translated by the authors. Please visit swift.gg for the latest articles.