Declarative Auto Layout in Swift, clean and simple

Related tags

Layout Tails
Overview

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 currently supports iOS only. OSX support is coming soon.

Usage

Meet the tail operator (™): ~. It lets you use your views in fully fledged layout equations. All you need to do is grow them little tails:

Tails.install(
    view1~.top == self.topLayoutGuide~.bottom,
    view1~.left == view1.superview~,
    view1~.width == 50,

    view2~.top == view1~,
    view2~.trailing == view1~.leading + 10,
    view2~.width >= view1~ * 2
)

Things become really cool with composite layout attributes:

Tails.install(
    view1~.size == CGSize(width: 60, height: 40),
    view1~.center == view2~ - CGPoint(x: 0, y: 20),

    view2~.edges == view2.superview~,
    
    view3~.top.left.width == view1~
)

Attributes

All NSLayoutAttribute values are available in Tails, as such: left, right, top, bottom, leading, trailing, width, height, centerX, centerY, baseline.

It is possible to use multiple attributes in the same equation by simply chaining them: top.left. There are several predefined composed ones: size (width.height), center (centerX.centerY.) and edges (top.left.bottom.right).

You may omit right side attributes to infer them from the left side of equation:

Tails.install(
    headerView~.top.left.right == containerView~
)

Constants

Layout constants in Tails are not limited to scalar values. It is possible to use such structs as CGPoint, CGSize and UIEdgeInsets. They only affect specific layout attributes:

Constant Attribute
CGPoint.x centerX
CGPoint.y centerY
CGSize.width width
CGSize.height height
UIEdgeInsets.top top
UIEdgeInsets.left left
-UIEdgeInsets.bottom bottom
-UIEdgeInsets.right right

For instance, this code:

let insets = UIEdgeInsets(top: 10, left: 20, bottom: 40, right: 20)

Tails.install(
    view~.top.left.right == superview~ + insets,
    view~.bottom == footerView~.top + insets
)

Is equivalent to:

Tails.install(
    view~.top == superview~ + 10
    view~.left == superview~ + 20
    view~.right == superview~ - 20
    view~.bottom == footerView~.top - 40
)

Priority

Use ~~ operator to specify constraint priority:

Tails.install(
    view1~.width <= view2~ ~~ UILayoutPriorityDefaultLow
)

Tips and tricks

For alignment attributes, you may omit the right side view to refer to the left superview:

let insets = UIEdgeInsets(...)

Tails.install(
    view~.edges == insets
    // same as view~.edges == view.superview~.edges + insets
)

Coming soon

  • OSX support
  • Tests (yeah, I know)
  • More examples
  • Constraint manipulation
  • Kitties

About

Tails shamelessly borrows many ideas from the wonderful Masonry by Jonas Budelmann.

If you like Auto Layout DSL, you might also want to try Cartography by Robert Böhnke.

You might also like...
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]

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

Lightweight Swift framework for Apple's Auto-Layout
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

An Impressive Auto Layout DSL for  iOS, tvOS & OSX. & It is written in pure swift.
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

A compact but full-featured Auto Layout DSL for Swift
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:

Auto Layout In Swift Made Easy

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

Yet Another Swift Auto Layout DSL
Yet Another Swift Auto Layout DSL

FormationLayout Documentation FormationLayout is the top level layout class for one root view. FormationLayout takes a UIView as its rootView. transla

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

Owner
Nick Tymchenko
Nick Tymchenko
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
⚓️ Declarative, extensible, powerful Auto Layout

EasyAnchor ❤️ Support my apps ❤️ Push Hero - pure Swift native macOS application to test push notifications PastePal - Pasteboard, note and shortcut m

Khoa 449 Nov 10, 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
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
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

Daniel Huri 243 Oct 28, 2022
Very simple swipe-to-dismiss, supporting Auto Layout and dynamic heights

PanelPresenter Add swipe-dismiss logic to your view controller, supporting Auto Layout and dynamic heights. Installation Add this package to your proj

Pim 3 Aug 23, 2022
A declarative UIKit for improve layout productivity when developing an iOS application

TifoKit A declarative UIKit for improve layout productivity when developing an iOS application Requirements Min. iOS 11 Swift 5+ Installation Currentl

Tifo Audi A.P 22 Aug 9, 2022
Harness the power of AutoLayout NSLayoutConstraints with a simplified, chainable and expressive syntax. Supports iOS and OSX Auto Layout

Masonry Masonry is still actively maintained, we are committed to fixing bugs and merging good quality PRs from the wider community. However if you're

null 18k Jan 5, 2023
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