Auto LayoutのVisual Format Languageを楽に書くためのSwiftライブラリを書いた

Visual Format Language は|-[view]-|みたいな文字列からiOSのAuto LayoutのためのConstraintを作るためのDSLです。

ただ、Visual Format Languageは便利なのですが記述にやや冗長な部分もあるので、カスタム演算子を利用してVisual Format Languageっぽい見ためでもっとシンプルに書けるようにしたSwiftライブラリを書いてみました。

• safx/yavfl · GitHub

使用例

例えば、次のようにビューが2つあったとき、

let label = UILabel()
let textField = UITextField()

yavflでは次のように書くことができます。

visualFormat(label, textField) { l, t in
    .V ~ |-40-[l,==32]
    .V ~ |-40-[t,==32]
    .H ~ |-20-[l,==t]-10-[t]-|
}

結果はこのように配置されます。

ちなみに、元のVisual Format LanguageとconstraintWithItem:attribute:relatedBy:toItem:attribute:multiplier:constant:で書くと次のようになります。 yavflでのコードのシンプルさがおわかりいただけると思います。

let dic = ["l": label, "t": textField]
label.setTranslatesAutoresizingMaskIntoConstraints(false)
textField.setTranslatesAutoresizingMaskIntoConstraints(false)
let c1 = NSLayoutConstraint.constraintsWithVisualFormat("V:|-40-[l(32)]", options: nil, metrics: nil, views: dic)
let c2 = NSLayoutConstraint.constraintsWithVisualFormat("V:|-40-[t(32)]", options: nil, metrics: nil, views: dic)
let c3 = NSLayoutConstraint.constraintsWithVisualFormat("|-20-[l(==t)]-10-[t]-|", options: nil, metrics: nil, views: dic)
self.view.addConstraints(c1)
self.view.addConstraints(c2)
self.view.addConstraints(c3)

文法

yavflの文法は文法およびできることはオリジナルのVisual Format Languageとほぼ同じなので、まずは公式ドキュメントを参照してください。

• Auto Layout Guide: Visual Format Language

いくつかの大きな違いを挙げると、

• <view>の<predicate>には()を付けられない。代わりに配列の第2引数以降がpredicateになる
• .H ~や.V ~は省略できない。省くとConstraintがaddされない。

などです。他の違いや制限事項などはREADMEを参照ください。

他の同様のライブラリとの違い

Snappy (Masonry)、Cartographyは どちらかと言えば、ひとつの式が2つのビュー関係を表わすようなライブラリです (Snappyではinsetで4つの関係を定義できたりもしますが)。

APIベースの話で言えば、yavflは constraintsWithVisualFormat:options:metrics:views:ベース、SnappyなどはconstraintWithItem:attribute:relatedBy:toItem:attribute:multiplier:constant:ベースのライブラリと言えるでしょう。

関連リンク

• safx/yavfl · GitHub
• Auto Layout Guide: Visual Format Language
• Masonry/Snappy · GitHub
• Masonry/Masonry · GitHub