Use constraints instead of frames for message animation

Author: vadymmarkov

Sources/Controllers/BarcodeScannerViewController.swift

@@ -65,6 +65,11 @@ open class BarcodeScannerViewController: UIViewController {
   /// Camera view with custom buttons.
   public private(set) lazy var cameraViewController: CameraViewController = .init()
 
+  // Constraints that are activated when the view is used as a footer.
+  private lazy var collapsedConstraints: [NSLayoutConstraint] = self.makeCollapsedMessageConstraints()
+  // Constraints that are activated when the view is used for loading animation and error messages.
+  private lazy var expandedConstraints: [NSLayoutConstraint] = self.makeExpandedMessageConstraints()
+
   private var messageView: UIView {
     return messageViewController.view
   }
@@ -76,38 +81,26 @@ open class BarcodeScannerViewController: UIViewController {
     }
   }
 
-  /// Calculated frame for the info view.
-  private var messageViewFrame: CGRect {
-    let height = status.state != .processing ? 75 : view.bounds.height
-    return CGRect(
-      x: 0, y: view.bounds.height - height,
-      width: view.bounds.width, height: height
-    )
-  }
-
   // MARK: - View lifecycle
 
   open override func viewDidLoad() {
     super.viewDidLoad()
     view.backgroundColor = UIColor.black
+
+    add(childViewController: messageViewController)
+    messageView.translatesAutoresizingMaskIntoConstraints = false
+    collapsedConstraints.activate()
+
     cameraViewController.metadata = metadata
     cameraViewController.delegate = self
-
     add(childViewController: cameraViewController)
-    add(childViewController: messageViewController)
+
+    view.bringSubview(toFront: messageView)
   }
 
   open override func viewWillAppear(_ animated: Bool) {
     super.viewWillAppear(animated)
-    setupConstraints()
-  }
-
-  open override func viewWillTransition(to size: CGSize,
-                                        with coordinator: UIViewControllerTransitionCoordinator) {
-    super.viewWillTransition(to: size, with: coordinator)
-    coordinator.animate(alongsideTransition: { (context) in
-      self.messageView.frame = self.messageViewFrame
-    })
+    setupCameraConstraints()
   }
 
   // MARK: - State handling
@@ -147,13 +140,20 @@ open class BarcodeScannerViewController: UIViewController {
       resetState()
     }
 
+    if newValue.state != .processing {
+      expandedConstraints.deactivate()
+      collapsedConstraints.activate()
+    } else {
+      collapsedConstraints.deactivate()
+      expandedConstraints.activate()
+    }
+
     messageViewController.state = newValue.state
 
     UIView.animate(
       withDuration: duration,
       animations: ({
-        self.messageView.layoutIfNeeded()
-        self.messageView.frame = self.messageViewFrame
+        self.view.layoutIfNeeded()
       }),
       completion: ({ [weak self] _ in
         if delayReset {
@@ -209,11 +209,12 @@ open class BarcodeScannerViewController: UIViewController {
 // MARK: - Layout
 
 private extension BarcodeScannerViewController {
-  private func setupConstraints() {
-    guard constraintsActivated else {
+  private func setupCameraConstraints() {
+    guard !constraintsActivated else {
       return
     }
 
+    constraintsActivated = true
     let cameraView = cameraViewController.view!
 
     NSLayoutConstraint.activate(
@@ -239,6 +240,24 @@ private extension BarcodeScannerViewController {
       )
     }
   }
+
+  private func makeExpandedMessageConstraints() -> [NSLayoutConstraint] {
+    return [
+      messageView.topAnchor.constraint(equalTo: view.topAnchor),
+      messageView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
+      messageView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
+      messageView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
+    ]
+  }
+
+  private func makeCollapsedMessageConstraints() -> [NSLayoutConstraint] {
+    return [
+      messageView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
+      messageView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
+      messageView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
+      messageView.heightAnchor.constraint(equalToConstant: 75)
+    ]
+  }
 }
 
 // MARK: - HeaderViewControllerDelegate

Sources/Controllers/CameraViewController.swift

@@ -218,8 +218,8 @@ public final class CameraViewController: UIViewController {
       return
     }
 
-    regularFocusViewConstraints.forEach({ $0.isActive = false })
-    animatedFocusViewConstraints.forEach({ $0.isActive = true })
+    regularFocusViewConstraints.deactivate()
+    animatedFocusViewConstraints.activate()
 
     UIView.animate(
       withDuration: 1.0, delay:0,

Sources/Controllers/MessageViewController.swift

@@ -142,11 +142,11 @@ public final class MessageViewController: UIViewController {
     }
 
     if state == .scanning || state == .unauthorized {
-      expandedConstraints.forEach({ $0.isActive = false })
-      collapsedConstraints.forEach({ $0.isActive = true })
+      expandedConstraints.deactivate()
+      collapsedConstraints.activate()
     } else {
-      collapsedConstraints.forEach({ $0.isActive = false })
-      expandedConstraints.forEach({ $0.isActive = true })
+      collapsedConstraints.deactivate()
+      expandedConstraints.activate()
     }
   }
 }
@@ -164,7 +164,7 @@ extension MessageViewController {
       imageView.widthAnchor.constraint(equalToConstant: 30),
       imageView.heightAnchor.constraint(equalToConstant: 27),
 
-      textLabel.topAnchor.constraint(equalTo: imageView.bottomAnchor, constant: 14),
+      textLabel.topAnchor.constraint(equalTo: imageView.bottomAnchor, constant: 18),
       textLabel.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: padding),
       textLabel.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -padding),
 

Sources/Extensions/NSLayoutConstraint+Extensions.swift

@@ -13,3 +13,21 @@ extension NSLayoutConstraint {
     }
   }
 }
+
+extension Array where Element: NSLayoutConstraint {
+  func activate() {
+    forEach {
+      if !$0.isActive {
+        $0.isActive = true
+      }
+    }
+  }
+
+  func deactivate() {
+    forEach {
+      if $0.isActive {
+        $0.isActive = false
+      }
+    }
+  }
+}