Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Developer Day
Auto Layout 道場
1
A-1
掛川 敦史, iPhone アプリケーションサービス事業部
クラスメソッド株式会社
Ⓒ Classmethod, Inc.
2015年03月29日
Agenda
• Auto Layout 概要
• Lesson 1
• 基本的な制約の使い方
• 高さが可変のセル
• Lesson 2
• 制約を工夫して使う
• パララックス効果
• Lesson 3
• 制約をコードから操作する
• ア...
Auto Layout 概要
3
Auto Layout
• 制約ベースのレイアウトシステム
• iOS SDK 6.0 (Xcode 4.0) より導入された
• Deployment Target 6.0 以上で利用可能
• Auto Layout が登場する前は、Auto...
Auto Layout
Auto Layoutはアプリケーションのユーザインターフェ
イス(特に画面レイアウト)を作成するシステムで、要素
間の関係を数学的に記述することによりこれを行います。
この関係を、個々の要素に対する制約、あるいは要素間...
制約
6
Auto Layout
Auto Layoutはアプリケーションのユーザインターフェ
イス(特に画面レイアウト)を作成するシステムで、要素
間の関係を数学的に記述することによりこれを行います。
この関係を、個々の要素に対する制約、あるいは要素間...
制約 (Constraint)
• レイアウトを決定するためのルール
• 実行時には NSLayoutConstraint というクラスのインスタ
ンスでルールが表現されている
• 主に他の UI コンポーネントとの相対的な位置・サイ
ズを定義...
制約 (Constraint)
• 制約を定義する方法は2通り
• Storyboard や Xib などの Interface Builder 上
• コード
• 制約は必ずしも厳密である必要はない
• 「幅が 20 pt 以上」といった制約...
Auto Layout
Auto Layoutはアプリケーションのユーザインターフェ
イス(特に画面レイアウト)を作成するシステムで、要素
間の関係を数学的に記述することによりこれを行います。
この関係を、個々の要素に対する制約、あるいは要素間...
要素間の関係を数学的に記述
11Ⓒ Classmethod, Inc.
attribute1 ==
multiplier attribute2 + constant
NSLayoutConstraint Class Reference では、A...
例: ボタンを基準にラベルの位置を決める
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はアプリケーションのユーザインターフェ
イス(特に画面レイアウト)を作成するシステムで、要素
間の関係を数学的に記述することによりこれを行います。
この関係を、個々の要素に対する制約、あるいは要素間...
iPhone 5 発表以前のレイアウト
• 端末の画面サイズは 3.5 inch のみだった
• タブレットを除く
• レイアウトのバリエーション
• せいぜい Portrait と Landscape の違い程度
• Autosizing +...
現在のレイアウト
• 端末の画面サイズは 3.5, 4, 4.7, 5.5 inch の4種類
• タブレットを除く
• レイアウトのバリエーション
• 端末によって画面の幅も高さも異なる
• Autosizing + Frame 計算でも対応...
Auto Layout を利用した場合
• 様々な画面サイズに対応して変化するレイアウトを宣
言的に定義することができる
• 例:画面いっぱいに表示される親ビューに対して、上下左右
16pt のマージンを取ってビューを配置
• ビューの幅・高さ...
Leading & Trailing
20
Leading & Trailing
• 文字を記述する方向がことなる言語圏向けにレイアウ
トをローカライズするために必要となる概念
• 文頭が右側である言語圏向けに、レイアウトが左右反転した
UI を提供することが可能
21Ⓒ Classme...
Leading & Trailing
• Leading
• 文字列の先頭側
• 日本語や英語など、多くの言語圏では左側
• Trailing
• 文字列の末尾側
• 多くの言語圏では右側
22Ⓒ Classmethod, Inc.
Leading & Trailing
23Ⓒ Classmethod, Inc.
英語 アラビア語
制約の種類
24
制約の種類
• 制約は3種類に分類できる
• アライメントに関する制約
• 相対位置に関する制約
• サイズに関する制約
25Ⓒ Classmethod, Inc.
アライメントに関する制約
• Leading (Left or Right) Alignment
• Trailing (Right or Left) Alignment
• Top Alignment
• Bottom Alignment
•...
アライメントに関する制約
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:(UITableVi...
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-...
作ってみよう
44
スクロール時の動きの実現方法
• イメージビューの高さがスクロールに合わせて変化す
る
• contentMode
• Aspect Fill (UIViewContentModeScaleAspectFill)
45Ⓒ Classmethod...
イメージビューのサイズ
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 以下に設定する
• スクロール時に灰色のビューがナビゲーションバーの下にもぐりこむ
とイメージビューが押し上げられ...
ポイント
• 画像サイズはイメージビューの初期サイズとアスペク
ト比を合わせるといい感じになる
• 画面サイズによって初期サイズのアスペクト比が異なる場合、
十分な大きさを持った正方形にしておくといい
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 で接続した制約の値をコード上で変更することで画面の
表示を動的に変化させることが...
ポイント
• 制約のOutlet接続
• 制約を Outlet で接続することで、動的に制約の値を変更す
ることが可能になる
• layoutIfNeeded
• 通常のアニメーションのように記述してしまうと制約の更新
はアニメーションしない
...
まとめ
• Auto Layout はとっつきづらいけど、慣れるとそん
なに難しくない
• 複雑・動的なレイアウトにも対応できる
• 制約を工夫して付ける
• 制約をコードから操作する
• とはいえ限界もあるので、Frame とうまく使い分ける...
Developer Day
ご静聴ありがとうございました。
スライドは後日ブログで公開します。
68
A-1
Ⓒ Classmethod, Inc.
#cmdevio2015
Upcoming SlideShare
Loading in …5
×

DevIO Auto Layout 道場スライド

3,162 views

Published on

Developers.IO 2015 のハンズオンセッション Auto Layout 道場のスライドです。

Published in: Engineering
  • Dating direct: ❤❤❤ http://bit.ly/39mQKz3 ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sex in your area is here: ♥♥♥ http://bit.ly/39mQKz3 ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • (Unlimited)....ACCESS WEBSITE Over for All Ebooks ................ accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M }
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ..............ACCESS that WEBSITE Over for All Ebooks ................ ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

DevIO Auto Layout 道場スライド

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

×