うさがにっき

読書感想文とプログラムのこと書いてきます

VFLで拘束を設定する

概要

Auto Layout専用に設計された言語、「Visual Format Language」を使って拘束を設定する方法をまとめる

詳細

VFLでの拘束の設定方法

myViewという名前のビューの幅を300ポイントに指定

[myView(300)]

直接数字を指定するだけでなく、100ポイント以上にするなどの指定方法もできる

[myView(>=100)]

条件をカンマで区切って複数条件の指定も可能

[myView(>=100,<=150)]

別のViewと同じサイズという指定も可能

[myView(==myView2)]

二つのビューの間の距離は数字をハイフン(-)ではさんで指定する

[myView]-30-[myButton]

二つのビューの間を標準の距離にするには数字を省略

[myView]-[myButton]

密接させるにはビューの間に何も書かない

[myView][myButton]

両側の間隔を親Viewから80ポイント開けて配置する

|-80-[myView]-80-|

VFLではこのようにViewの幅や並び方を指定するのが基本だが、垂直方向と水平方向の両方を記述する必要がある
それらを区別するため水平方向は「H:」垂直方向は「V:」を先頭につける

H:|-50-[myView]->=10-[myView2]-50-|
V:[myView3]-50-[myView4]

VFLを指定した拘束オブジェクトを作成する

class func constraintsWithVisualFormat(_ format: String,
                               options opts: NSLayoutFormatOptions,
                               metrics metrics: [NSObject : AnyObject]?,
                                 views views: [NSObject : AnyObject]) -> [AnyObject]

opts, metricsには今回nilを入れておく

具体的な使用例

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 空のview作成
        let myView = UIView(frame: CGRectZero)
        myView.backgroundColor = .blueColor()
        view.addSubview(myView)
        // autosizing off
        myView.setTranslatesAutoresizingMaskIntoConstraints(false)
        
        // Buttonの作成
        let myButton = UIButton.buttonWithType(.System) as! UIButton
        myButton.setTitle("Button", forState: UIControlState.Normal)
        view.addSubview(myButton)
        myButton.setTranslatesAutoresizingMaskIntoConstraints(false)
        
        // 拘束の配列の作成
        var myConstraints = [NSLayoutConstraint]()
        
        // 拘束の作成と追加
        myConstraints += NSLayoutConstraint.constraintsWithVisualFormat(
            "V:|-30-[view]-50-|",
            options: nil,
            metrics: nil,
            views: ["view" : myView]) as! [NSLayoutConstraint]
        myConstraints += NSLayoutConstraint.constraintsWithVisualFormat(
            "H:|-30-[view]-30-|",
            options: nil,
            metrics: nil,
            views: ["view" : myView]) as! [NSLayoutConstraint]
        
        myConstraints += NSLayoutConstraint.constraintsWithVisualFormat(
            "V:[view]->=10-[button]",
            options: nil,
            metrics: nil,
            views: ["view" : myView, "button" : myButton]) as! [NSLayoutConstraint]
        myConstraints += NSLayoutConstraint.constraintsWithVisualFormat(
            "H:|-<=10-[button]-<=10-|",
            options: nil,
            metrics: nil,
            views: ["button" : myButton]) as! [NSLayoutConstraint]

        view.addConstraints(myConstraints)
        
    }

こんな感じになる
f:id:tiro105:20150422231550p:plain
f:id:tiro105:20150422231559p:plain