iOSレイアウト入門

はじめに

某プログラミング学習サイトの学習記録を記します。

共通事項など

・Command 0 で左ペインの表示/非表示を切換え
・Preview画面でダブルクリックすると倍率が自動調整。ピンチで手動調整。
・右ペイン：インスペクターペイン
・部品を選択した状態でcommandを押しながらクリックすると複数選択できる
　(Windowsのcontrolと同じ)

01

XcodeではAuto LayoutやTraitが用意されており、複数の画面サイズに対応したアプリのレイアウト作成が可能である。
・Xcodeで新しいアプリを作成する
　・Single View App
　・Devices：Universal

02

・main.storyboardを選択して左ペインは非表示にする
・右ペイン(ユーティリティエリア)の下記二つにチェックが入っていることを確認
　・Use Auto Layout
　・Use Trait Variations
・Editor > Previewでプレビュー表示する
　・左下の[+]からiPadを追加してiPhoneとiPadの両方を表示させる

03

・Viewなどの部品を追加した後、画面下の「Add New Alighment Constraints」や「Add New Constraints」から大きさや位置の制約を追加することが出来る。
・デバイスによらず中央に配置など制約が有効に機能していることは、プレビューでiPhone,iPad両方の画面を見比べることで確認できる。

04

・03で設定した制約は、左ペインの「View Controller scene」「Constraints」でも確認できる
・制約の設定値は、右ペインのInspecterペインでも設定可能
・制約を全て削除するには、右下の「|△|」ボタンから「Clear Constraints」を選択する

05

・Viewを画面一杯に表示するには、Constrantsの左右上下を全て0に設定する。
　上下左右の制約が有効になると、赤色の線が実線として表示される。
・Constraints to marginsは、親Viewの余白を考慮するかどうかである
・親Viewの余白を考慮すると、余白幅の表示が画面端より少し余裕を開けた位置から開始する。
・Constraintsの設定がうまく行かない時は、First ItemとSecond Itemの設定が逆になっていることが原因らしい。
http://chicketen.blog.jp/archives/31223964.html

06

・二つ以上の部品を配置した場合、位置の制約は画面の端または他の部品から選択する。

07:制約を追加する方法

・左ペインのView Controllere Sceneに表示されている部品を選択してControlを押しながらD&Dする。自分自身の行の中で行えば、その部品の制約を設定できる。
・ある部品から他の部品にD&Dすると、部品間の制約を追加できる。
・右ペインの定規マークをクリックすると、その部品に関する全ての制約の設定が可能。

08：

・複数の部品の大きさを同じにする方法：
　・複数の部品を選択した状態で「equal Hights/Width」をチェックする
・複数の部品の大きさの比を設定する方法：
　・View画面のデバイス画面の横に|--|--|の形式で比を表す表記をクリックする
　・右ペイン(インスペクターペイン)のMultiplierを設定する
　・Multiplierが1なら同じ大きさ。

09：複雑なレイアウト

・デバイスの大きさや縦横が変わっても表示を崩さないために、下記の条件内で制限を付ける。
・画面端からの余白、部品間の余白を設定する。
・部品そのものの大きさは、縦方向と横方向、どちらも一つは固定しない。
　(固定されていない部品の大きさが、デバイスの表示サイズや表示方向の切換え時に可変され、表示が崩れずに自然な表示となる)

10：スタックビューを利用して配置する

・複数の部品を縦または横に並べてくれるレイアウト部品
・スタックビューの追加：
　追加したい部品を全て選択した状態で、Embed InからStack Viewを選択する。
　　→ 部品一覧のStack Viewの下に、選択した部品が含まれる状態になる
・スタックビュー自体の制限を付ける(スタックビューを一つの部品と見なして制約を付ける)
・Inspector Pane(右ペイン)のStack Viewで制限を付ける。
　・Axis：制限を付ける方向
　・Alignment：Stack Viewを枠全体に対してどのように配置するか。枠一杯に配置する場合はFillを選択する
　・Distribution：Stack View内の部品をどのように配置するか。Stack View内で等間隔に配置する場合はFill Equallyを選択する
　・Spacing：Stack View内の部品配置の間隔を設定する。
・Stack Viewを設定すると、部品を増やした際に制約を追加しなくても自動で配置される。

・別の追加方法：Viewの起動(Command Shift L)からStack Viewを追加して、その中に部品を追加する

11：サイズ可変の部品

・Viewの位置制約は、上下左右を決定しないとエラーとなる。
・LabelやTextは、内容によってサイズが自動で決まるので、位置を完全に制約しなくてもエラーにならない。

12：検索フォームの作成とContent Hugging Priority

・TextとButtonのように、内容によって幅が変わる部品を横に並べ、横幅について制約を設定するとエラーが出る(横幅を決定できないから)
・大きさを固定する優先度が高い部品(※)を選択してInspector PaneのHugging Priorityを上げることで解消する。
　※：より幅を狭くしたい部品。TextとButtonであれば、通常はButtonの幅を固定する。
・Content Hugging PriorityとContent Compression Resistance Priorityについてより詳しい解説を見つけた。
https://grandbig.github.io/blog/2018/08/04/content-hugging-priority/

※Content Hugging Prriorityは、contentにhugする優先度であるので、この数値を大きくすると、幅は小さくなる(中身の文字列に対する余白が小さくなる)

13：画面サイズに応じて異なるレイアウトとする

・サイズの大きいデバイスのみ部品を表示する
・Main.storyboardのデバイス選択にある(wChR)などの表記について
　w:Width
　h:Height
　C：Compact(幅が狭い)
　R：Regular(幅が広い)
・iOSでは、画面の縦横の長さをCとRで管理している

14：13の続き

・Main.storyboardで配置したい条件に合うデバイスを選ぶ
　(Width/HeightとCompact/Regularの組み合わせ)
・Main.storyboardの右下のVary for Traitsをクリックして
　部品を配置する条件を縦横(Width/Height)から選ぶ
　(例) WidthがRegularのデバイスを選んでVary for TraitsでWidthを選ぶ
　　　　→ WidthがRegularのデバイスにだけ部品を配置できる状態になる
・部品配置が終わったらDone for Varyingをクリックする
　→ 画面サイズに関する条件が解除される
・部品が配置されるかどうかは、プレビュー画面で確認できる。
　同じデバイスでも、方向を変えることでCompact/Regularが変わる場合は、
　方向を変えると表示されるようになることが確認できる。