Auto Layout with Visual Format Language

Constraints with VFL to create view

Using Visual Format Language, with a single line of code, you can specify multiple constraints in either the horizontal or vertical direction.

Available Symbols in VFL:

Visual Format Syntax:-

Some example of VFL and respective view image:-

1. VFL and 2: View layout look
1. VFL and 2: Two views layout vertically with spacing 10
1. VFL and 2: View layout look

Refer apple doc for more example

Example Format String:

H:|-[label(50)]-10-[button(150)]-10-[textField(>=100)]-|
V:[button(50)]-10-[View(50)

Creating Constraints

Apple provides the class method constraints(withVisualFormat:options:metrics:views:) on NSLayoutConstraint to create constraints.

let views: [String: Any] = [
"label": label,
"button": button,
"textfield": textfield,
"view": view
]
let horizontalConstraints= NSLayoutConstraint.constraints(
withVisualFormat: "H:|-[label(50)]-10-[button(150)]-10-[textField(>=100)]-|",
metrics: nil,
views: views)
let verticalConstraints = NSLayoutConstraint.constraints(
withVisualFormat: "V:[button]-10-[View(50)",
metrics: nil,
views: views)
NSLayoutConstraint.activate(horizontalConstraints)NSLayoutConstraint.activate(verticalConstraints)

Metrics:

Metrics are a dictionary of number values that can appear inside the VFL format string. These are particularly useful if you have standardized spacing or calculated size values that you can’t type directly into the format string.

private enum Metrics {
static let padding: CGFloat = 10
}
let metrics = [
"horizontalPadding": Metrics.padding
]
let horizontal= NSLayoutConstraint.constraints(
withVisualFormat: "H:|-[label(50)]-horizontalPadding-[button(150)]-horizontalPadding-[textField(>=100)]-|",
metrics: metrics,
views: views)

use view.safeAreaInsets to calculate safe area

Layout Options:

Layout options provide the ability to manipulate view constraints perpendicular to the current layout orientation being defined.

E.g: — Apply vertical centering to all views in a horizontal layout orientation by using NSLayoutFormatOptions.AlignAllCenterY

NSLayoutConstraint.constraints(
withVisualFormat: "H:|-[label(50)]-horizontalPadding-[button(150)]-horizontalPadding-[textField(>=100)]-|",
options: [.alignAllCenterY],
metrics: nil,
views: views)

Demo:-


let
redView = UIView()
redView.backgroundColor = .redredView.translatesAutoresizingMaskIntoConstraints = falseview.addSubview(redView)let horizontalConstraints = NSLayoutConstraint.constraints(withVisualFormat: "H:|[redView]|", options: .directionLeftToRight, metrics: nil, views: ["redView": redView])let verticalConstraints = NSLayoutConstraint.constraints(withVisualFormat: "V:|[redView]|", options: .alignAllTop, metrics: nil, views: ["redView": redView])NSLayoutConstraint.activate(horizontalConstraints)NSLayoutConstraint.activate(verticalConstraints)
let redView = UIView()redView.backgroundColor = .redredView.translatesAutoresizingMaskIntoConstraints  = falseview.addSubview(redView)let greenView = UIView()greenView.backgroundColor = .greengreenView.translatesAutoresizingMaskIntoConstraints  = falseview.addSubview(greenView)let views = ["redView": redView, "greenView": greenView]let horizontalConstraints = NSLayoutConstraint.constraints(withVisualFormat: "H:|[redView(>=100,<=200@20)]-0-[greenView(==redView)]|", options: .directionLeftToRight, metrics: nil, views: views)let verticalConstraints = NSLayoutConstraint.constraints(withVisualFormat: "V:|[redView]|", options: .alignAllTop, metrics: nil, views: views)let verticalConstraintsForGreen = NSLayoutConstraint.constraints(withVisualFormat: "V:|[greenView]|", options: .alignAllTop, metrics: nil, views: views)NSLayoutConstraint.activate(horizontalConstraints)NSLayoutConstraint.activate(verticalConstraints)NSLayoutConstraint.activate(verticalConstraintsForGreen)

let
redView = UIView()
redView.backgroundColor = .redredView.translatesAutoresizingMaskIntoConstraints = falseview.addSubview(redView)let views = ["redView": redView]let horizontalConstraints = NSLayoutConstraint.constraints(withVisualFormat: "H:|-50-[redView]-50-|", options: .directionLeftToRight, metrics: nil, views: views)let verticalConstraints = NSLayoutConstraint.constraints(withVisualFormat: "V:|-50-[redView(100)]", options: .alignAllTop, metrics: nil, views: views)NSLayoutConstraint.activate(horizontalConstraints)NSLayoutConstraint.activate(verticalConstraints)

I hope you find this blog helpful. If you enjoyed it, feel free to hit the clap button below 👏 to help others find it! and follow me on Medium. Thanks for reading ❤❤❤❤.

iOS Developer in walmart