Thursday 3 April 2014

Visual Language Format Examples :

I followed below this post : http://www.techotopia.com/index.php/Understanding_the_iOS_6_Auto_Layout_Visual_Format_Language

The visual format language is not a new programming language in the way that C++, Java and Objective-C 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.

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:

[mybutton]
 
 
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:

[mybutton1][mybutton2]
 

Similarly, a horizontal spacer between two view objects is represented by a hyphen:
 
[mybutton1]-[mybutton2]
 
 
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:
 
[mybutton1]-30-[mybutton2]
 
 
 
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:
 
V:[mylabel]-50-[mybutton]
 

For consistency and completeness, horizontal constraints may, optionally, be prefixed with H:.
The width of a view can be set specifically as follows:
 
[mybutton(100)]


Alternatively, inequality can be used:
 
[mybutton(<=100)]


Using similar syntax, the width of one view can be constrained to match that of a second view:
 
[mylabel(==mybutton2)]


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:
 
|-20-[mybutton1]-30-|


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:
 
[mybutton1(>=70@500)]


Of particular importance, however, is the fact that the language may be used to construct multiple constraints in a single sequence, for example:
 
V:|-20-[mybutton1(>=70@500)]-[mybutton2(==mybutton1)]-30-[mybutton3]-|
 
 

No comments:

Post a Comment