Skip to content

Latest commit

 

History

History
48 lines (24 loc) · 2.13 KB

README.md

File metadata and controls

48 lines (24 loc) · 2.13 KB

Lesson 5. Let's play Autolayout

###⬅️: Lesson 4

概要: ますます増えているデバイスはどう対応するか? Autolayoutはこの問題を解決する。

Step 1. まず、StackViewを紹介したいと思う。CSSを勉強したことがある方はFlexboxはきっと聞いたことがある。StackViewFlexboxはほどんと同じだ。

このプロジェクトを開く、以下の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)をつけよう。

最後、各デバイスでの様子を見よう。