34,333
edits
Changes
New page: <table border="0" cellspacing="0" width="100%"> <tr> <td width="20%">Previous<td align="center">[[iOS 8 App Development Es...
<table border="0" cellspacing="0" width="100%">
<tr>
<td width="20%">[[Implementing Cross-Hierarchy Auto Layout Constraints in iOS 8|Previous]]<td align="center">[[iOS 8 App Development Essentials|Table of Contents]]<td width="20%" align="right">[[Using Size Classes to Design Universal iOS User Interfaces|Next]]</td>
<tr>
<td width="20%">Implementing Cross-Hierarchy Auto Layout Constraints in iOS 8<td align="center"><td width="20%" align="right">Using Size Classes to Design Universal iOS User Interfaces</td>
</table>
<hr>
<google>BUY_IOS8</google>
The third and final option for the creation of Auto Layout constraints involves a combination of code and the visual format language. The goal of this chapter is to provide an introduction to the visual format language and to work through some code samples that demonstrate the concept in action.
== Introducing the Visual Format Language ==
The visual format language is not a new programming language in the way that C++, Java and Swift are all programming languages. Instead, the visual format language defines a syntax through which Auto Layout constraints may be created using sequences of ASCII characters. These visual format character sequences are then turned into constraints by passing them through to the constraintsWithVisualFormat method of the NSLayoutConstraint class.
What makes the language particularly appealing and intuitive is that the syntax used to define a constraint involves characters sequences that, to a large extent, visually represent the constraint that is being created.
== Visual Language Format Examples ==
By far the easiest way to understand the concepts behind the visual format language is to look at some examples of the syntax. Take for example, visual format language syntax to describe a view object:
<pre>
[mybutton]
</pre>
As we can see, view objects are described in the visual format language by surrounding the view name with square brackets ([]).
Two views may be constrained to be positioned flush with each other by placing the views side by side in the visual format string:
<pre>
[mybutton1][mybutton2]
</pre>
Similarly, a horizontal spacer between two view objects is represented by a hyphen:
<pre>
[mybutton1]-[mybutton2]
</pre>
The above example instructs the Auto Layout system to create a constraint using the standard spacing for views. The following construct, on the other hand, specifies a spacing distance of 30 points between the two views:
<pre>
[mybutton1]-30-[mybutton2]
</pre>
By default, constraints of the type outlined above are assumed to be horizontal constraints. Vertical constraints are declared using a V: prefix. For example, the following syntax establishes a vertical spacing constraint between two views:
<pre>
V:[mylabel]-50-[mybutton]
</pre>
For consistency and completeness, horizontal constraints may, optionally, be prefixed with H:.
<google>BUY_IOS8</google>
The width of a view can be set specifically as follows:
<pre>
[mybutton(100)]
</pre>
Alternatively, inequality can be used:
<pre>
[mybutton(<=100)]
</pre>
Using similar syntax, the width of one view can be constrained to match that of a second view:
<pre>
[mylabel(==mybutton2)]
</pre>
When using the visual format language, the superview of the view for which the constraint is being described is represented by the | character. For example, the following visual format language construct declares a constraint for the mybutton1 view that attaches the leading and trailing edges of the view to the left and right edges of the containing superview with a spacing of 20 and 30 points respectively:
<pre>
|-20-[mybutton1]-30-|
</pre>
The language also allows priorities to be declared. The following excerpt specifies that the width of mybutton1 must be greater than, or equal to 70 points with a priority value of 500:
<pre>
[mybutton1(>=70@500)]
</pre>
Of particular importance, however, is the fact that the language may be used to construct multiple constraints in a single sequence, for example:
<pre>
V:|-20-[mybutton1(>=70@500)]-[mybutton2(==mybutton1)]-30-[mybutton3]-|
</pre>
== Using the constraintsWithVisualFormat Method ==
As previously described, visual language format based constraints are created via a call to the constraintsWithVisualFormat method of the NSLayoutConstraint class. There are, however a number of other arguments that the method is able to accept. The syntax for the method is as follows:
<pre>
NSLayoutConstraint.constraintsWithVisualFormat(<visual format string>,
options: <options>,
metrics: <metrics>,
views: <views dictionary>)
</pre>
The <visual format string> is, of course, the visual format language string that describes the constraints that are to be created. The <options> are required to be set when the constraint string references more than one view. The purpose of this is to indicate how the views are to be aligned and the value must be of type NSLayoutFormatOptions, for example .AlignAllLeft, .AlignAllRight, .AlignAllTop, .AlignAllBaselines etc.
The <metrics> argument is an optional NSDictionary object containing the corresponding values for any constants referenced in the format string.
Finally, the <views dictionary> is an NSDictionary object that contains the view objects that match the view names referenced in the format string.
When using a visual format string that will result in the creation of multiple constraints, the options should include an alignment directive such as NSLayoutFormatOptions.AlignAllBaseLines.
Since the method is able to create multiple constraints based on the visual format string, it returns an array of NSLayoutConstraint objects, one for each constraint, which must then be added to the appropriate view object.
Some sample code to create views and then specify multiple constraints using a visual format language string, would, therefore, read as follows:
<pre>
// Get a reference to the superview
let superview = self.view
//Create a label
let myLabel = UILabel()
myLabel.setTranslatesAutoresizingMaskIntoConstraints(false)
myLabel.text = "My Label"
//Create a button
let myButton = UIButton()
myButton.backgroundColor = UIColor.redColor()
myButton.setTitle("My Button", forState: UIControlState.Normal)
myButton.setTranslatesAutoresizingMaskIntoConstraints(false)
// Add the button and label to the superview
superview.addSubview(myLabel)
superview.addSubview(myButton)
// Create the views dictionary
let viewsDictionary = ["myLabel": myLabel, "myButton": myButton]
// Create and add the vertical constraints
superview.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|-[myButton]-|",
options: NSLayoutFormatOptions.AlignAllBaseline,
metrics: nil,
views: viewsDictionary))
// Create and add the horizontal constraints
superview.addConstraints(NSLayoutConstraint.constraintsWithVisualForma
("|-[myButton]-[myLabel(==myButton)]-|",
options: NSLayoutFormatOptions.AlignAllBaseline,
metrics: nil,
views: viewsDictionary))
</pre>
== Summary ==
The visual format language allows Auto Layout constraints to be created using sequences of characters that have been designed to visually represent the constraint that is being described. Visual format strings are converted into constraints via a call to the constraintsWithVisualFormat method of the NSLayoutConstraints class which, in turn, returns an array containing an NSLayoutConstraint object for each new constraint created as a result of parsing the visual format string.
<google>BUY_IOS8</google>
<hr>
<table border="0" cellspacing="0" width="100%">
<tr>
<td width="20%">[[Implementing Cross-Hierarchy Auto Layout Constraints in iOS 8|Previous]]<td align="center">[[iOS 8 App Development Essentials|Table of Contents]]<td width="20%" align="right">[[Using Size Classes to Design Universal iOS User Interfaces|Next]]</td>
<tr>
<td width="20%">Implementing Cross-Hierarchy Auto Layout Constraints in iOS 8<td align="center"><td width="20%" align="right">Using Size Classes to Design Universal iOS User Interfaces</td>
</table>
<tr>
<td width="20%">[[Implementing Cross-Hierarchy Auto Layout Constraints in iOS 8|Previous]]<td align="center">[[iOS 8 App Development Essentials|Table of Contents]]<td width="20%" align="right">[[Using Size Classes to Design Universal iOS User Interfaces|Next]]</td>
<tr>
<td width="20%">Implementing Cross-Hierarchy Auto Layout Constraints in iOS 8<td align="center"><td width="20%" align="right">Using Size Classes to Design Universal iOS User Interfaces</td>
</table>
<hr>
<google>BUY_IOS8</google>
The third and final option for the creation of Auto Layout constraints involves a combination of code and the visual format language. The goal of this chapter is to provide an introduction to the visual format language and to work through some code samples that demonstrate the concept in action.
== Introducing the Visual Format Language ==
The visual format language is not a new programming language in the way that C++, Java and Swift are all programming languages. Instead, the visual format language defines a syntax through which Auto Layout constraints may be created using sequences of ASCII characters. These visual format character sequences are then turned into constraints by passing them through to the constraintsWithVisualFormat method of the NSLayoutConstraint class.
What makes the language particularly appealing and intuitive is that the syntax used to define a constraint involves characters sequences that, to a large extent, visually represent the constraint that is being created.
== Visual Language Format Examples ==
By far the easiest way to understand the concepts behind the visual format language is to look at some examples of the syntax. Take for example, visual format language syntax to describe a view object:
<pre>
[mybutton]
</pre>
As we can see, view objects are described in the visual format language by surrounding the view name with square brackets ([]).
Two views may be constrained to be positioned flush with each other by placing the views side by side in the visual format string:
<pre>
[mybutton1][mybutton2]
</pre>
Similarly, a horizontal spacer between two view objects is represented by a hyphen:
<pre>
[mybutton1]-[mybutton2]
</pre>
The above example instructs the Auto Layout system to create a constraint using the standard spacing for views. The following construct, on the other hand, specifies a spacing distance of 30 points between the two views:
<pre>
[mybutton1]-30-[mybutton2]
</pre>
By default, constraints of the type outlined above are assumed to be horizontal constraints. Vertical constraints are declared using a V: prefix. For example, the following syntax establishes a vertical spacing constraint between two views:
<pre>
V:[mylabel]-50-[mybutton]
</pre>
For consistency and completeness, horizontal constraints may, optionally, be prefixed with H:.
<google>BUY_IOS8</google>
The width of a view can be set specifically as follows:
<pre>
[mybutton(100)]
</pre>
Alternatively, inequality can be used:
<pre>
[mybutton(<=100)]
</pre>
Using similar syntax, the width of one view can be constrained to match that of a second view:
<pre>
[mylabel(==mybutton2)]
</pre>
When using the visual format language, the superview of the view for which the constraint is being described is represented by the | character. For example, the following visual format language construct declares a constraint for the mybutton1 view that attaches the leading and trailing edges of the view to the left and right edges of the containing superview with a spacing of 20 and 30 points respectively:
<pre>
|-20-[mybutton1]-30-|
</pre>
The language also allows priorities to be declared. The following excerpt specifies that the width of mybutton1 must be greater than, or equal to 70 points with a priority value of 500:
<pre>
[mybutton1(>=70@500)]
</pre>
Of particular importance, however, is the fact that the language may be used to construct multiple constraints in a single sequence, for example:
<pre>
V:|-20-[mybutton1(>=70@500)]-[mybutton2(==mybutton1)]-30-[mybutton3]-|
</pre>
== Using the constraintsWithVisualFormat Method ==
As previously described, visual language format based constraints are created via a call to the constraintsWithVisualFormat method of the NSLayoutConstraint class. There are, however a number of other arguments that the method is able to accept. The syntax for the method is as follows:
<pre>
NSLayoutConstraint.constraintsWithVisualFormat(<visual format string>,
options: <options>,
metrics: <metrics>,
views: <views dictionary>)
</pre>
The <visual format string> is, of course, the visual format language string that describes the constraints that are to be created. The <options> are required to be set when the constraint string references more than one view. The purpose of this is to indicate how the views are to be aligned and the value must be of type NSLayoutFormatOptions, for example .AlignAllLeft, .AlignAllRight, .AlignAllTop, .AlignAllBaselines etc.
The <metrics> argument is an optional NSDictionary object containing the corresponding values for any constants referenced in the format string.
Finally, the <views dictionary> is an NSDictionary object that contains the view objects that match the view names referenced in the format string.
When using a visual format string that will result in the creation of multiple constraints, the options should include an alignment directive such as NSLayoutFormatOptions.AlignAllBaseLines.
Since the method is able to create multiple constraints based on the visual format string, it returns an array of NSLayoutConstraint objects, one for each constraint, which must then be added to the appropriate view object.
Some sample code to create views and then specify multiple constraints using a visual format language string, would, therefore, read as follows:
<pre>
// Get a reference to the superview
let superview = self.view
//Create a label
let myLabel = UILabel()
myLabel.setTranslatesAutoresizingMaskIntoConstraints(false)
myLabel.text = "My Label"
//Create a button
let myButton = UIButton()
myButton.backgroundColor = UIColor.redColor()
myButton.setTitle("My Button", forState: UIControlState.Normal)
myButton.setTranslatesAutoresizingMaskIntoConstraints(false)
// Add the button and label to the superview
superview.addSubview(myLabel)
superview.addSubview(myButton)
// Create the views dictionary
let viewsDictionary = ["myLabel": myLabel, "myButton": myButton]
// Create and add the vertical constraints
superview.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|-[myButton]-|",
options: NSLayoutFormatOptions.AlignAllBaseline,
metrics: nil,
views: viewsDictionary))
// Create and add the horizontal constraints
superview.addConstraints(NSLayoutConstraint.constraintsWithVisualForma
("|-[myButton]-[myLabel(==myButton)]-|",
options: NSLayoutFormatOptions.AlignAllBaseline,
metrics: nil,
views: viewsDictionary))
</pre>
== Summary ==
The visual format language allows Auto Layout constraints to be created using sequences of characters that have been designed to visually represent the constraint that is being described. Visual format strings are converted into constraints via a call to the constraintsWithVisualFormat method of the NSLayoutConstraints class which, in turn, returns an array containing an NSLayoutConstraint object for each new constraint created as a result of parsing the visual format string.
<google>BUY_IOS8</google>
<hr>
<table border="0" cellspacing="0" width="100%">
<tr>
<td width="20%">[[Implementing Cross-Hierarchy Auto Layout Constraints in iOS 8|Previous]]<td align="center">[[iOS 8 App Development Essentials|Table of Contents]]<td width="20%" align="right">[[Using Size Classes to Design Universal iOS User Interfaces|Next]]</td>
<tr>
<td width="20%">Implementing Cross-Hierarchy Auto Layout Constraints in iOS 8<td align="center"><td width="20%" align="right">Using Size Classes to Design Universal iOS User Interfaces</td>
</table>