X

    Get a Quote

    Auto Layout Visual Format Language

    934 views
    Amit Shukla

    Visual Format is used to apply constraints programmatically with fewer lines 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 the 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 the name of the 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

    Avatar for Amit
    The Author
    Amit Shukla
    Director of NBT
    Amit Shukla is the Director of Next Big Technology, a leading IT consulting company. With a profound passion for staying updated on the latest trends and technologies across various domains, Amit is a dedicated entrepreneur in the IT sector. He takes it upon himself to enlighten his audience with the most current market trends and innovations. His commitment to keeping the industry informed is a testament to his role as a visionary leader in the world of technology.