Advanced iOS Auto Layout: Runtime Changes, Gestures, Dynamic Type & Safe Area

Introduction

Auto Layout creates relationships between views using constraints, enabling apps to adapt to various screen sizes and layout demands.

1. Changing Layout at Runtime

Beyond static positioning, you can modify constraints while the app runs. The example hides a slider view by setting its height to zero and toggling constraints to avoid conflicts.

1.1 Hide View with Height Constraint

Setting a height constraint to 0 can produce warnings; instead, place the slider and label inside a wrapping view and clip its bounds.

1.2 Avoiding Conflicts

Conflicts arise when a zero‑height constraint coexists with other constraints that require space. Moving the views into a wrapping view and disabling the conflicting constraint resolves the issue.

1.3 Implementation Code

@IBOutlet var warppingView: UIView!
@IBOutlet var edgeConstraint: NSLayoutConstraint!
var zeroHeightConstraint: NSLayoutConstraint!

@IBAction func toggleDistanceControls(_ sender: Any) {
    if zeroHeightConstraint == nil {
        zeroHeightConstraint = warppingView.heightAnchor.constraint(equalToConstant: 0)
    }
    let shouldShow = !edgeConstraint.isActive
    if shouldShow {
        zeroHeightConstraint.isActive = false
        edgeConstraint.isActive = true
    } else {
        edgeConstraint.isActive = false
        zeroHeightConstraint.isActive = true
    }
}

1.4 Adding Animation

Wrap the constraint changes in a UIView animation block to animate the show/hide transition.

UIView.animate(withDuration: 0.25) {
    self.view.layoutIfNeeded()
}

2. Tracking Touch Gestures

Use a pan gesture recognizer to move a card view, applying translation and rotation via CGAffineTransform.

2.1 Frame Origin

The layout engine owns the view’s frame; constraints compute the frame, and transforms offset it.

2.2 Adding Gesture Recognizer

@IBOutlet weak var cardView: UIImageView!
@IBAction func panCard(_ sender: UIPanGestureRecognizer) {}

2.3 Applying Translation and Rotation

func transform(for translation: CGPoint) -> CGAffineTransform {
    let moveBy = CGAffineTransform(translationX: translation.x, y: translation.y)
    let rotation = -sin(translation.x / (cardView.frame.width * 4.0))
    return moveBy.rotated(by: rotation)
}

2.4 Restoring Position

@IBAction func panCard(_ sender: UIPanGestureRecognizer) {
    switch sender.state {
    case .changed:
        let translation = sender.translation(in: view)
        cardView.transform = transform(for: translation)
    case .ended:
        UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 0.4,
                       initialSpringVelocity: 1.0, options: [], animations: {
            self.cardView.transform = .identity
        }, completion: nil)
    default:
        break
    }
}

3. Dynamic Type

Dynamic Type lets users adjust font sizes system‑wide. Enable automaticallyAdjustsFontForContentSizeCategory on labels and choose a text style (e.g., Caption 1). Use the Accessibility Inspector to test size changes in real time.

4. Safe Area

iOS 11 introduced the Safe Area Layout Guide, a rectangle that sits between the navigation bar and tab bar. Constrain your views to the safe area to avoid being obscured by system UI.

5. Proportional Positioning

Use a hidden spacer view (or UILayoutGuide) to position a view proportionally within its superview, e.g., setting a card’s height to 70 % of the superview.

6. Stack View Adaptive Layout

Stack Views simplify constraint management. Set Alignment , Distribution (e.g., “Fill Equally”), and Spacing to create responsive grids. Adjust constraints for different size classes to hide or show views in portrait vs. landscape.

Conclusion

The six Auto Layout techniques—runtime constraint changes, gesture‑driven movement, Dynamic Type support, Safe Area usage, proportional positioning with spacer views, and adaptive Stack View layouts—provide iOS developers with powerful tools to build flexible, visually appealing interfaces.

Demo code is available on GitHub: FindMyDates .