35
34

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

コードでAutolayoutを簡単に書く方法2つ

Last updated at Posted at 2016-06-22

動的に生成されるViewに対して、marginなどを指定したいとき
Autolayoutをコードで書く必要があります。

ただ、普通に書くと..

addConstraint(NSLayoutConstraint(
    item: button1,
    attribute: .Right,
    relatedBy: .Equal,
    toItem: button2,
    attribute: .Left,
    multiplier: 1.0,
    constant: -12.0
))

たかだか左右のmarginを書くだけでもこれだけのコード量を書かねば
ならず、直感的ではないです。

何かCSSのように、簡単に書ける方法がないか探したところ
2パターンの書き方がありました。

[パターン1]Cartographyを使う

Cartography というライブラリを使うと、
Swiftのクロージャを使って簡単にレイアウトが組めます。
例えば、上記の例だと

constrain(button1, button2) { button1, button2 in
    button1.right == button2.left - 12
}

こんなに簡単に書けます。(公式サイトの例を抜粋)
第1引数にレイアウトを指定したいView、第2引数に相対関係にあるViewを指定します。

更に簡略化して、こう書けます。

// swiftのクロージャーには略式の引数($0, $1..)が予め設定されている。inも要らなくなる
constrain(button1, button2) {
    $0.right == $1.left - 12
}

実際に使ってみた

親Viewの内側にいい感じにUILabelをレイアウトしたい

constrain(footerLabel, containerView) {
    $0.edges == inset($1.edges, 7, 16, 0, 16) // 左から、top, leading, bottom, trailing のmarginを指定
}

高さを指定

constrain(view) {
    view.width  == 100 // 幅に変更がなくても、指定しないと通常のAutolayout同様エラーで表示されない
    view.height == 200
}

めちゃ便利です。

[パターン2]NSLayoutAnchorを使う

iOS9以上であれば、NSLayoutAnchorというクラスを使えば、簡潔にAutolayoutが書けます。
こちらも実際に使ってみました。

親Viewにピッタリフィットした、WKWebView
(WKWebViewはStoryBoardに置けるUIパーツがないので、Autolayoutをコードで指定する必要がある)

// 上辺の制約
webview.topAnchor.constraintEqualToAnchor(containerView.topAnchor, constant: 0.0).active = true
// 下辺の制約
webview.bottomAnchor.constraintEqualToAnchor(containerView.bottomAnchor, constant: 0.0).active = true
// 左辺の制約
webview.leadingAnchor.constraintEqualToAnchor(containerView.leadingAnchor, constant: 0.0).active = true
// 右辺の制約
webview.trailingAnchor.constraintEqualToAnchor(containerView.trailingAnchor, constant: 0.0).active = true

簡単!!

どっちを採用する?

NSLayoutAnchorはiOS9~なので、iOS8の対応が必要な場合は、
iOS8対応もしている、Cartography一択。

iOS9以上が対象であっても、個人的にはCartographyのほうが未だシンプルなので、
採用するかと思います。

参考サイト

Cartography
[iOS 9] NSLayoutAnchorを使ってNSLayoutConstraintを簡潔に書こう!

35
34
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
35
34

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?