Home

Awesome

FormationLayout

banner

Platform License CocoaPods Carthage

Documentation

FormationLayout is the top level layout class for one root view.

demo { canvas, icon in
    FormationLayout(rootView: canvas)[icon].center(equalTo: canvas)
}

FormationLayout

Anchors

View anchors: left, right, top, bottom, leading, trailing, width, height, centerX, centerY, lastBaseline, firstBaseline, centerXWithinMargins, centerYWithinMargins

demo { canvas, icon1, icon2, icon3 in
    let layout = FormationLayout(rootView: canvas)
    layout[icon1].top(equalTo: canvas, plus: 10).leading(equalTo: canvas, plus: 20)
    layout[icon2].top(equalTo: icon1).leading(equalTo: .trailing, of: icon1, plus: 10)
    layout[icon3].bottom(equalTo: canvas, minus: 10).leading(equalTo: icon1, multiplyBy: 2)
}

Anchors

Helpers

demo { canvas, icon1, icon2, icon3 in
    let layout = FormationLayout(rootView: canvas)
    layout[icon1].aspectRatio(equalTo: 1.5).width(equalTo: 30)
    layout[icon2].size(equalTo: 30).center(equalTo: canvas, multiplyBy: 0.8)
    layout[icon3].size(equalTo: icon2, minus: 10).center(equalTo: icon2, plus: 30)
}

Helpers

Pin

layout[view].pin(to: canvas) will set

layout[view].pin(to: canvas, margin: 10) will set

demo { canvas, icon1, icon2, icon3 in
    let layout = FormationLayout(rootView: canvas)
    layout[icon1].pin(to: canvas, edgesWithMargin: [.top: 10, .leading: 3])
    layout[icon2].pin(to: canvas, margin: 30)
    layout[icon3].pin(to: canvas, edges: [.topBottom, .trailing], margin: 3)
}

Pin

Abreast

demo { canvas, icon1, icon2, icon3 in
    let layout = FormationLayout(rootView: canvas)
    layout[icon1].center(equalTo: canvas)
    layout[icon2].before(icon1).above(icon1, gap: 5)
    layout[icon3].after(icon1).below(icon1, gap: 5)
}

Abreast

Group

layout.group(view1, view2) will create same constraints for

demo { canvas, icon1, icon2, icon3 in
    let layout = FormationLayout(rootView: canvas)
    layout.group(icon1, icon2, icon3).centerY(equalTo: canvas)
    layout[icon1].leading(equalTo: canvas, plus: 5)
    layout[icon2].centerX(equalTo: canvas)
    layout[icon3].trailing(equalTo: canvas, minus: 5)
}

Group

Condition

layout.when() creates constraints for one condition and its not creates constrains for otherwise.

demo { canvas, icon in
    var isLoggedIn = true 
    
    let layout = FormationLayout(rootView: canvas)
    let loggedInLayout = layout.when { isLoggedIn }
    
    layout[icon].centerX(equalTo: canvas)
    loggedInLayout[icon].top(equalTo: canvas, plus: 10)
    loggedInLayout.not[icon].bottom(equalTo: canvas, minus: 10)
    
    layout.update()
}

Condition

isLoggedIn = false

ConditionNot

Priority

All constraints have UILayoutPriorityRequired by default.

demo { canvas, icon in
    let layout = FormationLayout(rootView: canvas)
    layout[icon].centerX(equalTo: canvas).size(equalTo: 20)
        .centerY(equalTo: canvas, at: UILayoutPriorityDefaultLow) // Try UILayoutPriorityRequired
        .bottom(equalTo: canvas, at: UILayoutPriorityDefaultHigh)
}

PriorityLow

UILayoutPriorityRequired:

PriorityRequired

Playground

Install

CocoaPods

pod 'FormationLayout', '~> 0.8.5'

Carthage

github "evan-liu/FormationLayout" >= 0.8.5