Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/evan-liu/FormationLayout
Yet Another Swift Auto Layout DSL
https://github.com/evan-liu/FormationLayout
autolayout swift
Last synced: about 1 month ago
JSON representation
Yet Another Swift Auto Layout DSL
- Host: GitHub
- URL: https://github.com/evan-liu/FormationLayout
- Owner: evan-liu
- License: mit
- Created: 2015-06-18T02:27:52.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-03-18T02:39:31.000Z (almost 8 years ago)
- Last Synced: 2024-11-17T09:42:08.218Z (about 2 months ago)
- Topics: autolayout, swift
- Language: Swift
- Homepage:
- Size: 558 KB
- Stars: 51
- Watchers: 5
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-ios - FormationLayout - Work with auto layout and size classes easily. (Layout / Other Hardware)
- awesome-ios-star - FormationLayout - Work with auto layout and size classes easily. (Layout / Other Hardware)
- awesome-swift-cn - FormationLayout - Auto Layout lib supports group layout and size classes. (Libs / Layout)
README
# FormationLayout
[](https://cocoapods.org/)
[](https://github.com/Carthage/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.
```swift
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
```swift
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
```swift
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
```swift
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
```swift
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]
```swift
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.
```swift
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.
```swift
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
```