Popularity
1.6
Growing
Activity
0.0
Stable
51
5
6

Code Quality Rank: L4
Programming language: Swift
License: MIT License
Tags: Layout     Auto Layout    
Latest version: v0.8.5

FormationLayout alternatives and similar libraries

Based on the "Auto Layout" category.
Alternatively, view FormationLayout alternatives based on common mentions on social networks and blogs.

Do you think we are missing an alternative of FormationLayout or a related project?

Add another 'Auto Layout' Library

README

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


*Note that all licence references and agreements mentioned in the FormationLayout README section above are relevant to that project's source code only.