Site Information ...

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.