FormationLayout alternatives and similar libraries
Based on the "Auto Layout" category.
Alternatively, view FormationLayout alternatives based on common mentions on social networks and blogs.
-
PureLayout
The ultimate API for iOS & OS X Auto Layout — impressively simple, immensely powerful. Objective-C and Swift compatible. -
MisterFusion
MisterFusion is Swift DSL for AutoLayout. It is the extremely clear, but concise syntax, in addition, can be used in both Swift and Objective-C. Support Safe Area and Size Class. -
QuickLayout
Written in pure Swift, QuickLayout offers a simple and easy way to manage Auto Layout in code. -
FrameLayoutKit
A super fast and easy-to-use layout library for iOS. FrameLayoutKit supports complex layouts, including chaining and nesting layout with simple and intuitive operand syntax.
CodeRabbit: AI Code Reviews for Developers
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of FormationLayout or a related project?
README
FormationLayout
Documentation
FormationLayout
is the top level layout class for one root view.
FormationLayout
takes aUIView
as itsrootView
.translatesAutoresizingMaskIntoConstraints
ofrootView
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 torootView
automaticly.
demo { canvas, icon in
FormationLayout(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 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)
}
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)
}
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)
}
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)
}
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)
}
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()
}
isLoggedIn = false
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)
}
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
*Note that all licence references and agreements mentioned in the FormationLayout README section above
are relevant to that project's source code only.