CalcuLayout is a domain specific language to make iOS AutoLayout easy, intuitive, and look like simple math.
Due to upgrading to Swift 3, certain parts of the framework are bugged. If you know a solution, please send a pull request :) Current issues include:
- Adjacent operators are in unordered precedence groups 'ConstraintPrecedence' and 'AdditionPrecedence'
- ConstraintPrecedence is declared with higherThan precedence set to BitwiseShiftPrecedence!
This is how constraints are added natively in Swift through Anchors:
button.widthAnchor.constraintEqualToAnchor(button.heightAnchor, multiplier: 2.0, constant: 40.0).active = trueThis is how constraints are added using CalcuLayout
button.width <> button.height * 2^ + 40^++To make a constraint connecting two anchors or an anchor and a constant, you use the <> operator.
// Normal Way
button.widthAnchor.constraintEqualToAnchor(button.heightAnchor)
// CalcuLayout Way
button.width <> button.heightAlternatively, you can use the == operator.
// CalcuLayout way
button.width == button.heightWarning: This operator can cause confusion as == is normally used for comparison
To make a constraint connecting two anchors, you use the <> operator.
// Normal Way
button.widthAnchor.constraintGreaterThanOrEqualToAnchor(button.heightAnchor)
button.widthAnchor.constraintLessThanOrEqualToAnchor(button.heightAnchor)
// CalcuLayout Way
button.width >> button.height
button.width << button.widthAlternatively, you can use the >= and <= operator.
// CalcuLayout Way
button.width >= button.height
button.width <= button.widthWarning: This operator can cause confusion as >= and <= are normally used for comparison
To make a constraint connecting two anchors or an anchor and a constant, you use the <> operator.
// Normal Way
button.widthAnchor.equalToConstant(100)
// CalcuLayout Way
button.width <> 100^To convert a number into a Layout Modifier, you simply use the postfix operator ^
100^Alternatively, you can use the method C or M. Functionally they do the same thing but can make it easier to read.
100.C
100.MNow to actually apply a Layout Constraint as a constant:
// Normal Way
button.widthAnchor.constraintEqualToAnchor(button.heightAnchor, constant: 40.0)
// CalcuLayout Way
button.width <> button.height + 40^
// or
// button.width <> button.height + 40.CAdding a multiplier is very similar to a constant
// Normal Way
button.widthAnchor.constraintEqualToAnchor(button.heightAnchor, multiplier: 2.0)
// CalcuLayout Way
button.width <> button.height * 2^
// or
// button.width <> button.height + 40.MNormally, you activate a constraint by setting it's active property to true With CalcuLayout, you activate a constraint by using the ++ at the end of the constraint's expression
// Normal One Liner Way
button.widthAnchor.constraintEqualToAnchor(button.heightAnchor, constant: 50.0, multiplier: 2.0).active = true
// CalcuLayout One Liner Way
button.width <> button.height + 50^ * 2^++
// Normal Two Liner Way
let constraint = button.widthAnchor.constraintEqualToAnchor(button.heightAnchor, constant: 50.0, multiplier: 2.0)
constraint.active = true
// CalcuLayout Two Liner Way
let constraint = button.width <> button.height + 50^ * 2^
constraint++
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent