iOS Swift - bottom menu like skype

Question

I want to create bottom menu like in Skype application.

It should be at bottom with some icons and it could slide up to show more items.

What I've created is UIView with height constraint. When there is swipe gesture or dots are tapped then I change constraint of Menu view:

topMenuViewHeightConstraint.constant = 200;
UIView.animateWithDuration(0.5) {
    self.view.layoutIfNeeded()
}

It's working and looks good. But I am not sure if this is correct solution. If there isn't something better. Is that animation done correct way? Would it work good if there be more controls on screen? What If I want faster animation from start and then slow ending? Thanks

Answer 1

This is indeed the recommended way to animate constraint changes. I would suggest a slight change in how you approach the constraints.

Instead of manually assigning the view a height, you should let auto layout generate the height for you, and use a constraint pinned to the superview.bottom to perform the animation.

1. When user taps your UIBarButtonItem create the view and add it to the superview with a top constraint of 0 to the bottom of the superview. Now the view is positioned "below" the screen and not yet visible to the user.
2. Call layoutIfNeeded() on the view to trigger auto layout
3. Grab the height with CGRectGetHeight() and use it to set the top constraint's constant to the negative of this value (eg -400).
4. Call layoutIfNeeded() again inside your animation block and the view will slide up from the bottom of the screen.

For gestures you can use the same approach and simple use the UIGestureRecognizer method translationInView() to adjust the top constraint's constant accordingly.

An alternative method that doesn't require referencing the height in code could be to remove the top constraint and add a bottom constraint to superview.bottom.

Also -- see my other answer to a similar question: https://stackoverflow.com/a/28484328/1451954