【第三回岡山Androidもくもく会 & 第一回岡山Swiftもくもく会 】にて、 人生初のLTをやってみました。 その際の発表資料です。共有してみます。 ※ ちなみに・・・ SlideShareにあげる際、どうやっても画像以外の情報が消える現象が発生して、結果的に、Keynoteから、.ppt ファイルに書き出して、それをさらにPDFに書き出して、解決しました。 普段、みなさんどうされてるんでしょうか。。。 ・ちなみにやった事です。 「MacのkeynoteをそのままUp × 「keynoteのスライドをPDFにしてMacからUp」 × 「keynoteのスライドをPDFにしてWindowsからUp」 × 「keynoteのフォントを全部ヒラギノ明朝とかにしてUp」 × 「keynoteをpptxに書き出して、Windows側でPDFにしてUp」 × 「keynoteをpptに書き出して、Windows側でPDFにしてUp」○

1. AutoLayoutを使って
画面レイアウトを作成してみよう
2016/03/12 (土)

2. About Me….
・ 高橋 一騎（たかはし いっき）
Twitter: @ikkitang
・ 会社員です。
iOS・Android用アプリの開発(HTML/JS)
サーバーサイドの開発、アプリ用のインフラ管理
一人しかいません。誰か助けてくだしあ。

3. iPhone用アプリで
画面を作ってみよう

4. コードで書く！

6. 書けるけど。。。

7. プロパティ覚えないといけないし
パット見だとUIがどんなものか
わからない。

8. Interface builder「チラッ」

9. Interface Builderって？

10. Interface Builderって？
部品を組み合わせて、
画面のレイアウトを作る事
ができる。
※写真はいらすと屋より拝
借しました。

11. Interface Builderって？
画面遷移が定義できる。

12. つまり、どういう事だってばよ？

13. Interface Builderを
使う事で・・・
画面のレイアウトがパッと見て理解で
きる。
画面の遷移がパッと見て分かる。

14. おし、じゃあアプリ作っていこう。

15. 僕「こんな感じで
登録フォームを
作ってみた」

16. iPhone4s勢「あの・・・」

17. iPhone6Plus勢「あの・・・」

18. 画面レイアウトどうやるの？

19. AutoLayout「任せろ」

20. AutoLayoutって？

21. AutoLayoutって？
画面レイアウトのルー
ル作りをする事で、そ
のルールに則って、
画面レイアウトを調整
する仕組み。

22. いまいち、ピンと来ないっす。

23. 例示してみます。

24. 僕「画面のど真ん中に
これぐらいのサイズでボタン置いてくれる？」

25. AutoLayout「おｋ」

26. AutoLayout「へい、どうぞ」

27. 僕「この画像を横幅いっぱいに
表示してほしいねんけど。。
縦は同じ比率で調整してくれる？
後、上に説明文置いときたいわ。」

28. AutoLayout「へい、どうぞ」

29. まとめると・・・

30. iOS用アプリの画面レイアウトは
Interface Builderで配置する部品
を決めて
AutoLayoutで部品を配置するルール
を決めて作り上げていく。

31. じゃあ、実際、
どんなレイアウトをしているか。

32. サンプルプロジェクト
作ってみます。

33. 「画面の大きさに関係なく
画面の真ん中にボタンが
ある画面レイアウト」

36. 画面が一つある
サンプルアプリが
できました。

38. 少しややこしくなるので、
Size Class はオフにします。。

39. ボタン追加してみます。

41. ドラッグして
ドロップします

43. ボタンできた。
次は制約を追加していきます。

44. AutoLayoutには、
右下のボタンを使います。

45. 制約を設定したい部品を選んで
右下のボタンを押して、制約を追加します。

46. 画面の横幅の中央に配置する。

47. 部品に何か出ました。
StoryBoard上のレイアウトが
制約を守っていませんよ。って警告です。

48. 右下のボタンを押して、
Update Framesを押します。

49. 制約に従って、
レイアウトが構築されました。

50. 次に縦方向の真ん中に配置する
制約を追加します。

51. UpdateFrames！

52. できました！

53. 各端末を並べてみました。

54. 「画像を横幅いっぱいに
拡大して表示する画面レイアウト」

55. 表示する画像を用意しておきます。

56. 画像を表示する部品を配置します。

57. 表示する画像を指定。

58. 画像が表示されました。

59. 縦横の比を指定します。

60. 左幅いっぱいまで表示するように指定
します。

61. 右端まで表示するように指定します。

62. UpdateFlames.
縦位置が自動で決まってしまいました。

63. 上から20ぐらいの位置に
配置してみます。

64. できた

65. 端末を並べてみました。

66. さっきの登録フォームも
制約を追加すると・・・

67. まとめ
Interface Builderを使うと、アプリの画
面レイアウトをビルドする事無く、確認でき
る。
画面レイアウトにルールを作る事で
AutoLayoutにより、端末間でのレイアウト
を調整できる。

68. ご清聴ありがとうございました。
m(_ _)m