Developer Day

Auto Layout 道場

1

A-1

掛川 敦史, iPhone アプリケーションサービス事業部 クラスメソッド株式会社

Ⓒ Classmethod, Inc.

2015年03月29日

Agenda• Auto Layout 概要 • Lesson 1 • 基本的な制約の使い方 • 高さが可変のセル

• Lesson 2 • 制約を工夫して使う • パララックス効果

• Lesson 3 • 制約をコードから操作する • アニメーション

2Ⓒ Classmethod, Inc.

Auto Layout 概要

3

Auto Layout• 制約ベースのレイアウトシステム • iOS SDK 6.0 (Xcode 4.0) より導入された • Deployment Target 6.0 以上で利用可能 • Auto Layout が登場する前は、Autosizing を利用するか Frame をコードで計算して設定してレイアウトを組んでいた

4Ⓒ Classmethod, Inc.

Auto Layout“Auto Layoutはアプリケーションのユーザインターフェイス（特に画面レイアウト）を作成するシステムで、要素間の関係を数学的に記述することによりこれを行います。 この関係を、個々の要素に対する制約、あるいは要素間の制約として定義します。 Auto Layoutを導入すれば、画面の大きさや向き、地域設定（言語など）の違いに応じて動的に変化する、汎用的な画面レイアウトを作り出すことができます。”

5Ⓒ Classmethod, Inc.

Auto Layout ガイドより引用

制約

6

Auto Layout“Auto Layoutはアプリケーションのユーザインターフェイス（特に画面レイアウト）を作成するシステムで、要素間の関係を数学的に記述することによりこれを行います。 この関係を、個々の要素に対する制約、あるいは要素間の制約として定義します。 Auto Layoutを導入すれば、画面の大きさや向き、地域設定（言語など）の違いに応じて動的に変化する、汎用的な画面レイアウトを作り出すことができます。”

7Ⓒ Classmethod, Inc.

Auto Layout ガイドより引用

制約 (Constraint)• レイアウトを決定するためのルール • 実行時には NSLayoutConstraint というクラスのインスタンスでルールが表現されている

• 主に他の UI コンポーネントとの相対的な位置・サイズを定義 • 親ビューもしくは兄弟ビューとの間のルールを定義 • 他の UI コンポーネントからの相対位置 • 他の UI コンポーネントを基準とした自身のサイズ • 自身のサイズ

8Ⓒ Classmethod, Inc.

制約 (Constraint)• 制約を定義する方法は２通り • Storyboard や Xib などの Interface Builder 上 • コード

• 制約は必ずしも厳密である必要はない • 「幅が 20 pt 以上」といった制約を定義することも可能 • 複数の制約が競合する場合には、優先順位が高い方が適用される

9Ⓒ Classmethod, Inc.

Auto Layout“Auto Layoutはアプリケーションのユーザインターフェイス（特に画面レイアウト）を作成するシステムで、要素間の関係を数学的に記述することによりこれを行います。 この関係を、個々の要素に対する制約、あるいは要素間の制約として定義します。 Auto Layoutを導入すれば、画面の大きさや向き、地域設定（言語など）の違いに応じて動的に変化する、汎用的な画面レイアウトを作り出すことができます。”

10Ⓒ Classmethod, Inc.

Auto Layout ガイドより引用

要素間の関係を数学的に記述

11Ⓒ Classmethod, Inc.

attribute1 == multiplier × attribute2 + constant

NSLayoutConstraint Class Reference では、Auto Layout における UI コンポーネント間の関係は下記の式で表されると記述されている

例: ボタンを基準にラベルの位置を決める

12Ⓒ Classmethod, Inc.

ラベルはボタンの 20pt 右に配置

例: ボタンを基準にラベルの位置を決める

13Ⓒ Classmethod, Inc.

ラベルの左端のX座標 = 1.0 × ボタンの右端のX座標

+ 20ラベルはボタンの 20pt 右に配置

例: ボタンを基準にラベルの位置を決める

14Ⓒ Classmethod, Inc.

ラベルの左端のX座標 = 1.0 × ボタンの右端のX座標

+ 20

これが制約

動的に変化するレイアウト

15

Auto Layout“Auto Layoutはアプリケーションのユーザインターフェイス（特に画面レイアウト）を作成するシステムで、要素間の関係を数学的に記述することによりこれを行います。 この関係を、個々の要素に対する制約、あるいは要素間の制約として定義します。 Auto Layoutを導入すれば、画面の大きさや向き、地域設定（言語など）の違いに応じて動的に変化する、汎用的な画面レイアウトを作り出すことができます。”

16Ⓒ Classmethod, Inc.

Auto Layout ガイドより引用

iPhone 5 発表以前のレイアウト• 端末の画面サイズは 3.5 inch のみだった • タブレットを除く

• レイアウトのバリエーション • せいぜい Portrait と Landscape の違い程度 • Autosizing + Frame 計算で、絶対座標でレイアウトしても特に問題なし

17Ⓒ Classmethod, Inc.

3.5 inch 320 x 480

単位: pt

現在のレイアウト• 端末の画面サイズは 3.5, 4, 4.7, 5.5 inch の４種類 • タブレットを除く

• レイアウトのバリエーション • 端末によって画面の幅も高さも異なる • 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

Auto Layout を利用した場合• 様々な画面サイズに対応して変化するレイアウトを宣言的に定義することができる • 例：画面いっぱいに表示される親ビューに対して、上下左右 16pt のマージンを取ってビューを配置

• ビューの幅・高さは画面サイズに応じて自動的に計算される • iOS 8 から追加された Size Class にも対応 • Size Class 毎に制約を設定することも可能 • 今回は Size Class についての説明は割愛します

19Ⓒ Classmethod, Inc.

Leading & Trailing

20

Leading & Trailing• 文字を記述する方向がことなる言語圏向けにレイアウトをローカライズするために必要となる概念 • 文頭が右側である言語圏向けに、レイアウトが左右反転した UI を提供することが可能

21Ⓒ Classmethod, Inc.

Leading & Trailing• Leading • 文字列の先頭側 • 日本語や英語など、多くの言語圏では左側

• Trailing • 文字列の末尾側 • 多くの言語圏では右側

22Ⓒ Classmethod, Inc.

Leading & Trailing

23Ⓒ Classmethod, Inc.

英語 アラビア語

制約の種類

24

制約の種類• 制約は３種類に分類できる • アライメントに関する制約 • 相対位置に関する制約 • サイズに関する制約

25Ⓒ Classmethod, Inc.

アライメントに関する制約• 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.

アライメントに関する制約

27Ⓒ Classmethod, Inc.

Leading Alignment Center X Alignment

左揃え 中央揃え

相対位置に関する制約• Horizontal Space • Vertical Space

28Ⓒ Classmethod, Inc.

相対位置に関する制約

29Ⓒ Classmethod, Inc.

Horizontal Space

コンポーネント間のスペース

サイズに関する制約• Width • Height • Equal Widths • Equal Heights

30Ⓒ Classmethod, Inc.

サイズに関する制約

31Ⓒ Classmethod, Inc.

Equal Width

幅が等しい

Lesson 1

32

高さ可変のセル

33Ⓒ Classmethod, Inc.

デモ

34

作ってみよう

35

実装すること1. 適切に制約を配置する 2. セルの高さを指定する

36Ⓒ Classmethod, Inc.

1. 適切に制約を配置する

37Ⓒ Classmethod, Inc.

• ContentView - Label 間 の制約 • Label - Label 間 の制約

2. セルの高さを指定する (iOS 8)• セルの高さとして UITableViewAutomaticDimension を指定する

38Ⓒ Classmethod, Inc.

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath { return UITableViewAutomaticDimension; }

2. セルの高さを指定する (iOS 7)• UITableViewAutomaticDimension は使用不可 • サイズ計測用のセルを使用して高さを計算する

39Ⓒ Classmethod, Inc.

Lesson 2

40

パララックス

41Ⓒ Classmethod, Inc.

上にスクロール

デモ

42

パララックス

43Ⓒ Classmethod, Inc.

http://blog.domesticcat.com.au/ios/2014/03/19/creating-parallax-effect-on-uiscrollview-using-simple-constraints/

作ってみよう

44

スクロール時の動きの実現方法• イメージビューの高さがスクロールに合わせて変化する

• contentMode • Aspect Fill (UIViewContentModeScaleAspectFill)

45Ⓒ Classmethod, Inc.

これらの組み合わせで、あたかもイメージビューがビューの下にもぐっていくように見せている

イメージビューのサイズ

46Ⓒ Classmethod, Inc.

contentOffset.y == 0 contentOffset.y >= 0

UIImageView の Frame

UIImageView の Frame

イメージビューのサイズ

47Ⓒ Classmethod, Inc.

contentOffset.y == 0 contentOffset.y >= 0

UIImageView の Frame

UIImageView の Frameナビゲーションバーの下端にぴったり

くっついた状態で、イメージビューの高さが小さくなっていく

イメージビューのサイズ

48Ⓒ Classmethod, Inc.

contentOffset.y == 0 contentOffset.y <= 0

UIImageView の Frame UIImageView の

Frame

イメージビューのサイズ

49Ⓒ Classmethod, Inc.

contentOffset.y == 0 contentOffset.y <= 0

UIImageView の Frame UIImageView の

Frame

ナビゲーションバーの下端にぴったりくっついた状態で、イメージビューの

高さが大きくなっていく

Aspect Fill

50Ⓒ Classmethod, Inc.

contentOffset.y == 0 contentOffset.y >= 0

実画像サイズ

実画像サイズ

Aspect Fill

51Ⓒ Classmethod, Inc.

contentOffset.y == 0 contentOffset.y >= 0

実画像サイズ

実画像サイズ

イメージビューの高さが小さくなると、画像のスケールはそのままに画像の中

央部分が表示され続ける

Aspect Fill

52Ⓒ Classmethod, Inc.

contentOffset.y == 0 contentOffset.y <= 0

実画像サイズ実画像サイズ

Aspect Fill

53Ⓒ Classmethod, Inc.

contentOffset.y == 0 contentOffset.y <= 0

実画像サイズ実画像サイズ

イメージビューの高さが大きくなると、画像のスケールも大きくなって画像が

伸びたように見える

ポイント• イメージビューと Top Layout Guide の間 を 0pt にする制約は Priority を 999 以下に設定する • スクロール時に灰色のビューがナビゲーションバーの下にもぐりこむとイメージビューが押し上げられて、上記の制約を満たさない状態になってしまう

• Priority が 1000 だと実行時コンソールにエラーが出力されてしまうが、999 にすればエラーが出力されない • Priority が 1000 の場合、その制約は必ず守られなければならない (Required) という意味になる

• Priority が 999 であれば必須ではなくなるので、制約は出来る限り守られることになる

54Ⓒ Classmethod, Inc.

ポイント• 画像サイズはイメージビューの初期サイズとアスペクト比を合わせるといい感じになる • 画面サイズによって初期サイズのアスペクト比が異なる場合、十分な大きさを持った正方形にしておくといい

55Ⓒ Classmethod, Inc.

Lesson 3

56

デモ

57

作ってみよう

58

初期状態

59Ⓒ Classmethod, Inc.

初期状態

60Ⓒ Classmethod, Inc.

メニューの幅の分だけTrailing Spaceをマイナスする。

Viewを画面の外に配置することで非表示にしている。

メニュー展開状態

61Ⓒ Classmethod, Inc.

メニュー展開状態

62Ⓒ Classmethod, Inc.

Trailing Space = 0 にすることでメニューの右端と画面の右端が揃う。

メニュー展開状態

63Ⓒ Classmethod, Inc.

Trailing Space = 0 にすることでメニューの右端と画面の右端が揃う。

この過程をアニメーションしたい！

制約はOutletで接続できる

64Ⓒ Classmethod, Inc.

Type: NSLayoutConstraint

制約の変更をアニメーションする• 制約の値を変更する • NSLayoutConstraint のプロパティ constant に値を代入する • Outlet で接続した制約の値をコード上で変更することで画面の表示を動的に変化させることが可能

• アニメーションさせるには • 制約の値を変更したあとに明示的に layoutIfNeeded を呼ぶ必要がある

• アニメーションの Blocks 内で layoutIfNeeded を呼ぶことでアニメーションを実現する

65Ⓒ Classmethod, Inc.

ポイント• 制約のOutlet接続 • 制約を Outlet で接続することで、動的に制約の値を変更することが可能になる

• layoutIfNeeded • 通常のアニメーションのように記述してしまうと制約の更新はアニメーションしない

• NSLayoutConstraint の constant に値を代入した場合、即座に layoutSubViews が呼ばれるわけではない

• View の更新をアニメーションするという意味でアニメーションのBlocks 内に layoutIfNeeded を記述する

66Ⓒ Classmethod, Inc.

まとめ• Auto Layout はとっつきづらいけど、慣れるとそんなに難しくない

• 複雑・動的なレイアウトにも対応できる • 制約を工夫して付ける • 制約をコードから操作する • とはいえ限界もあるので、Frame とうまく使い分けることも必要

67Ⓒ Classmethod, Inc.

Developer Day

ご静聴ありがとうございました。 スライドは後日ブログで公開します。

68

A-1

Ⓒ Classmethod, Inc.

#cmdevio2015