###⬅️: Lesson 4
概要: ますます増えているデバイスはどう対応するか? Autolayoutはこの問題を解決する。
Step 1. まず、StackView
を紹介したいと思う。CSSを勉強したことがある方はFlexbox
はきっと聞いたことがある。StackView
とFlexbox
はほどんと同じだ。
このプロジェクトを開く、以下のgifのようにやってみよう。(gif中のXcodeバージョンは8.2)
Step 2. ViewをStackView
に入れるだけのはどう配置するかまだわからない。ViewとStackView
に制限(constraints)をつける必要がある。
Step 3. 各デバイスでの様子を見たい場合。
Step 4. Apple Musicのstoryboard同じ方法でやってみよう。結果はこのプロジェクトを参考してください。
Step 5. Autolayoutは全部理解する、そして使いこなすのは若干難しい。でも、Autolayoutはエンジニアに自分のデザインを説明する唯一の方法とも言える。
幸いにAutolayoutの理念を理解したら、Sketchを利用して、Autolayoutを再現することができる。
Auto Layout for Sketchというpluginをインストールすることが必要だ。
使い方はXcode StoryboardのAutolayoutより、はるかに使いやすい。
このSketchを開く、以下のgifのようにやってみよう。
まずは、StackView
を作ろう。
次は、制限(constraints)をつけよう。
最後、各デバイスでの様子を見よう。