FormationLayout

Documentation

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

• FormationLayout takes a UIView as its rootView.
• translatesAutoresizingMaskIntoConstraints of rootView is not set to false by default but can be set in constructor.
• translatesAutoresizingMaskIntoConstraints of subviews will be set to false automaticly.
• Subviews with no superView will be added to rootView automaticly.

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

Anchors

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

• layout[view].anchor(equalTo: view2, multiplyBy: multiplier, plus: constant)
  • view.anchor == view2.anchor * multiplier + constant
• layout[view].anchor(equalTo: anchor2, of: view2, multiplyBy: multiplier, minus: constant)
  • view.anchor == view2.anchor2 * multiplier - constant
• layout[view].anchor(greaterThanOrEqualTo: view2)
  • view.anchor >= view2.anchor
• layout[view].anchor(lessThanOrEqualTo: value)(Only width and height)
  • view.anchor <= value

demo{ canvas, icon1, icon2, icon3 inletlayout=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)}

Helpers

• aspectRatio: width:height
• size: width & height
• center: centerX & centerY

demo{ canvas, icon1, icon2, icon3 inletlayout=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)}

Pin

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

• view.top == canvas.top
• view.bottom == canvas.bottom
• view.left == canvas.left
• view.right == canvas.right

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

• view.top == canvas.top + 10
• view.bottom == canvas.bottom - 10
• view.left == canvas.left + 10
• view.right == canvas.right - 10

demo{ canvas, icon1, icon2, icon3 inletlayout=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)}

Abreast

• layout[logo].below(topLayoutGuide, gap: 10)
  • logo.top == topLayoutGuide.bottom + 10
• layout[copyright].above(bottomLayoutGuide, gap: 10)
  • copyright.bottom == bottomLayoutGuide.top - 10

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

Group

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

• layout[view1]
• layout[view2]

demo{ canvas, icon1, icon2, icon3 inletlayout=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)}

Condition

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

demo{ canvas, icon invarisLoggedIn=trueletlayout=FormationLayout(rootView: canvas)letloggedInLayout= 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()}

isLoggedIn = false

Priority

All constraints have UILayoutPriorityRequired by default.

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

UILayoutPriorityRequired:

Playground

• Open Documentation/Doc.xcworkspace.
• Build the FormationLayout-iOS scheme (⌘+B).
• Open Doc playground in the Project navigator.
• Click "Show Result" button at the most right side of each demo line.

Install

CocoaPods

pod 'FormationLayout', '~> 0.8.5'

Carthage

github "evan-liu/FormationLayout" >= 0.8.5