VFL symbols to describe your layout
- V Vertical Layout
- H Horizontal Layout
- | superview
- - standard spacing (usually 8 points)
- == equal widths
- -20- non standard spacing (20 points)
- <= less than or equal to
- >= greater than or equal to
- @ priority can have any value between 0 and 1000
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
//Add a button programmatically
addButton1()
//Add a button programmatically using Auto Layout Visual Format Language (VFL)
addButton2()
//Add two buttons side by side programmatically using Auto Layout Visual Format Language (VFL)
addButton3()
//Add two buttons one below another programmatically using Auto Layout Visual Format Language (VFL)
addButton4()
}
func addButton1(){
let button = UIButton(frame: CGRect(x: 100, y: 50, width: 200, height: 50))
button.setTitle("My first Button", for: .normal)
button.setTitleColor(.red, for: .normal)
button.backgroundColor = UIColor(red: 0.4, green: 1.0, blue: 0.2, alpha: 0.5)
button.layer.cornerRadius = 10;
button.layer.borderWidth = 1
button.layer.borderColor = UIColor.black.cgColor
button.clipsToBounds = true;
button.addTarget(self, action: #selector(buttonAction), for: .touchUpInside)
self.view.addSubview(button)
}
func addButton2(){
let button2 = UIButton()
button2.setTitle("My second Button", for: .normal)
button2.backgroundColor = UIColor.red
self.view.addSubview(button2)
button2.translatesAutoresizingMaskIntoConstraints = false
var allConstraints: [NSLayoutConstraint] = []
let views = ["view": view!, "button2": button2]
let horizontalConstraints = NSLayoutConstraint.constraints(withVisualFormat: "H:|-(>=10)-[button2(200)]-(>=10)-|", metrics: nil, views: views)
allConstraints += horizontalConstraints
button2.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
let verticalConstraints = NSLayoutConstraint.constraints(withVisualFormat: "V:|-(<=120)-[button2(50)]", metrics: nil, views: views)
allConstraints += verticalConstraints
NSLayoutConstraint.activate(allConstraints)
button2.addTarget(self, action: #selector(buttonAction), for: .touchUpInside)
}
func addButton3(){
let button1 = UIButton()
button1.setTitle("Third Button", for: .normal)
button1.backgroundColor = UIColor.black
self.view.addSubview(button1)
let button2 = UIButton()
button2.setTitle("Fourth Button", for: .normal)
button2.backgroundColor = UIColor.black
self.view.addSubview(button2)
button1.translatesAutoresizingMaskIntoConstraints = false
button2.translatesAutoresizingMaskIntoConstraints = false
var allConstraints: [NSLayoutConstraint] = []
let views = ["button1": button1, "button2": button2]
let horizontalConstraints = NSLayoutConstraint.constraints(withVisualFormat: "H:|-[button1(200)]-(>=10)-[button2(200)]-|", metrics: nil, views: views)
allConstraints += horizontalConstraints
let button1verticalConstraints = NSLayoutConstraint.constraints(withVisualFormat: "V:|-(<=200)-[button1(50)]", metrics: nil, views: views)
allConstraints += button1verticalConstraints
let button2verticalConstraints = NSLayoutConstraint.constraints(withVisualFormat: "V:|-(<=200)-[button2(50)]", metrics: nil, views: views)
allConstraints += button2verticalConstraints
NSLayoutConstraint.activate(allConstraints)
button1.addTarget(self, action: #selector(buttonAction), for: .touchUpInside)
button2.addTarget(self, action: #selector(buttonAction), for: .touchUpInside)
}
func addButton4(){
let button1 = UIButton()
button1.setTitle("Fifth Button", for: .normal)
button1.backgroundColor = UIColor.gray
self.view.addSubview(button1)
let button2 = UIButton()
button2.setTitle("Sixth Button", for: .normal)
button2.backgroundColor = UIColor.gray
self.view.addSubview(button2)
button1.translatesAutoresizingMaskIntoConstraints = false
button2.translatesAutoresizingMaskIntoConstraints = false
var allConstraints: [NSLayoutConstraint] = []
let views = ["button1": button1, "button2": button2]
let button1horizontalConstraints = NSLayoutConstraint.constraints(withVisualFormat: "H:|-(>=20)-[button1(200)]-(>=20)-|", metrics: nil, views: views)
allConstraints += button1horizontalConstraints
let button2horizontalConstraints = NSLayoutConstraint.constraints(withVisualFormat: "H:|-(>=20)-[button2(200)]-(>=20)-|", metrics: nil, views: views)
allConstraints += button2horizontalConstraints
let verticalConstraints = NSLayoutConstraint.constraints(withVisualFormat: "V:|-(>=260)-[button1(50)]-(>=20)-[button2(50)]-|", metrics: nil, views: views)
allConstraints += verticalConstraints
button1.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
button2.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
NSLayoutConstraint.activate(allConstraints)
button1.addTarget(self, action: #selector(buttonAction), for: .touchUpInside)
button2.addTarget(self, action: #selector(buttonAction), for: .touchUpInside)
}
@objc func buttonAction(sender: UIButton!) {
if let buttonTitle = sender.titleLabel?.text {
print(buttonTitle + " tapped!")
}
}
}
Reference: Visual Format Language
No comments:
Post a Comment
NO JUNK, Please try to keep this clean and related to the topic at hand.
Comments are for users to ask questions, collaborate or improve on existing.