【swift】コードでAutoLayout その1 - Visual Format Language

swift iOS

コードでAutoLayoutを記述します。

iOSにはVisual Format LanguageというAutoLayoutを直感的に定義できるフォーマットが用意されており、使い方さえ覚えてしまえばちょっとした制約であればサクッとコードで書けてしまいます。

developer.apple.com

使ってみる

とりあえず、AutoLayoutを適用するためのViewを用意してみます。

let wrapperView = UIView()
wrapperView.backgroundColor = .redColor()
wrapperView.translatesAutoresizingMaskIntoConstraints  = false
        
view.addSubview(wrapperView)

この時、大事なポイントが二つあります。

1. translatesAutoresizingMaskIntoConstraints を falseにする

詳しくは理解していないですが、AutoLayoutを使用する場合は、昔からあるレイアウトシステムのAutoresizingMaskをfalseにする必要があります。

2. AutoLayoutの制約を定義する前にaddSubviewを実行する

Visual Format Languageで制約を設定する場合、superviewに対して位置を設定したりするため、制約を定義する前にviewに追加しておく必要があります。

制約の定義

制約の定義には、addConstraintsを使います。

let views = ["wrapperView": wrapperView]

// 左右の位置をsuperviewとくっつける
view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat(
    "|-0-[wrapperView]-0-|", 
    options: .AlignAllTop, 
    metrics: nil, 
    views: views))

// 上下の位置をsuperviewとくっつける
view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat(
    "V:|-0-[wrapperView]-0-|", 
    options: .AlignAllTop, 
    metrics: nil, 
    views: views))

|-0-[wrapperView]-0-|この記述が、Visual Format Languageです。

|がsuperviewを表し、対象のviewは[]で囲みます。
V:という記述で縦の結びつきを表します。
viewsで渡したディクショナリから文字列の変数展開を行い、AutoLayoutが定義されます。

これで、画面いっぱいにwrapperViewが広がるようになりました。

f:id:w6500:20160219002834p:plain:w200

とりあえず今日はここまで。