Visual Formatting Language in iOS

VFL For Auto layout
Gagan Vishal Mishra

Apple provides VFL for handling the auto layout of the views added in a super
view. VFL stands for “Visual Format Language”. VFS allows the concise building
of the app layout using ASCII type art in string format.
Writing a single line code, VFL can specify multiple constraints. This tutorial will
be using a single below method
Objective-C:
+ (NSArray *) constraintsWithVisualFormat:(NSString *) format
options:(NSLayoutFormatOptions) opts metrics:(NSDictionary *) metrics
views:(NSDictionary *) views
Swift:
NSLayoutConstraint.constraints(withVisualFormat: String, options:
NSLayoutFormatOptions, metrics: [String: Any]? views: [String: Any])

We will be working on below method
NSLayoutConstraint.constraints(withVisualFormat: String, options:
NSLayoutFormatOptions, metrics: [String: Any]? views: [String: Any])
1. Views: This dictionary argument contains each view referred in layout string.
This dictionary contains a mapping of view to its name as below
let dicotionaryOfView = [“view1”: view1, “view2”, view2,.,...]
where view1, view2 are a subclass of UIView (label, image view etc.) In English ‘It
creates a dictionary where the name of your variable is the key and variable is the
object’.
2. Metrics: This is also a dictionary mapping between constants and their
corresponding keys. It can be used to centralized numbers that can be used in
layout operations. For example
let metricsDict = [“width”: 200, “height”:230,” padding”: 20,…..]

3. Options: It provides symmetricity & relation between views Added on super
view. For example, in a horizontal layout, it would be common to align the tops
and bottoms of all of the views in the VFL statement. For instance, we can
pass [. AlignAllTop |. AlignAllBottom] in the argument label. Apple provides
following option
• AlignAllCenterX
• AlignAllCenterY
• AlignAllLeading
• AlignAllTraining
• AlignAllLeft
• AlignAllRight
• AlignAllTop
• AlignAllBottom
• AlignAllBaseline
For more please go on Apple Documentation

4. Format: This is the focus point of the topic. Before explaining we must be
aware about the symbols in VFL
a) H : For horizontal layout. It is optional
b) V : For vertical Layout
c) | : Represent super view by a pipe
d) - : Standard spacing. Usually 8 points from super view.
e) -C- : Non-standard spacing by C (constant) points
f) == : Represents equality. Can be omitted.
g) >+ :Greater than or equal to option.
h) <= : Less than or equal to.
i) [] : Views are enclosed within square brackets.
j) @ : Use to represent priority of the added constraint. It has following
three options
i. 250 - Low
ii. 750 – High
iii. 1000 – Required

Don’t try to fit every facet of your layout into a single VFL string. All the method
does is parse the VFL, make individual constraints and return them as an
array. We have to be expressing at least one constraint though, otherwise the
string is meaningless. Below are some samples
1. |-[yourView]-| : yourView must have standard spacing from left & right.
2. |-[yourView] : yourView has standard spacing from left.
3. | [ yourView] : yourView must be align to the left.
4. |-20.0- [ yourView]-20-| : YourView must be 20 points spacing from left &
right edge of super view.
5. |- padding - [ yourView]- padding -| : YourView must be padding constant
points spacing from left & right edge of super view.
6. [ yourView(width)] : View must be 200.0 wide (width taken from metricsDict).
As we know ‘H’ optional so we cam omit. If we add H then expression will be
H:|[ yourView(width)]
7. V:|-[ yourView (50.0)] : yourView must have height of 50.0 points and
standard spacing from left edge of super view.

8. |- [ yourViewFirst(yourViewSecond)]-[yourViewSecond]-| : yourViewFirst
must be of width as yourViewSecond. yourViewFirst has standard spacing
from left edge of super-view. yourViewSecond has standard spacing from left
edge of super-view. yourViewFirst & yourViewSecond has standard spacing
between them.
9. -[yourView]- : ?? Nothing. Meaningless but why? Do you have answer 

Let’s have examples format string
H:|-[imageView(==viewInfo)]-20-[nameLabel(120)]-10@750-[viewInfo(>=50)]-|
In above example
1. H: Represents horizontal spacing.
2. |-[imageView Represents standard spacing i.e. should be of 8 points from
the left edge of super view.
3. (==viewInfo) Represents that imageView width must be equal to width of
viewInfo.
4. ]-20-[ nameLabel Represents imageView trailing edge must be of 20 points
from nameLabel.
5. (120) Represents nameLabel must be of width 120.
6. - 10@750- Represents nameLable should have trailing space of 20 from
viewInfo with priority High (i.e. 750)
7. viewInfo(>=50) Represents viewInfo must have width greater than or equal
to 50 points.
8. -| Represents standard spacing from right edge of super view.

Consider below example
V:|-(==padding)-[imageView]->=0-[button]-(==padding)-|
In above example padding is constant which is being passed as metrics
1. The top of the image view must be padding points from the top of the super
view
2. The bottom of the image view must be greater than or equal to 0 points from
the top of the button
3. The bottom of the button must be padding points from the bottom of the super
view.

Visual Formatting Language in iOS

Recommended

More Related Content

What's hot (15)

Similar to Visual Formatting Language in iOS (20)

More from Gagan Vishal Mishra (9)

Recently uploaded (20)

Visual Formatting Language in iOS

Editor's Notes