Layout Driven Design

The following code is based on the WWDC 2018 video Adding Delight to Your iOS App and the recipe for layout driven UI.

Find and track the state that affects the UI. Create a variable named feelingCool.


class MyView: UIView {
    // ...
    let coolView = CoolView()
    var feelingCool = true
}

Dirty layout when the state changes with setNeedsLayout(). Update feelingCool and add the didSet property observer.

    var feelingCool = true {
        didSet {
            setNeedsLayout()
        }
    }

Update UI with state in layoutSubview().

    override func layoutSubviews() {
        super.layoutSubviews()
        coolView.isHidden = !feelingCool
    }

Download the attached Xcode project.

Leave a comment

Your email address will not be published. Required fields are marked *