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.