[SWIFT] Auto Layout Visual Format

mercredi 27 avril 2016

Auto Layout fournit aussi des fonctions qui permet de créer des contraintes en se basant sur un language propre à autoLayout. (sorte de scripting). Vous trouverez ci-dessous un exemple d’utilisation en swift:

class ViewController: UIViewController {

    var redView : UIView!;
    var greenView : UIView!;
    var blueView : UIView!;
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        self.redView = UIView()
        self.redView.backgroundColor = UIColor.redColor()
        self.greenView = UIView()
        self.greenView.backgroundColor = UIColor.greenColor()
        self.blueView = UIView()
        self.blueView.backgroundColor = UIColor.blueColor()
        
        self.view.addSubview(self.redView)
        self.view.addSubview(self.blueView)
        self.view.addSubview(self.greenView)
        
//OR threeColsSpacing();
        ratio124();
        
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    
    func threeColsSpacing(){
        self.redView.translatesAutoresizingMaskIntoConstraints = false;
        self.greenView.translatesAutoresizingMaskIntoConstraints = false;
        self.blueView.translatesAutoresizingMaskIntoConstraints = false;
        
        let views = ["redView":redView,"greenView":greenView,"blueView":blueView]
       
        let horizontalContraints:[NSLayoutConstraint]! = NSLayoutConstraint.constraintsWithVisualFormat
("H:|-20-[redView]-20-[greenView]-20-[blueView]-20-|",                                                                                              options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: views)
        let equalWidthConstraints1:[NSLayoutConstraint]! = NSLayoutConstraint.constraintsWithVisualFormat
("[redView(==greenView)]",
options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: views)
        let equalWidthConstraints2:[NSLayoutConstraint]! = NSLayoutConstraint.constraintsWithVisualFormat
("[greenView(==blueView)]",
options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: views)
        let verticalConstraints1:[NSLayoutConstraint]! = NSLayoutConstraint.constraintsWithVisualFormat("V:|-20-[redView]-20-|",
options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: views)
        let verticalConstraints2:[NSLayoutConstraint]! = NSLayoutConstraint.constraintsWithVisualFormat("V:|-20-[greenView]-20-|",
options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: views)
        let verticalConstraints3:[NSLayoutConstraint]! = NSLayoutConstraint.constraintsWithVisualFormat("V:|-20-[blueView]-20-|",                                                                                                       options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: views)
        
        self.view.addConstraints(horizontalContraints)
        self.view.addConstraints(equalWidthConstraints1)
        self.view.addConstraints(equalWidthConstraints2)
        self.view.addConstraints(verticalConstraints1)
        self.view.addConstraints(verticalConstraints2)
        self.view.addConstraints(verticalConstraints3)
        
    }

    func ratio124(){
        self.redView.translatesAutoresizingMaskIntoConstraints = false;
        self.greenView.translatesAutoresizingMaskIntoConstraints = false;
        self.blueView.translatesAutoresizingMaskIntoConstraints = false;
        
        let views = ["redView":redView,"greenView":greenView,"blueView":blueView]
        
        let horizontalContraints:[NSLayoutConstraint]! = NSLayoutConstraint.constraintsWithVisualFormat
("H:|-20-[redView]-20-[greenView]-20-[blueView]-20-|",
options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: views)
        let widthContraints1:NSLayoutConstraint! = NSLayoutConstraint
(item:greenView, attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.Equal, toItem: blueView, attribute: NSLayoutAttribute.Width, multiplier: 0.5, constant: 0)

        let widthContraints2:NSLayoutConstraint! = NSLayoutConstraint
(item: redView, attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.Equal, toItem: greenView, attribute: NSLayoutAttribute.Width, multiplier: 0.5, constant: 0)
                
        let verticalConstraints1:[NSLayoutConstraint]! = NSLayoutConstraint.constraintsWithVisualFormat
("V:|-20-[redView]-20-|",
options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: views)
        let verticalConstraints2:[NSLayoutConstraint]! = NSLayoutConstraint.constraintsWithVisualFormat
("V:|-20-[greenView]-20-|",
options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: views)
        let verticalConstraints3:[NSLayoutConstraint]! = NSLayoutConstraint.constraintsWithVisualFormat
("V:|-20-[blueView]-20-|",
options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: views)
        
        self.view.addConstraints(horizontalContraints)
        self.view.addConstraint(widthContraints1)
        self.view.addConstraint(widthContraints2)
        self.view.addConstraints(verticalConstraints1)
        self.view.addConstraints(verticalConstraints2)
        self.view.addConstraints(verticalConstraints3)
        
    }
}

Pour la version Objective -C ou je me suis complètement inspiré cliquez sur le lien suivant.

Be Sociable, Share!

Tags: AutoLayout , Swift