iOS Swift create button programmatically using Auto Layout Visual Format Language (VFL)

iOS Swift create button programmatically using Auto Layout Visual Format Language

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.