In Bite #98, we learned how to work with Auto Layout in code. While this helped us gain a ton of flexibility, our code is now a bit... verbose. For simple layouts this won't be a big deal, but for anything complex we would quickly rack of hundreds of lines of code for just our layout. Today we'll look at one solution for this issue: Auto Layout's Visual Format Language. Let's take a look.
Before jumping into code, let's look at the Visual Format Language itself. It's essentially just a string that the system parses and turns into an array of NSLayoutConstraint objects:
The two pipes on the outside represent the superview. The dashes represent spacing, in this case, the system-standard spacing. Views are described with a name in brackets.
When parsed, this would create 2 new constraints: 1 leading and 1 trailing. It would keep the header the standard spacing away from the left and right edges of the superview. To let the system know our views by name we put them in a dictionary:
let views = [ "header": header ]
If we wanted to use a specific spacing amount we could describe that within dashes on the edges of our Visual Format Language:
That's fine for simple spacing, but what if we needed to reference lots of numeric values? We can name those and put them in a dictionary just like our views:
Now that we have a basic understanding, we can add our first set of constraints:
container.addConstraints( NSLayoutConstraint.constraintsWithVisualFormat( "|-[header]-|", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: [ "header": header ] ) )
We can prepend a
V: to describe constraints along the horizontal or vertical axes. If we don't prepend either, horizontal is assumed.
We can use parenthesis to describe a view's width or height:
Let's add 2 more constraints to pin our header to the top, and give it a fixed height:
container.addConstraints( NSLayoutConstraint.constraintsWithVisualFormat( "V:|[header(headerHeight)]", options: NSLayoutFormatOptions(rawValue: 0), metrics: [ "headerHeight": 180.0 ], views: [ "header": header ] ) )
We've only scratched the surface of what's possible with Visual Format Language. In the future we'll look at configuring inequalities, constraint priorities, and more.