Animate views programmatically using constraints in Swift(iOS)

You know what is the most interesting part in the app development for me is? It’s improving the User Experience(UX). And one of the way to improve user experience is adding intuitive animations in your app😍. We can achieve this by many ways, one is by modifying constraints like the GIF shown below.

slowed down animation in simulator

Let me walk you through these simple steps to achieve this amazing animation.

First of all define topView for the logo image.

private lazy var topViewForImage: UIView = {
    let view = UIView()
    view.backgroundColor = .lightGray
    view.translatesAutoresizingMaskIntoConstraints = false
    return view
}()

The translatesAutoresizingMaskIntoConstraints is the one who allow us to add constraints to the view programatically. Don’t forgot to set it false

Now time to create imageView to show some image in the topView,

private lazy var topImageView: UIImageView = {
    let image = UIImageView()
    image.image =  imageLiteral(resourceName: "appLogo")
    image.contentMode = .scaleAspectFit  
    image.translatesAutoresizingMaskIntoConstraints = false
    return image
}()

Define a height anchor of typeNSLayoutConstraints for the topViewForImage because we need to change it at various events like keyboardWillShow() and keyboardWillHide(),

var heightAnchor: NSLayoutConstraint?

Now add views and constraints in ViewController.

override func viewDidLoad() {
    super.viewDidLoad()
    view.addSubview(topViewForImage)
    topViewForImage.addSubview(topImageView)                       
    addConstraintsToView()
}
func addConstraintsToView() {                 
// adding constraints to topViewForImage
NSLayoutConstraint.activate([
topViewForImage.leadingAnchor.constraint(equalTo: view.leadingAnchor),                         topViewForImage.trailingAnchor.constraint(equalTo: view.trailingAnchor),                        topViewForImage.topAnchor.constraint(equalTo: view.topAnchor)
])
heightAnchor = topViewForImage.heightAnchor.constraint(equalTo:view.heightAnchor, multiplier: 0.3)
// the multiplier 0.3 means we are setting height of topViewForImage to the 30% of view's height.
heightAnchor?.isActive = true
// adding constraints to topImageView
NSLayoutConstraint.activate([
topImageView.centerXAnchor.constraint(equalTo: topViewForImage.centerXAnchor),
topImageView.centerYAnchor.constraint(equalTo:
topViewForImage.centerYAnchor),
topImageView.widthAnchor.constraint(equalTo: topViewForImage.widthAnchor, multiplier: 0.7),
topImageView.heightAnchor.constraint(equalTo: topViewForImage.heightAnchor, multiplier: 0.4)
])
}

You can see in addConstraintsToView() method, we are setting constraints for topImageView with respect to topViewForImage. It means as the dimensions of topViewForImage changes, the dimensions of topImageView also changes accordingly (This is dope🤩).

Husshhh…All view setup is done. Now lets make magic🧙‍. We just have to adjust height anchor of topViewForImage when keyboard appears.

@objc fileprivate func keyboardWillShow(notification: NSNotification){
   guard let keyboard = (notification.userInfo?[UIKeyboardFrameEndUserInfoKey] as? NSValue)?.cgRectValue else {return}
   heightAnchor?.isActive = false
   heightAnchor = topViewForImage.heightAnchor.constraint(equalToConstant: 0)
   heightAnchor?.isActive = true
   UIView.animate(withDuration: 0.5) {
      self.view.layoutIfNeeded()
   }
}

Also in keyboardWillHide() implement following method,

@objc fileprivate func keyboardWillHide(notification: NSNotification){
    guard let keyboard = (notification.userInfo?[UIKeyboardFrameBeginUserInfoKey] as? NSValue)?.cgRectValue else {return}
    heightAnchor = topViewForImage.heightAnchor.constraint(equalTo:     view.heightAnchor, multiplier: 0.3) //reset it to 30%
    heightAnchor?.isActive = true
    UIView.animate(withDuration: 0.5, animations: {
       self.view.layoutIfNeeded()
    })
}

self.view.layoutIfNeeded() this makes the rest of the magic, as name implies it will layout your view only if there is any change in constraints.

We are done.

Adding animations to view wasn’t this much super easy 😃. You can play with it by trying different combinations as you want. All the best. Please claps if you find this helpful and spread with others🙏.