Yet Another Swift Auto Layout DSL
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
Configs
Documentation
FormationLayout.xcodeproj
Scripts
Sources
Tests/FormationLayoutTests
.gitignore
.travis.yml
FormationLayout.podspec
LICENSE
Package.swift
README.md

README.md

FormationLayout

banner

Platform License CocoaPods Carthage

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 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

  • 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 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

  • aspectRatio: width:height
  • size: width & height
  • center: centerX & centerY
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

  • 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 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

  • 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 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

  • layout[view1]
  • layout[view2]
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

  • 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