Yet Another Swift Auto Layout DSL

Overview

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
You might also like...
Minimal Auto Layout in Swift
Minimal Auto Layout in Swift

Restraint Restraint is a very very small library to help make your use of NSLayoutConstraint in Swift more legible & declarative. Like programmatic vi

Swift microframework for declaring Auto Layout constraints functionally
Swift microframework for declaring Auto Layout constraints functionally

Relayout Relayout is a Swift microframework to make using Auto Layout easier with static and dynamic layouts. Why? If you want to build a UI using App

SuperLayout is a Swift library that makes using Auto Layout a breeze.
SuperLayout is a Swift library that makes using Auto Layout a breeze.

SuperLayout is a library that adds a few custom operators to Swift that makes using the amazing NSLayoutAnchor API for Auto Layout a breeze. SuperLayo

Written in pure Swift, QuickLayout offers a simple and easy way to manage Auto Layout in code.
Written in pure Swift, QuickLayout offers a simple and easy way to manage Auto Layout in code.

QuickLayout QuickLayout offers an additional way, to easily manage the Auto Layout using only code. You can harness the power of QuickLayout to align

Declarative Auto Layout in Swift, clean and simple

Tails Tails is a take on declarative Auto Layout. If you don't like typing (like me), it might be your kind of thing! Tails is written in Swift and cu

Fast Swift Views layouting without auto layout. No magic, pure code, full control and blazing fast
Fast Swift Views layouting without auto layout. No magic, pure code, full control and blazing fast

Fast Swift Views layouting without auto layout. No magic, pure code, full control and blazing fast. Concise syntax, intuitive, readable & chainable. [iOS/macOS/tvOS/CALayer]

Auto Layout made easy
Auto Layout made easy

EasyPeasy is a Swift framework that lets you create Auto Layout constraints programmatically without headaches and never ending boilerplate code. Besi

TinyConstraints is the syntactic sugar that makes Auto Layout sweeter for human use.
TinyConstraints is the syntactic sugar that makes Auto Layout sweeter for human use.

TinyConstraints is the syntactic sugar that makes Auto Layout sweeter for human use. Features Pure Swift 5 sweetness. Everything you can do with Auto

Intuitive and powerful Auto Layout library
Intuitive and powerful Auto Layout library

Align introduces a better alternative to Auto Layout anchors. Semantic. Align APIs focus on your goals, not the math behind Auto Layout constraints. P

Comments
  • Correct the spelling of CocoaPods in README

    Correct the spelling of CocoaPods in README

    This pull requests corrects the spelling of CocoaPods 🤓 https://github.com/CocoaPods/shared_resources/tree/master/media

    opened by ReadmeCritic 1
Releases(0.8.3)
Owner
Evan Liu
Evan Liu
An Impressive Auto Layout DSL for iOS, tvOS & OSX. & It is written in pure swift.

KVConstraintKit KVConstraintKit is a DSL to make easy & impressive Auto Layout constraints on iOS, tvOS & OSX with Swift Installation Using CocoaPods

Keshav Vishwkarma 90 Sep 1, 2022
A compact but full-featured Auto Layout DSL for Swift

Mortar allows you to create Auto Layout constraints using concise, simple code statements. Use this: view1.m_right |=| view2.m_left - 12.0 Instead of:

Jason Fieldman 83 Jan 29, 2022
Swifty DSL for programmatic Auto Layout in iOS

WWLayout Easy to write auto layout constraints, with minimal extensions to standard namespaces. Feature Highlights Easy to use, readable API Backwards

WW Tech 49 Oct 2, 2022
Auto Layout (and manual layout) in one line.

Auto Layout (and manual layout) in one line. Quick Look view.bb.centerX().below(view2).size(100) It’s equivalent to iOS 9 API: view.centerXAnchor.cons

Javier Zhang 74 Oct 19, 2022
Auto Layout made easy with the Custom Layout.

Auto Layout made easy with the Custom Layout. Getting started CocoaPods CocoaPods is a dependency manager for Cocoa projects. You can install it with

Malith Nadeeshan 1 Jan 16, 2022
Fast Swift Views layouting without auto layout. No magic, pure code, full control and blazing fast. Concise syntax, intuitive, readable & chainable. [iOS/macOS/tvOS/CALayer]

Extremely Fast views layouting without auto layout. No magic, pure code, full control and blazing fast. Concise syntax, intuitive, readable & chainabl

layoutBox 2.1k Dec 22, 2022
Lightweight Swift framework for Apple's Auto-Layout

I am glad to share with you a lightweight Swift framework for Apple's Auto-Layout. It helps you write readable and compact UI code using simple API. A

null 349 Dec 20, 2022
The ultimate API for iOS & OS X Auto Layout — impressively simple, immensely powerful. Objective-C and Swift compatible.

The ultimate API for iOS & OS X Auto Layout — impressively simple, immensely powerful. PureLayout extends UIView/NSView, NSArray, and NSLayoutConstrai

PureLayout 7.6k Jan 6, 2023
Auto Layout In Swift Made Easy

Swiftstraints Swiftstraints can turn verbose auto-layout code: let constraint = NSLayoutConstraint(item: blueView, attr

null 119 Jan 29, 2022
Lightweight declarative auto-layout framework for Swift

SwiftyLayout SwiftyLayout is a framework that allows to describe layout constraints (ie NSLayoutConstraint) as a simple mathematical formula in a Swif

Hisakuni Fujimoto 15 Nov 7, 2017