この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
こんにちは、モバイルアプリサービス部の田中孝明です。
毎年恒例ですが、 WWDC の 隣で AltConf 2019 というカンファレンスが同時に開催されています。こちらではCFPに通ったエンジニアの方々が登壇されています。
今回は ZOZO Technologies, Inc の BAN Jun さんの Auto Layout with an extended Visual Format Language という発表を聞いてきました。 banjun/NorthLayout の話が聞けそうでしたので、会場を抜け出してセッションを聞いてきました。
Description
Visual Format Language (VFL) is provided by UIKit light-weight way to define Auto Layout programmatically. Unfortunately it is not capable of making constraints to neither Safe Area or Layout Margins.
To solve this problem I made banjun/NorthLayout library, which proposes an extended VFL for supporting constraints to Layout Margins. Although there is no direct support for Safe Area, with Layout Margins it’s possible to set constraints to Safe Area as well. banjun/NorthLayout made with kareman/FootlessParser, that is a parser-combinator which can be easily used thanks to Swift’s type system. And in this talk I’ll show you how my library allows to set Safe Area constraints with an almost no changes of your app code.
Auto Layout with Code
Auto Layout をコードで書く
- DSL Library
- Visual Format Language
- Layout Anchors
Auto Layout with Visual Format Language (VFL)
例として Auto Layout を Visual Format Language (VFL) で表現します
"H:|-[icon(==32)]-[label]-(>=8)—|"
良い点
- コンパクトな式を使用して複数の制約を一度に設定
- アスキーアートのようで、違いが読みやすい
- 有効な制約のみを作れる
悪い点
- VFL はコンパイル時に検証されない
- 使用するためにいくつかのボイラープレートが必要
- Layout Margins または Safe Area のいずれにも明示的なサポートがない
banjun/NorthLayout
NorthLayout を使わない場合の手順
- View の View階層 を設定する
- View に対して、
auto-layoutを有効にする - 複数のパラメータを VFL で書く
NorthLayout を使う場合の手順
- View を宣言する
- VFL を書く
autolayout("...")
VFL と Safe Area
- VFL は Safe Area （iPhone X）をサポートしていない
- しかし、私は VFL と同じくらい簡単に制約を書きたい
Auto Layout with an extended VFL
VFL (Apple)
single vertical bar | = superview boundsautolayout("H:|[header]|")
Extended VFL (EVFL)
Safe Area の制約を || で表現したい
double vertical bars || = layout margin boundsautolayout("H:||[icon]...
なぜ Layout Margins なのか?
- Layout Margins が Safe Area に追従する
- Layout Margins はすべてのデバイスで使える
- ホームインジケータ付きのデバイスだけではない
- どのデバイスでもレイアウトの制約をテスト
EVFL の実装
EVFL をパースしてATS構文木にし、分解してVFLが解釈できるようにする
最小限の差分で Safe Area をサポート
まとめ
iOS開発を離れてだいぶ経つため、iPhone X 対応をやったことがない自分にとっては Safe Area の辛さなどを知るいい機会になりました。SwiftUI が出ても複雑な View は Auto Layout （もしくは Not Auto Layout）で対応する必要があると思いますので、このあたりの情報は参考になります。
16
