Auto Layout Visual Format Language

451 views
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
Do NOT follow this link or you will be banned from the site!