Download - DevIO Auto Layout 道場スライド
![Page 1: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/1.jpg)
Developer Day
Auto Layout 道場
1
A-1
掛川 敦史, iPhone アプリケーションサービス事業部 クラスメソッド株式会社
Ⓒ Classmethod, Inc.
2015年03月29日
![Page 2: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/2.jpg)
Agenda• Auto Layout 概要 • Lesson 1 • 基本的な制約の使い方 • 高さが可変のセル
• Lesson 2 • 制約を工夫して使う • パララックス効果
• Lesson 3 • 制約をコードから操作する • アニメーション
2Ⓒ Classmethod, Inc.
![Page 3: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/3.jpg)
Auto Layout 概要
3
![Page 4: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/4.jpg)
Auto Layout• 制約ベースのレイアウトシステム • iOS SDK 6.0 (Xcode 4.0) より導入された • Deployment Target 6.0 以上で利用可能 • Auto Layout が登場する前は、Autosizing を利用するか Frame をコードで計算して設定してレイアウトを組んでいた
4Ⓒ Classmethod, Inc.
![Page 5: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/5.jpg)
Auto Layout“Auto Layoutはアプリケーションのユーザインターフェイス(特に画面レイアウト)を作成するシステムで、要素間の関係を数学的に記述することによりこれを行います。 この関係を、個々の要素に対する制約、あるいは要素間の制約として定義します。 Auto Layoutを導入すれば、画面の大きさや向き、地域設定(言語など)の違いに応じて動的に変化する、汎用的な画面レイアウトを作り出すことができます。”
5Ⓒ Classmethod, Inc.
Auto Layout ガイドより引用
![Page 6: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/6.jpg)
制約
6
![Page 7: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/7.jpg)
Auto Layout“Auto Layoutはアプリケーションのユーザインターフェイス(特に画面レイアウト)を作成するシステムで、要素間の関係を数学的に記述することによりこれを行います。 この関係を、個々の要素に対する制約、あるいは要素間の制約として定義します。 Auto Layoutを導入すれば、画面の大きさや向き、地域設定(言語など)の違いに応じて動的に変化する、汎用的な画面レイアウトを作り出すことができます。”
7Ⓒ Classmethod, Inc.
Auto Layout ガイドより引用
![Page 8: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/8.jpg)
制約 (Constraint)• レイアウトを決定するためのルール • 実行時には NSLayoutConstraint というクラスのインスタンスでルールが表現されている
• 主に他の UI コンポーネントとの相対的な位置・サイズを定義 • 親ビューもしくは兄弟ビューとの間のルールを定義 • 他の UI コンポーネントからの相対位置 • 他の UI コンポーネントを基準とした自身のサイズ • 自身のサイズ
8Ⓒ Classmethod, Inc.
![Page 9: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/9.jpg)
制約 (Constraint)• 制約を定義する方法は2通り • Storyboard や Xib などの Interface Builder 上 • コード
• 制約は必ずしも厳密である必要はない • 「幅が 20 pt 以上」といった制約を定義することも可能 • 複数の制約が競合する場合には、優先順位が高い方が適用される
9Ⓒ Classmethod, Inc.
![Page 10: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/10.jpg)
Auto Layout“Auto Layoutはアプリケーションのユーザインターフェイス(特に画面レイアウト)を作成するシステムで、要素間の関係を数学的に記述することによりこれを行います。 この関係を、個々の要素に対する制約、あるいは要素間の制約として定義します。 Auto Layoutを導入すれば、画面の大きさや向き、地域設定(言語など)の違いに応じて動的に変化する、汎用的な画面レイアウトを作り出すことができます。”
10Ⓒ Classmethod, Inc.
Auto Layout ガイドより引用
![Page 11: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/11.jpg)
要素間の関係を数学的に記述
11Ⓒ Classmethod, Inc.
attribute1 == multiplier × attribute2 + constant
NSLayoutConstraint Class Reference では、Auto Layout における UI コンポーネント間の関係は下記の式で表されると記述されている
![Page 12: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/12.jpg)
例: ボタンを基準にラベルの位置を決める
12Ⓒ Classmethod, Inc.
ラベルはボタンの 20pt 右に配置
![Page 13: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/13.jpg)
例: ボタンを基準にラベルの位置を決める
13Ⓒ Classmethod, Inc.
ラベルの左端のX座標 = 1.0 × ボタンの右端のX座標
+ 20ラベルはボタンの 20pt 右に配置
![Page 14: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/14.jpg)
例: ボタンを基準にラベルの位置を決める
14Ⓒ Classmethod, Inc.
ラベルの左端のX座標 = 1.0 × ボタンの右端のX座標
+ 20
これが制約
![Page 15: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/15.jpg)
動的に変化するレイアウト
15
![Page 16: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/16.jpg)
Auto Layout“Auto Layoutはアプリケーションのユーザインターフェイス(特に画面レイアウト)を作成するシステムで、要素間の関係を数学的に記述することによりこれを行います。 この関係を、個々の要素に対する制約、あるいは要素間の制約として定義します。 Auto Layoutを導入すれば、画面の大きさや向き、地域設定(言語など)の違いに応じて動的に変化する、汎用的な画面レイアウトを作り出すことができます。”
16Ⓒ Classmethod, Inc.
Auto Layout ガイドより引用
![Page 17: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/17.jpg)
iPhone 5 発表以前のレイアウト• 端末の画面サイズは 3.5 inch のみだった • タブレットを除く
• レイアウトのバリエーション • せいぜい Portrait と Landscape の違い程度 • Autosizing + Frame 計算で、絶対座標でレイアウトしても特に問題なし
17Ⓒ Classmethod, Inc.
3.5 inch 320 x 480
単位: pt
![Page 18: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/18.jpg)
現在のレイアウト• 端末の画面サイズは 3.5, 4, 4.7, 5.5 inch の4種類 • タブレットを除く
• レイアウトのバリエーション • 端末によって画面の幅も高さも異なる • Autosizing + Frame 計算でも対応できるけど、きちんと画面サイズを計算に組み込む必要あり
• レイアウト処理の記述が煩雑になってきた
18Ⓒ Classmethod, Inc.
3.5 inch 320 x 480
4 inch 320 x 568
4.7 inch 375 x 667
5.5 inch 414 x 736
単位: pt
![Page 19: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/19.jpg)
Auto Layout を利用した場合• 様々な画面サイズに対応して変化するレイアウトを宣言的に定義することができる • 例:画面いっぱいに表示される親ビューに対して、上下左右 16pt のマージンを取ってビューを配置
• ビューの幅・高さは画面サイズに応じて自動的に計算される • iOS 8 から追加された Size Class にも対応 • Size Class 毎に制約を設定することも可能 • 今回は Size Class についての説明は割愛します
19Ⓒ Classmethod, Inc.
![Page 20: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/20.jpg)
Leading & Trailing
20
![Page 21: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/21.jpg)
Leading & Trailing• 文字を記述する方向がことなる言語圏向けにレイアウトをローカライズするために必要となる概念 • 文頭が右側である言語圏向けに、レイアウトが左右反転した UI を提供することが可能
21Ⓒ Classmethod, Inc.
![Page 22: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/22.jpg)
Leading & Trailing• Leading • 文字列の先頭側 • 日本語や英語など、多くの言語圏では左側
• Trailing • 文字列の末尾側 • 多くの言語圏では右側
22Ⓒ Classmethod, Inc.
![Page 23: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/23.jpg)
Leading & Trailing
23Ⓒ Classmethod, Inc.
英語 アラビア語
![Page 24: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/24.jpg)
制約の種類
24
![Page 25: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/25.jpg)
制約の種類• 制約は3種類に分類できる • アライメントに関する制約 • 相対位置に関する制約 • サイズに関する制約
25Ⓒ Classmethod, Inc.
![Page 26: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/26.jpg)
アライメントに関する制約• Leading (Left or Right) Alignment • Trailing (Right or Left) Alignment • Top Alignment • Bottom Alignment • Center X Alignment • Center Y Alignment • Baseline Alignment
26Ⓒ Classmethod, Inc.
![Page 27: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/27.jpg)
アライメントに関する制約
27Ⓒ Classmethod, Inc.
Leading Alignment Center X Alignment
左揃え 中央揃え
![Page 28: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/28.jpg)
相対位置に関する制約• Horizontal Space • Vertical Space
28Ⓒ Classmethod, Inc.
![Page 29: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/29.jpg)
相対位置に関する制約
29Ⓒ Classmethod, Inc.
Horizontal Space
コンポーネント間のスペース
![Page 30: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/30.jpg)
サイズに関する制約• Width • Height • Equal Widths • Equal Heights
30Ⓒ Classmethod, Inc.
![Page 31: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/31.jpg)
サイズに関する制約
31Ⓒ Classmethod, Inc.
Equal Width
幅が等しい
![Page 32: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/32.jpg)
Lesson 1
32
![Page 33: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/33.jpg)
高さ可変のセル
33Ⓒ Classmethod, Inc.
![Page 34: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/34.jpg)
デモ
34
![Page 35: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/35.jpg)
作ってみよう
35
![Page 36: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/36.jpg)
実装すること1. 適切に制約を配置する 2. セルの高さを指定する
36Ⓒ Classmethod, Inc.
![Page 37: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/37.jpg)
1. 適切に制約を配置する
37Ⓒ Classmethod, Inc.
• ContentView - Label 間 の制約 • Label - Label 間 の制約
![Page 38: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/38.jpg)
2. セルの高さを指定する (iOS 8)• セルの高さとして UITableViewAutomaticDimension を指定する
38Ⓒ Classmethod, Inc.
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath { return UITableViewAutomaticDimension; }
![Page 39: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/39.jpg)
2. セルの高さを指定する (iOS 7)• UITableViewAutomaticDimension は使用不可 • サイズ計測用のセルを使用して高さを計算する
39Ⓒ Classmethod, Inc.
![Page 40: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/40.jpg)
Lesson 2
40
![Page 41: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/41.jpg)
パララックス
41Ⓒ Classmethod, Inc.
上にスクロール
![Page 42: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/42.jpg)
デモ
42
![Page 43: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/43.jpg)
パララックス
43Ⓒ Classmethod, Inc.
http://blog.domesticcat.com.au/ios/2014/03/19/creating-parallax-effect-on-uiscrollview-using-simple-constraints/
![Page 44: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/44.jpg)
作ってみよう
44
![Page 45: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/45.jpg)
スクロール時の動きの実現方法• イメージビューの高さがスクロールに合わせて変化する
• contentMode • Aspect Fill (UIViewContentModeScaleAspectFill)
45Ⓒ Classmethod, Inc.
これらの組み合わせで、あたかもイメージビューがビューの下にもぐっていくように見せている
![Page 46: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/46.jpg)
イメージビューのサイズ
46Ⓒ Classmethod, Inc.
contentOffset.y == 0 contentOffset.y >= 0
UIImageView の Frame
UIImageView の Frame
![Page 47: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/47.jpg)
イメージビューのサイズ
47Ⓒ Classmethod, Inc.
contentOffset.y == 0 contentOffset.y >= 0
UIImageView の Frame
UIImageView の Frameナビゲーションバーの下端にぴったり
くっついた状態で、イメージビューの高さが小さくなっていく
![Page 48: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/48.jpg)
イメージビューのサイズ
48Ⓒ Classmethod, Inc.
contentOffset.y == 0 contentOffset.y <= 0
UIImageView の Frame UIImageView の
Frame
![Page 49: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/49.jpg)
イメージビューのサイズ
49Ⓒ Classmethod, Inc.
contentOffset.y == 0 contentOffset.y <= 0
UIImageView の Frame UIImageView の
Frame
ナビゲーションバーの下端にぴったりくっついた状態で、イメージビューの
高さが大きくなっていく
![Page 50: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/50.jpg)
Aspect Fill
50Ⓒ Classmethod, Inc.
contentOffset.y == 0 contentOffset.y >= 0
実画像サイズ
実画像サイズ
![Page 51: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/51.jpg)
Aspect Fill
51Ⓒ Classmethod, Inc.
contentOffset.y == 0 contentOffset.y >= 0
実画像サイズ
実画像サイズ
イメージビューの高さが小さくなると、画像のスケールはそのままに画像の中
央部分が表示され続ける
![Page 52: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/52.jpg)
Aspect Fill
52Ⓒ Classmethod, Inc.
contentOffset.y == 0 contentOffset.y <= 0
実画像サイズ実画像サイズ
![Page 53: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/53.jpg)
Aspect Fill
53Ⓒ Classmethod, Inc.
contentOffset.y == 0 contentOffset.y <= 0
実画像サイズ実画像サイズ
イメージビューの高さが大きくなると、画像のスケールも大きくなって画像が
伸びたように見える
![Page 54: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/54.jpg)
ポイント• イメージビューと Top Layout Guide の間 を 0pt にする制約は Priority を 999 以下に設定する • スクロール時に灰色のビューがナビゲーションバーの下にもぐりこむとイメージビューが押し上げられて、上記の制約を満たさない状態になってしまう
• Priority が 1000 だと実行時コンソールにエラーが出力されてしまうが、999 にすればエラーが出力されない • Priority が 1000 の場合、その制約は必ず守られなければならない (Required) という意味になる
• Priority が 999 であれば必須ではなくなるので、制約は出来る限り守られることになる
54Ⓒ Classmethod, Inc.
![Page 55: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/55.jpg)
ポイント• 画像サイズはイメージビューの初期サイズとアスペクト比を合わせるといい感じになる • 画面サイズによって初期サイズのアスペクト比が異なる場合、十分な大きさを持った正方形にしておくといい
55Ⓒ Classmethod, Inc.
![Page 56: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/56.jpg)
Lesson 3
56
![Page 57: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/57.jpg)
デモ
57
![Page 58: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/58.jpg)
作ってみよう
58
![Page 59: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/59.jpg)
初期状態
59Ⓒ Classmethod, Inc.
![Page 60: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/60.jpg)
初期状態
60Ⓒ Classmethod, Inc.
メニューの幅の分だけTrailing Spaceをマイナスする。
Viewを画面の外に配置することで非表示にしている。
![Page 61: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/61.jpg)
メニュー展開状態
61Ⓒ Classmethod, Inc.
![Page 62: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/62.jpg)
メニュー展開状態
62Ⓒ Classmethod, Inc.
Trailing Space = 0 にすることでメニューの右端と画面の右端が揃う。
![Page 63: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/63.jpg)
メニュー展開状態
63Ⓒ Classmethod, Inc.
Trailing Space = 0 にすることでメニューの右端と画面の右端が揃う。
この過程をアニメーションしたい!
![Page 64: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/64.jpg)
制約はOutletで接続できる
64Ⓒ Classmethod, Inc.
Type: NSLayoutConstraint
![Page 65: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/65.jpg)
制約の変更をアニメーションする• 制約の値を変更する • NSLayoutConstraint のプロパティ constant に値を代入する • Outlet で接続した制約の値をコード上で変更することで画面の表示を動的に変化させることが可能
• アニメーションさせるには • 制約の値を変更したあとに明示的に layoutIfNeeded を呼ぶ必要がある
• アニメーションの Blocks 内で layoutIfNeeded を呼ぶことでアニメーションを実現する
65Ⓒ Classmethod, Inc.
![Page 66: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/66.jpg)
ポイント• 制約のOutlet接続 • 制約を Outlet で接続することで、動的に制約の値を変更することが可能になる
• layoutIfNeeded • 通常のアニメーションのように記述してしまうと制約の更新はアニメーションしない
• NSLayoutConstraint の constant に値を代入した場合、即座に layoutSubViews が呼ばれるわけではない
• View の更新をアニメーションするという意味でアニメーションのBlocks 内に layoutIfNeeded を記述する
66Ⓒ Classmethod, Inc.
![Page 67: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/67.jpg)
まとめ• Auto Layout はとっつきづらいけど、慣れるとそんなに難しくない
• 複雑・動的なレイアウトにも対応できる • 制約を工夫して付ける • 制約をコードから操作する • とはいえ限界もあるので、Frame とうまく使い分けることも必要
67Ⓒ Classmethod, Inc.
![Page 68: DevIO Auto Layout 道場スライド](https://reader035.vdocuments.net/reader035/viewer/2022081421/55a9355c1a28ab56718b460f/html5/thumbnails/68.jpg)
Developer Day
ご静聴ありがとうございました。 スライドは後日ブログで公開します。
68
A-1
Ⓒ Classmethod, Inc.
#cmdevio2015