LoginSignup
50
44

More than 5 years have passed since last update.

@shu223(Shuichi Tsutsumi)inエンジニアと人生コミュニティ

【書評】初学者はもちろん、中級者にもオススメのAuto Layout解説書「よくわかるAuto Layout」の紹介

Last updated at Posted at 2016-07-19

著者の川邉さん（@jeffsuke）および出版社のリックテレコム様より『よくわかるAuto Layout - iOSレスポンシブデザインをマスター』をご献本いただきました。

タイトルの通りAuto Layoutの解説書で、豊富な図やスクリーンショットを用いて、非常にわかりやすく書かれています。前書きによると、本書の対象読者は

過去一度はXcodeを用いてiOSアプリをつくったことがあるが、Auto Layoutとサイズクラスを用いたAdaptive Layoutと言われると尻込みしてしまう開発者

とのこと。

なんかもうベストセラーになったりしてるらしく、

AutoLayoutの必要性は今更僕が説くことでもないですし、監修は名著『UIKit詳解リファレンス』の著者 所さん！

ということで、これはもう

  • iOSアプリ開発に携わっている（携わろうとしている）
  • AutoLayoutがよくわかってない

という方はもう買うしかないでしょう。買いましょう！

よくわかるAuto Layout iOSレスポンシブデザインをマスター
川邉 雄介
リックテレコム
売り上げランキング: 14,747

（Kindle版もありますが、固定レイアウトのようです。）

・・・と、Auto Layoutに自信のない初学者の方には当然のようにオススメなのですが、AutoLayoutがそれなりにわかっている（と自分では思っていた）僕が読んでも、勉強になったポイントがいくつもありました。以下で紹介していきます。

Content Hugging Priority と Content Compression Resistance Priority と Instrinsic Content Size

250とか750とかのデフォルト値が振られてるアレです。

layout2.jpg

Auto Layoutはわかっているつもりでも、このへんの理解が曖昧なままwarningが出たときになんとなく優先度をいじってみたりしている、みたいな人は実は多いのではないでしょうか。私がまさにそうでしたが、本書では詳細かつ明解に解説されていて、曖昧に理解していたところがスッキリしました。以下メモ。

  • それぞれ Instrinsic Content Size についての「大きくなりにくさ」「小さくなりにくさ」を意味している 1
  • NSLayoutConstraintの優先度の値が同値の場合は、NSLayoutConstraintによる制約が優先される

レイアウトのライフサイクル（p35〜）

1. 制約の更新、2. フレームの更新、3. レンダリングというiOSにおけるレイアウトの3つのステップについて詳細に解説されています。

恥ずかしながら updateConstraintsIfNeeded, layoutIfNeeded, layoutSubviews, setNeedsDsplay といったメソッドでそれぞれ何が行われるのか、または何が行われないのか、といったことの理解が曖昧だったのですが、順序立ててわかりやすく解説されていて非常に勉強になりました。

1. 制約の更新

  • updateConstraints が呼ばれる
  • ボトムアップ（子ビューから親ビュー）に制約の計算が実行される
  • 制約の有効／無効化、優先度変更、追加／削除などをトリガに実施される
  • この制約の更新を明示的に実行したい場合には updateConstraintsIfNeeded もしくは setNeedsUpdateConstraints を呼ぶ

2. フレームの更新

  • layoutSubviews が呼ばれる
  • layoutSubviews が呼ばれると updateConstraintsIfNeeded も呼ばれ、必要に応じて制約の更新も行われる
  • トップダウン（親ビューから子ビュー）に実施される
  • ビューのフレームの変更・サブビューの追加・削除等をトリガに実施される
  • 明示的に実行したい場合には layoutIfNeeded もしくは setNeedsLayout を呼ぶ
  • layoutSubview をオーバーライドすると、super.layoutSubviews() の時点で既に制約の更新が完了しているので、そのレイアウト情報を用いて何らかの処理を実行したい場合に有効（+この方法で無限スクロールを実現する例）

3. レンダリング

  • drawRect: が呼ばれる
  • 明示的に実行したい場合には setNeedsDisplay または setNeedsDisplayInRect: を呼ぶ

また viewWillLayoutSubviews と viewDidLayoutSubviews についても、それぞれの段階では（レイアウトサイクルの）どのステップは完了していて何は完了していないのか、というところの理解がスッキリしました。

viewWillLayoutSubviews

  • この時点では、サブリューのレイアウトは決定されていないが、画面の向きは決定している
  • この後、「制約の更新」と「フレームの更新」が実施される

viewDidLayoutSubviews

  • layoutSubviews による「フレームの更新」が完了すると呼ばれる
  • この後にレンダリングが行われるので、viewDidAppearはこれより後に呼ばれる

UIWindowの話

直接Auto Layoutとは関係ないですが、iOSでUIを実装するにあたってUIWindowに関して知っておいた方がいいことが簡潔に解説されています。windowLevel による重なり順の話とか、画面サイズを取得する場合に

UIScreen.mainScreen().bounds

と

UIScreen.sharedAppliation().keyWindow?.bounds

はどう違うか、とか。

UIStackView

iOS 9で追加された UIStackView についても、10ページを使ってしっかり解説されています。

ちなみに

Start with Stack View, use constraints as needed

（まずはStack Viewを使って、必要に応じてconstraintsを使おう）

とWWDCのセッションでも言われていたとか。

コードで制約を設定する & NSLayoutAnchor

僕は基本的にはIB/Storyboardで制約を貼るのですが、仕事柄多くのプロジェクトに関わるので、「IB/Storyboard使わない派」な方々のコードに触れる機会も度々ありまして、コードで制約を設定することもたまにあります。

本書では、NSLayoutConstraint のイニシャライザを使う方法、VFL (Visual Format Language)を使う方法、iOS 9 で追加されたNSLayoutAnchorを使う方法等、まるまる一章を使ってその方法が解説されています。

ちなみにそろそろiOS 9の機能を使ってもいい（iOS 8を切ってもいい）空気になってきたと個人的には感じていますが、NSLayoutAnchor を使うと超シンプルかつ直感的にレイアウト制約をコードから設定できるようになります。

before
NSLayoutConstraint(item: subview,
                   attribute: .Leading,
                   relatedBy: .Equal,
                   toItem: view,
                   attribute: .LeadingMargin,
                   multiplier: 1.0,
                   constant: 0.0).active = true
after
let margins = view.layoutMarginsGuide
subview.leadingAnchor.constraintEqualToAnchor(margins.leadingAnchor).active = true

本章末尾のコラムではAuto Layoutを簡潔に書くためのオープンソースライブラリもいくつか紹介されています。

その他、細かい話

Auto Layout のアルゴリズム

この線型方程式系を解くアルゴリズムは、Greg J. Badros と Alan Borning、Peter J. Stuckey によって2001年に発表された、制約充足問題を説く Cassowary というツールキットで用いられたアルゴリズムを使用しています。（p.15）

明日から開発に活かせる、という話ではないのですが、こんなこともサラッと書かれていて、しっかり調べて執筆されている書籍なんだなということが伺えます。

外接矩形（alignment rects）をデバッグ時に確認する

[Edit Scheme] > [Run] > [Arguments] の [Arguments Passed On Launch] に -UIViewShowAlignmentRects を追加してチェックを入れると、実行時に外接矩形が表示される、というTips。

NSLayoutAttributeのLeft/RightとLeading/Trailingの違い

基本的にLeading/Trailingを使ってたので意識したことなかったですが、アラビア語とかヘブライ語のように右から左へ書く言語ではLeading/TrailingがそれぞれRight/Leftと同値となるそうです。

制約の矛盾が実行時に起きたときのエラーメッセージの見方

実行時にぶわーっと出てくるエラーメッセージ、ありますよね。僕は最近だとAutoLayoutを使ったアニメーションをやろうとして何かが間違っててこれが出てきました。で、エラーメッセージ読んでもどの制約が悪いのかわかりづらい、と思ってたんですが、制約にちゃんとidentifierふればいいみたいです。（p86）

Xcode 7 の Storyboard Reference

Xcode 7 で追加された [Refactor to Storyboard...] メニューからの Storyboard の分割方法もしっかり書かれています。

Auto LayoutのデバッグTips

UIView に exerciseAmbiguityInLayout() なるメソッドがあり、これを用いると曖昧な制約を持つビューオブジェクトのフレームを、制約を満たす範囲でランダムに変更してくれるそうです。

他にもオブジェクトが持つインスタンス変数名と値を吐いてくれる _ivarDescription メソッド((※Privateです))とか、ビューデバッガーの [Show Constraints] 機能とか、知らなかったことが色々と書いてありました。

まとめ

書籍『よくわかるAuto Layout』を紹介させていただきました。Auto Layoutがよくわかってない人を対象として書かれた書籍ですが、中級者にも勉強になる部分は多いと感じました。

本をまるっと一冊通読してAuto Layoutを勉強するというのはなかなか難しい、と感じる方もいらっしゃるかもしれません。が、目次を見れば分かる通り、Auto Layoutについてかなり網羅的かつ本質的に解説されてますので、リファレンス的に手元に置いておくのもいいのでは、と思います。

気になった方はぜひ！

よくわかるAuto Layout iOSレスポンシブデザインをマスター
川邉 雄介
リックテレコム
売り上げランキング: 14,747

  1. この訳はAppleのドキュメントにあったのか著者のオリジナルかわかりませんが、簡潔で秀逸な訳だなと思いました ↩

50
44
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
Sign upLogin
50
44