Fear and Loathing in Auto Layout: Animating Auto Layout Constraints with a Tap, Drag, Pinch and Rotate in Swift (Xcode 7.2, iOS 9.2.1; updated Swift 3, Xcode 8 beta 6)


** Jump to Swift 3 code **

So you want to move things across the screen? But how is this done when we're using Auto Layout and not just frames and centres to place objects? Well this is something that I've started to look at following this StackOverflow response.

Turns out the ordering of the code and the calling of layoutIfNeeded() is important although we're free to update constraint values before or within animation closures, as long as we do so before the second call to layoutIfNeeded(). (The first time is to clear out any layout that needs to happen first, the second is to make the new changes. So we end up with a kind of layoutIfNeeded() sandwich.)

Tapping a view

I'm first of all going to extract the methods that get called by each gesture recogniser. The code is not complete in these extracts. For example, here we are missing the code to attach the gesture recogniser and also the bool that is being checked and changed. But all the surrounding code is present in the code at the end of the post, which is a complete cut and paste for tapping, dragging and pinching.
func tap(gest:UITapGestureRecognizer) {
    if movedRight {
        self.view.layoutIfNeeded()
        self.verticalConstraint.constant += 25
        UIView.animateWithDuration(0.5){
            self.view.layoutIfNeeded()
                
        }
            
        movedRight = false
            
    }
    else {
        self.view.layoutIfNeeded()
        UIView.animateWithDuration(0.5){
            self.horizontalConstraint.constant += 25
            self.view.layoutIfNeeded()
            
        }
        movedRight = true
        
    }
}
Using a UIPropertyAnimator (Swift 4):
    @objc func tapPiece(_ gestureRecognizer : UITapGestureRecognizer ) {
        guard gestureRecognizer.view != nil else { return }
         self.view.layoutIfNeeded()
        if(self.topicScrollViewBottomConstraint.constant==0){self.topicScrollViewBottomConstraint.constant += 80}
        else {self.topicScrollViewBottomConstraint.constant = 0}
        
        if gestureRecognizer.state == .ended { 
            let animator = UIViewPropertyAnimator(duration: 0.25, curve: .easeOut, animations: {
                 self.view.layoutIfNeeded()
            })
            animator.startAnimation()
        }}
In tapping the view, there's nothing very special here beyond what Gervasio Marchand provides on StackOverflow. A red view animates a little way across the screen every time you tap it.

Dragging a view

And this is my method for handling a pan gesture, inspired again by a StackOverflow entry.
func drag(gest:UIPanGestureRecognizer) {
    view.layoutIfNeeded()

    let translation = gest.translationInView(self.redView)
    switch (gest.state) {
    case .Began:
        offSet = CGPoint(x: horizontalConstraint.constant, y: verticalConstraint.constant)
        break;
          
    case .Changed:
        horizontalConstraint.constant = offSet.x + translation.x
        verticalConstraint.constant = offSet.y + translation.y
        view.layoutIfNeeded()
        break;
           
           
    case .Ended:
        break;
            
    default:
        break;
    }
        
}
Whenever a drag begins the position is obtained and then the offset is added to this, which prevents any of those familiar leaps that happen when a view resets to its original position.

Stretching a view

It would be great to be able to resize a view with a pinch as well:
func pinch(gest:UIPinchGestureRecognizer) {
    view.layoutIfNeeded()
    let scale = gest.scale
    switch (gest.state) {
    case .Began:
        viewSize = CGSize(width: widthConstraint.constant, height: heightConstraint.constant)
        break;
          
    case .Changed:
        widthConstraint.constant = viewSize.width * scale
        heightConstraint.constant = viewSize.height * scale
        view.layoutIfNeeded()
        break;
            
    case .Ended:
        break;
            
    default:
        break;
    }

}
Here the dragging code is adapted for a scale. Notice how similar it is. The only real thing to note here before the complete code is given is that users are used to seeing a view scale from the centre and the simplest way that I know to achieve this is by setting all measurements and constraints offset from the centre of the superview. To achieve this I use the centerXAnchors and the centerYAnchors of the views involved. You might also in real use want to set a minimum size for the resizable view so that it doesn't become too small to expand (or to find some strategy where you attach the pinch gesture to a superview).

Tap, drag, pinch and rotate

Now time to add in the surrounding code, which looks like this:
import UIKit

class ViewController: UIViewController {
    var redView:UIView!
    var movedRight:Bool = false
    var verticalConstraint:NSLayoutConstraint!
    var horizontalConstraint:NSLayoutConstraint!
    var widthConstraint:NSLayoutConstraint!
    var heightConstraint:NSLayoutConstraint!
    
    var offSet:CGPoint!
    var transform: CGAffineTransform!
    var viewSize:CGSize!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        redView = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 200))
        redView.backgroundColor = .redColor()
        
        view.addSubview(redView)
        let tap = UITapGestureRecognizer(target: self, action: Selector("tap:"))
        redView.addGestureRecognizer(tap)
        let drag = UIPanGestureRecognizer(target: self, action: Selector("drag:"))
        redView.addGestureRecognizer(drag)
        let pinch = UIPinchGestureRecognizer(target: self, action: Selector("pinch:"))
        redView.addGestureRecognizer(pinch)
        let rotate = UIRotationGestureRecognizer(target: self, action: Selector("rotate:"))
        redView.addGestureRecognizer(rotate)
        redView.userInteractionEnabled = true
        alignView(redView)
        
    }
    
    func rotate(gest:UIRotationGestureRecognizer) {
//        view.layoutIfNeeded()

        let rotation = gest.rotation
        if let viewToTransform = gest.view {
            switch (gest.state) {
            case .Began:
                transform = viewToTransform.transform
                break;
                
            case .Changed:
                viewToTransform.transform = CGAffineTransformConcat(transform,CGAffineTransformMakeRotation(rotation))
                break;
                
                
            case .Ended:
                break;
                
            default:
                break;
            }
            
        }
        
    }

    // see http://stackoverflow.com/a/21803627/1694526
    func drag(gest:UIPanGestureRecognizer) {
        view.layoutIfNeeded()
        
        let translation = gest.translationInView(self.view)
        switch (gest.state) {
        case .Began:
            offSet = CGPoint(x: horizontalConstraint.constant, y: verticalConstraint.constant)
            break;
            
        case .Changed:
            horizontalConstraint.constant = offSet.x + translation.x
            verticalConstraint.constant = offSet.y + translation.y
            
            view.layoutIfNeeded()
            break;
            
            
        case .Ended:
            break;
            
        default:
            break;
        }
        
    }
    func pinch(gest:UIPinchGestureRecognizer) {
        view.layoutIfNeeded()
        let scale = gest.scale
        switch (gest.state) {
        case .Began:
            viewSize = CGSize(width: widthConstraint.constant, height: heightConstraint.constant)
            break;
            
        case .Changed:
            widthConstraint.constant = viewSize.width * scale
            heightConstraint.constant = viewSize.height * scale
            view.layoutIfNeeded()
            break;
            
        case .Ended:
            break;
            
        default:
            break;
        }

    }

    func tap(gest:UITapGestureRecognizer) {
        if movedRight {
            self.view.layoutIfNeeded()
            self.verticalConstraint.constant += 25
            UIView.animateWithDuration(0.5){
                self.view.layoutIfNeeded()
                
            }
            
            movedRight = false
            
        }
        else {
            self.view.layoutIfNeeded()
            UIView.animateWithDuration(0.5){
                self.horizontalConstraint.constant += 25
                self.view.layoutIfNeeded()
                
            }
            movedRight = true
            
        }
    }
    
    func alignView(viewToConstrain:UIView) {
        // a precaution
        viewToConstrain.removeConstraints(viewToConstrain.constraints)
        // enable AutoLayout
        viewToConstrain.translatesAutoresizingMaskIntoConstraints = false
        // set horizontal and vertical constraints
        horizontalConstraint =  viewToConstrain.centerXAnchor.constraintEqualToAnchor(view.centerXAnchor, constant: viewToConstrain.center.x - view.center.x)
        horizontalConstraint.active = true
        verticalConstraint = viewToConstrain.centerYAnchor.constraintEqualToAnchor(view.centerYAnchor, constant: viewToConstrain.center.y - view.center.y)
        verticalConstraint.active = true
        // set height and width anchors
        heightConstraint =  viewToConstrain.heightAnchor.constraintEqualToConstant(CGRectGetHeight(viewToConstrain.frame))
            heightConstraint.active = true
        widthConstraint = viewToConstrain.widthAnchor.constraintEqualToConstant(CGRectGetWidth(viewToConstrain.frame))
            widthConstraint.active = true
    }
}
Rotation doesn't have an impact on Auto Layout, but seeing as we're already tapping, dragging and pinching I thought why not add it in. You can now tap the view, drag the view, pinch the view or rotate it and it will be have as you have grown to expect.

Updated: Swift 3 (Xcode 8 beta 6)

import UIKit

class ViewController: UIViewController {
    var redView:UIView!
    var movedRight:Bool = false
    var verticalConstraint:NSLayoutConstraint!
    var horizontalConstraint:NSLayoutConstraint!
    var widthConstraint:NSLayoutConstraint!
    var heightConstraint:NSLayoutConstraint!
    
    var offSet:CGPoint!
    var transform: CGAffineTransform!
    var viewSize:CGSize!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        redView = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 200))
        redView.backgroundColor = .red
        
        view.addSubview(redView)
        let taps = UITapGestureRecognizer(target: self, action: #selector(tap))
        redView.addGestureRecognizer(taps)
        let drags = UIPanGestureRecognizer(target: self, action: #selector(drag))
        redView.addGestureRecognizer(drags)
        let pinches = UIPinchGestureRecognizer(target: self, action: #selector(pinch))
        redView.addGestureRecognizer(pinches)
        let rotates = UIRotationGestureRecognizer(target: self, action: #selector(rotate))
        redView.addGestureRecognizer(rotates)
        redView.isUserInteractionEnabled = true
        alignView(viewToConstrain: redView)
        
    }
    
    @objc func rotate(gest:UIRotationGestureRecognizer) {
        //        view.layoutIfNeeded()
        
        let rotation = gest.rotation
        if let viewToTransform = gest.view {
            switch (gest.state) {
            case .began:
                transform = viewToTransform.transform
                break;
                
            case .changed:
                viewToTransform.transform = transform.concatenating(CGAffineTransform(rotationAngle: rotation))
                break;
                
                
            case .ended:
                break;
                
            default:
                break;
            }
            
        }
        
    }
    
    // see http://stackoverflow.com/a/21803627/1694526
    @objc func drag(gest:UIPanGestureRecognizer) {
        view.layoutIfNeeded()
        
        let translation = gest.translation(in: self.view)
        switch (gest.state) {
        case .began:
            offSet = CGPoint(x: horizontalConstraint.constant, y: verticalConstraint.constant)
            break;
            
        case .changed:
            horizontalConstraint.constant = offSet.x + translation.x
            verticalConstraint.constant = offSet.y + translation.y
            
            view.layoutIfNeeded()
            break;
            
            
        case .ended:
            break;
            
        default:
            break;
        }
        
    }
    @objc func pinch(gest:UIPinchGestureRecognizer) {
        view.layoutIfNeeded()
        let scale = gest.scale
        switch (gest.state) {
        case .began:
            viewSize = CGSize(width: widthConstraint.constant, height: heightConstraint.constant)
            break;
            
        case .changed:
            widthConstraint.constant = viewSize.width * scale
            heightConstraint.constant = viewSize.height * scale
            view.layoutIfNeeded()
            break;
            
        case .ended:
            break;
            
        default:
            break;
        }
        
    }
    
    @objc func tap(gest:UITapGestureRecognizer) {
        if movedRight {
            self.view.layoutIfNeeded()
            self.verticalConstraint.constant += 25
            UIView.animate(withDuration: 0.5){
                self.view.layoutIfNeeded()
                
            }
            
            movedRight = false
            
        }
        else {
            self.view.layoutIfNeeded()
            UIView.animate(withDuration: 0.5){
                self.horizontalConstraint.constant += 25
                self.view.layoutIfNeeded()
                
            }
            movedRight = true
            
        }
    }
    
    func alignView(viewToConstrain:UIView) {
        // a precaution
        viewToConstrain.removeConstraints(viewToConstrain.constraints)
        // enable AutoLayout
        viewToConstrain.translatesAutoresizingMaskIntoConstraints = false
        // set horizontal and vertical constraints
        horizontalConstraint =  viewToConstrain.centerXAnchor.constraint(equalTo: view.centerXAnchor)
        horizontalConstraint.isActive = true
        verticalConstraint = viewToConstrain.centerYAnchor.constraint(equalTo: view.centerYAnchor)
        verticalConstraint.isActive = true
        // set height and width anchors
        heightConstraint =  viewToConstrain.heightAnchor.constraint(equalToConstant: viewToConstrain.frame.height)
        heightConstraint.isActive = true
        widthConstraint = viewToConstrain.widthAnchor.constraint(equalToConstant: viewToConstrain.frame.width)
        widthConstraint.isActive = true
    }
}

Next time

I'm hoping in my next post on this subject to see if we can move away from constants so that layout is more proportional and works even better across device sizes.


Comments

  1. Great tutorial. Explained very well. Thank you.

    ReplyDelete

Post a Comment