FlatHierarchyViewController.swift

import UIKit
import YogaKit

final class FlatHierarchyController: UIViewController {
    private let layoutA = YGLayoutContainer(), layoutB = YGLayoutContainer()
    private var currentLayout: YGLayoutContainer?

    override func viewDidLoad() {
        view.backgroundColor = .white
        
        let blueView = UIView(frame: .zero)
        blueView.backgroundColor = .blue
        blueView.configureLayout { (layout) in
            layout.isEnabled = true
            layout.flexGrow = 1
            layout.flexShrink = 1
            layout.aspectRatio = 4/3
        }
        view.addSubview(blueView)
        
        let redView = UIView(frame: .zero)
        redView.backgroundColor = .red
        redView.configureLayout { (layout) in
            layout.isEnabled = true
            layout.flexGrow = 1
            layout.flexShrink = 1
        }
        view.addSubview(redView)
        
        let yellowView = UIView(frame: .zero)
        yellowView.backgroundColor = .yellow
        yellowView.configureLayout { (layout) in
            layout.isEnabled = true
            layout.flexGrow = 1
            layout.flexShrink = 1

        }
        view.addSubview(yellowView)
        
        let greenView = UIView(frame: .zero)
        greenView.backgroundColor = .green
        greenView.configureLayout { (layout) in
            layout.isEnabled = true
            layout.flexGrow = 1
            layout.flexShrink = 1
        }
        view.addSubview(greenView)
        
        let purpleView = UIView(frame: .zero)
        purpleView.backgroundColor = .purple
        purpleView.configureLayout { (layout) in
            layout.isEnabled = true
            layout.flexGrow = 1
            layout.flexShrink = 1
        }
        view.addSubview(purpleView)
        
        let nestedContainer = YGLayoutContainer()
        nestedContainer.subEntities = [greenView, purpleView]
        nestedContainer.flexDirection = .column
        nestedContainer.flexGrow = 1.5;
        nestedContainer.flexShrink = 1

        let horizontalContainer = YGLayoutContainer()
        horizontalContainer.subEntities = [redView, nestedContainer, yellowView]
        horizontalContainer.flexDirection = .row
        horizontalContainer.paddingVertical = 25
        horizontalContainer.flexGrow = 1
        horizontalContainer.flexShrink = 1
        
        layoutA.frame = view.bounds
        
        layoutA.subEntities = [blueView, horizontalContainer]
        layoutA.flexDirection = view.bounds.size.width > view.bounds.size.height ? .row : .column
        layoutA.alignItems = .center

        layoutB.frame = view.bounds
        
        layoutB.subEntities = [blueView, horizontalContainer]
        layoutB.flexDirection = view.bounds.size.width > view.bounds.size.height ? .column : .row
        layoutB.alignContent = .stretch
        
        layoutA.applyLayout(preservingOrigin: false)
        
        currentLayout = layoutA
    }
    
    override func motionBegan(_ motion: UIEventSubtype, with event: UIEvent?) {
        UIView.animate(withDuration: 0.5) { 
            self.currentLayout = self.currentLayout == self.layoutA ? self.layoutB : self.layoutA
            self.view.setNeedsLayout()
            self.view.layoutIfNeeded()
        }
    }
    
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        
        layoutA.frame = view.bounds
        layoutA.flexDirection = view.bounds.size.width > view.bounds.size.height ? .row : .column
        
        layoutB.frame = view.bounds
        layoutB.flexDirection = view.bounds.size.width > view.bounds.size.height ? .column : .row
        
        currentLayout?.applyLayout(preservingOrigin: true)
    }
}