Xcode Swift - AutoLayoutをコードで書く(Visual Format Language)

Visual Format Languageの使い方。Visual Format Languageは、VFLと略されているらしい。appleの説明ページは、ここっぽい。けどまだしっかり読んでいない。

VFLを使うときは、設定対象のviewで、setTranslatesAutoresizingMaskIntoConstraints(false)を設定する必要がある。また、VFLを使う前に、addSubviewをしておく必要がある。そして、設定対象のview達を下記のように配列に格納する。

let views = ["l1":label1, "b1":btn1, "img1": img1, "v1": vw1, "v2":vw2]

そして、下記のように使う。

self.view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|-10-[l1]-10-|", options: nil, metrics: nil, views: views))

optionsに何を入れたらどうなるのかはまだわかっていない。metricsは、使いたい長さとかを事前に計算しておき、metricsに渡すと、設定の際に使えるようになる。

VFLサンプル

override func viewDidLoad() {
    super.viewDidLoad()

    self.view.backgroundColor = UIColor.blueColor()

    //背景画像配置
    let img1 = UIImageView()
    img1.image = UIImage(named: "IMG_5045.JPG")
    img1.setTranslatesAutoresizingMaskIntoConstraints(false)
    img1.contentMode = UIViewContentMode.ScaleAspectFill
    self.view.addSubview(img1)

    //Label作成
    let label1: UILabel = UILabel()
    label1.setTranslatesAutoresizingMaskIntoConstraints(false)
    label1.text = "Logicky"
    label1.backgroundColor = UIColor.whiteColor()
    label1.textAlignment = NSTextAlignment.Center
    label1.font = UIFont(name: "HiraKakuProN-W3", size: 30)
    self.view.addSubview(label1)

    //Button作成
    let btn1 = UIButton()
    btn1.setTranslatesAutoresizingMaskIntoConstraints(false)
    btn1.setTitle("ボタン", forState: .Normal)
    btn1.backgroundColor = UIColor.orangeColor()
    btn1.addTarget(self, action: "onClickMyButton:", forControlEvents: .TouchUpInside)
    self.view.addSubview(btn1);

    //viewの作成
    let vw1 = UIView()
    let vw2 = UIView()
    vw1.setTranslatesAutoresizingMaskIntoConstraints(false)
    vw2.setTranslatesAutoresizingMaskIntoConstraints(false)
    vw1.backgroundColor = UIColor.redColor()
    vw2.backgroundColor = UIColor.greenColor()
    self.view.addSubview(vw1);
    self.view.addSubview(vw2);

    let views = ["l1":label1, "b1":btn1, "img1": img1, "v1": vw1, "v2":vw2]
    self.view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|-10-[l1]-10-|", options: nil, metrics: nil, views: views))
    self.view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|-50-[l1]-50-[b1]-30-[v1(100)]", options: nil, metrics: nil, views: views))
    self.view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:[b1]-30-[v2(100)]", options: nil, metrics: nil, views: views))
    self.view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|[v1]-0-[v2(==v1)]|", options: nil, metrics: nil, views: views))
    self.view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|-50-[b1]-50-|", options: nil, metrics: nil, views: views))
    self.view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|[img1]|", options: nil, metrics: nil, views: views))
    self.view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|[img1]|", options: nil, metrics: nil, views: views))
}

結果

参考： Introduction to the Visual Format Language http://swift-salaryman.com/autolayout.php http://www.slideshare.net/classmethod/i-os-auto-layout SwiftでAuto Layoutがめっちゃ楽に書けるライブラリ「Crew」