Auto Layout Visual Format Language

Auto Layout Visual Format Language

Visual Format is used to apply constraint programmatically with less line of code.

It follows a syntax :-

(< orientation >:)?
(< superview >< connection >)?
< view >(< connection >< view >)*
(< connection >< superview >)?

Terms
1. < orientation > –
1. Horizontal Orientation – denote by “H”
2. Vertical Orientation – denote by “V”

2. < superview >< connection > –
Spacing between superview and view (top and leading spacing) – denotes by “ | ”

3. < view >(< connection >< view >) –

Views can be button, textview, etc
4. (< connection >< superview >)
Spacing between view and superview (bottom and trailing spacing) – denotes by “ | ”

Available Symbols :-

1. “ – ” —> Standard spacing (Default is 8)
2. “ == ” —> Equal width and height
for example view1 == view2 i.e view2 will have same width as view1
3. “-20- ” —> 20 points spacing will be giving on both ends
4. “ <= ” —> less than or equal to
5. “ >= “ —> greater than or equal to
6. “@250” —> priority of constraint (250 Lower, 750 Higher , 1000 required)
7. “ ( ) ” —> Defines Size of view
8. “ [ ] ” —> Brackets use to define name of view (label, button etc)

Example :-
View1 —>H:|-10-[view1]-10-|
View2 —> H:|-10-[view2]-10-|
View3 —> H:|-10-[view3]-10-|
View4 —>. H:|-10-[view4]-10-|

NSLayoutConstraint.constraintsWithVisualFormat(“V: |-20-[view1(30)]-10-[view2(==view1]-10-[view3(==view1)]-10-[view4(<=20,>=50)]]

In this
There are 4 views which are giving 10 leading and trailing spacing from safeArea
Then they all are vertically align to each other
. On top there is view1 having 20 top spacing from safe area and 10 Bottom spacing from view2 and having size(height) of 30
. View2 has assign equal width that of view1 and having 10 top spacing to view1 and 10 bottom spacing to view 3
. View3 has assign equal width that of view1 and having 10 top spacing to view1 and 10 bottom spacing to view 4
. View4 having 10 top spacing to view3 and have a height of at least 20 points but no more than 50 points (>=20,<=50)

import UIKit

class FirstViewController: UIViewController {

overridefunc viewDidLoad() {
super.viewDidLoad()

let topBar = UIView()
let middleFrameTop = UIView()
let middleFrameBottom = UIView()
let bottomBar = UIView()

topBar.backgroundColor = UIColor.green
middleFrameTop.backgroundColor = UIColor.black
middleFrameBottom.backgroundColor = UIColor.blue
bottomBar.backgroundColor = UIColor.purple

self.view.addSubview(topBar)
self.view.addSubview(middleFrameTop)
self.view.addSubview(middleFrameBottom)
self.view.addSubview(bottomBar)

topBar.translatesAutoresizingMaskIntoConstraints = false
middleFrameTop .translatesAutoresizingMaskIntoConstraints = false
middleFrameBottom.translatesAutoresizingMaskIntoConstraints = false
bottomBar.translatesAutoresizingMaskIntoConstraints = false
let viewsDict = [“topBar”:topBar,”middleFrameTop”:middleFrameTop,”middleFrameBottom”: middleFrameBottom,”bottomBar”:bottomBar]

var viewConstraints = [NSLayoutConstraint]()
let topBarCondtraintsHorizontal = NSLayoutConstraint.constraints(withVisualFormat: “H:|-10-[topBar]-10-|”, options: [], metrics: nil, views: viewsDict)

viewConstraints += topBarCondtraintsHorizontal

let middleFrameTopHorizontal = NSLayoutConstraint.constraints(withVisualFormat: “H:|-10-[middleFrameTop]-10-|”, options: [], metrics: nil, views: viewsDict)
viewConstraints += middleFrameTopHorizontal

let middleFrameBottomHorizontal = NSLayoutConstraint.constraints(withVisualFormat: “H:|-10-[middleFrameBottom]-10-|”, options: [], metrics: nil, views: viewsDict)
viewConstraints += middleFrameBottomHorizontal

let bottomBarHorizontal = NSLayoutConstraint.constraints(withVisualFormat: “H:|-10-[bottomBar]-10-|”, options: [], metrics: nil, views: viewsDict)
viewConstraints += bottomBarHorizontal

let verticalConstraints = NSLayoutConstraint.constraints(
withVisualFormat: “V:|-20-[topBar(50)]-10-[middleFrameTop(==topBar)]-10-[middleFrameBottom(==topBar)]-10-[bottomBar(<=20,>=50)]-20-|”,
options: [], metrics: nil, views: viewsDict)
viewConstraints += verticalConstraints

NSLayoutConstraint.activate(viewConstraints)
}

}

Output : –

Auto Layout Visual Format Language

Summary
Review Date
Reviewed Item
Auto Layout Visual Format Language
Author Rating
51star1star1star1star1star