本イベントの流れ
- このイベントで得られること
- AutoLayoutとは？
- なぜAutoLayoutを使うのか？
- 実装方法
- 実演
- 質疑応答
- アンケート
このイベントで得られること
- AutoLayoutの使い方がわかる
- なぜAutoLayoutを使うのかがわかる
AutoLayoutとは
様々なサイズの端末でみても、きれいに画面を表示してくれる仕組みです。最近はバリエーションも多いので、リリースするにはAutoLayoutはほぼ必須になっています。またiPhoneを縦や横に回転させた時にアプリが勝手に画面回転し、表示している画面構成を切り替えているのもAutoLayoutです。
なぜAutoLayoutを使うのか？
- レイアウトが崩れていると単純に使いづらいアプリになる
- 画面が崩れてるとヒューマンインターフェースガイドラインに違反するためAppleからリジェクトされる
AutoLayoutの使い方
AutoLayoutの指定方法は以下2種類の方法がある
- ソースコード上で記載
- storyBordで記載
今回はstoryBordで指定する方法を学習、実践していきます
AutoLayoutでできること
ではAutoLayoutでできることとそのやり方を説明していきます。
AutoLayoutの指定場所
AutoLayoutの指定
内容は以下のようになっています
| 名前 | 詳細 |
|---|---|
| Width | 横幅の固定 |
| Height | 高さの固定 |
| Equal Widths | 他の要素と横幅を合わせる |
| Equal Heights | 他の要素と高さを合わせる |
| Aspect ratio | 要素のアスペクト比を指定する |
| Constrain to margins | マージンを指定する |
位置の指定
| 名前 | 詳細 |
|---|---|
| Safe Area | 画面から適度に間隔を空けた位置 |
| View | 画面端 |
| 要素名 | 表示されている要素からの位置 |
画面から見た位置の指定
| 名前 | 詳細 |
|---|---|
| Leading Edges | 複数の要素の左端を揃える |
| Trailing Edges | 複数の要素の右端を揃える |
| Top Edges | 複数の要素の上部を揃える |
| Bottom Edges | 複数の要素の下部を揃える |
| Horizontal Centers | 複数の要素の縦の中心を揃える |
| Vertical Centers | 複数の要素の横の中心を揃える |
| First Baselines | 複数の塊どうしの要素の上部を揃える |
| Horizontally in Container | 画面の縦に対して中央に揃える |
| Vertically in Container | 画面の横に対して中央に揃える |
縦、横への対応
AutoLayoutではどの画面が縦なのか横なのかによって適応させるかさせないかを指定することができます
今回はiPhoneXでの縦画面、横画面の指定方法を教えます！
変更したいAutoLayoutの要素をダブルクリックすると以下のような画面が出てきてinstalledの右の+を押すとWidthとHeightを指定できるようになります
以下のように指定することで縦画面のとき、横画面の指定ができるようになります
| 名前 | Width | Height |
|---|---|---|
| 縦 | Compact | Regular |
| 横 | Regular | Compact |
追加後は以下のような表示になるので、縦/横だけにしたいという場合は追加したあとにチェックボックスをオンにするようにしましょう！
実演！
本日作成するアプリの完成図は以下のようなものです
縦、横画面に対応したレイアウトを作っていこうと思います！
みなさんと一緒に作っていければとおもいます！
