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.

3 auto layout tips

2,804 views

Published on

@tomzoh による【第13回】potatotips(iOS/Android開発Tips共有会) の発表資料です。
#potatotips

Published in: Software

3 auto layout tips

  1. 1. 3 Auto Layout Tips デジタルサーカス(株)⻑⾧長⾕谷川智希
  2. 2. ⾃自⼰己紹介 ・ ⻑⾧長⾕谷川智希 / デジタルサーカス(株) 副団⻑⾧長CTO ・ 開発系趣味: iOSアプリ開発, Web開発 ・ その他趣味: レンタルカートレース, 電⼦子⼯工作(mbed), … と も き @tomzoh iOS 執筆中
  3. 3. デジタルサーカス(株) ・ Webサイト受託開発 ・ スマホアプリ受託開発 ・ ⾃自社サービス (PHP, CakePHP, Drupal) (iOS, Android) (http://appbuilder.jp) Twitter: @tomzoh Yo: TOMZOH
  4. 4. Twitter: @tomzoh Yo: TOMZOH
  5. 5. 今⽇日のテーマ: 3 Auto Layout Tips
  6. 6. 導⼊入
  7. 7. Auto Layout ・ iOS6から導⼊入されたUI部品のレイアウトの ⽅方法。 ・ UI部品の位置や⼤大きさを「制約」として定義 する。 ・ 右の例例の場合、以下を制約として定義して いる。 ・ 上・左・右の余⽩白
 (Top / Leading / Trailing Space) ・ ⾼高さ
 (Height)

  8. 8. なぜいまAuto Layoutの話? ・ iPhone6, 6Plus発売、画⾯面バリエーション増加。 ・ Auto Layout不不可避になった。 ・ 今までは使わなくてもアプリは作れたので、意外とiOS開発 経験の⻑⾧長いエンジニアほどAuto Layoutになじみが無かった りする。 ・ そんじゃ⾃自分がこれまでに得た知⾒見見をシェアしよう!
  9. 9. Auto Layout設定の基本
  10. 10. Auto Layoutの設定の基本 ・ Auto Layout設定の基本はシンプル。
 「要素の位置と⼤大きさを過不不⾜足なく定義する」こと。 (x, y) (w, h)
  11. 11. 頻出パターン パターン1: 左右に伸びる
 上と左の余⽩白(位置)
 右の余⽩白と⾼高さ(⼤大きさ) パターン2: サイズ固定
 上と左の余⽩白(位置)
 幅と⾼高さ(⼤大きさ) パターン3: サイズ可変
 上と左の余⽩白(位置)
 右と下の余⽩白(⼤大きさ)
  12. 12. パターン2: サイズ固定
 上と左の余⽩白(位置)
 幅と⾼高さ(⼤大きさ) パターン1: 左右に伸びる
 上と左の余⽩白(位置)
 右の余⽩白と⾼高さ(⼤大きさ) パターン3: サイズ可変
 上と左の余⽩白(位置)
 右と下の余⽩白(⼤大きさ)
  13. 13. 3 Auto Layout Tips
  14. 14. (1) Outlet経由で制約を変更更 ・ 制約にはOutletを作ることができる。 ・ Outlet = Interface Builder(GUI)で作ったUI部品とクラ スプロパティを関連づける仕組み。 ・ 「中に⼊入るテキストの⻑⾧長さで⾼高さが変わるUILabel」
 → UILabelの⾼高さの制約をOutletにすると便便利利。
  15. 15. (2) Auto Layoutのタイミング ・ Outlet経由で制約を変更更する場合、viewDidLoad(_:)ではダメ。 ・ その後Auto Layoutが動作して制約ベースの場所・サイズに戻されてしまう。 ・ viewDidLayoutSubviews()の中で触る。
  16. 16. (3) UIScrollView ・ UIScrollViewの制約はちょっと⾯面倒。 ・ 2セットの制約が必要。 ・ UIScrollView⾃自体の位置と⼤大きさ ・ 中のコンテンツ(右図のUIView)の位置と⼤大きさ ・ UIViewの⽅方が⼤大きければスクロールが発⽣生する。 ・ 中のコンテンツは⼤大きなUIViewを作って、UIScrollViewの直 接の⼦子どもはそれだけにするのが吉。 UIView UIScrollView画⾯面
  17. 17. これだけ押さえれば Auto Layout とりあえず使えるはず。
  18. 18. Enjoy Auto Layout!
  19. 19. ありがとうございました。 @tomzoh 2⽉月から⼀一緒に開発してくださるパートナーさん iOS, Android各1名募集中です。

×