概要
iOSアプリ開発において、画面上部のナビゲーションバーや、画面下部のタブバー、ツールバーなどを配置する際に、標準のコンポーネントを使わずにカスタムビューを使う事があります。その際に、Interface Builderを使用して、Safe Areaを考慮したレイアウトを設定する事があります。この記事では、その設定をする操作の手順を解説します。
目標
画面上部のバーをレイアウトします。標準コンポーネントと似た見た目にするため、バーの主たる部分の高さを44ptにしつつ、バーの領域自体は端末の画面上端まで伸長させます。Auto Layoutの制約構成としては、Top, Left, Rightを親Viewのエッジに密着させ、BottomをSafe Areaの上端から44ptの距離に設定することになります。
手順
まず、バーになるViewを追加します。その際、下図のように、親ビューの左上隅に密着するように配置します。
次に、全方向のエッジの制約を設定します。Top, Left, Rightについては、「親ビューに対して0」を設定します。Bottomについては、とりあえずそのまま設定します。
すると、下図のように制約が設定されます。Bottomに関してはSafe AreaのBottomとの制約になっているはずです。
この、Bottomの制約をダブルクリックして編集に入ります。
まず、下図のように、Safe Area.Bottomとの制約になっている部分を、Safe Area.Topとの制約に変更します。
すると、実際の配置と制約が一致しなくなり、エラー表示になります。そこで下図のように、ConstantをUse Canvas Valueに設定します。
すると、下図のようにエラーが解消され、Constantは負の値になります。
負の値だとわかりにくいので、下図のようにReverse First And Second Itemを選択して、制約関係を反転させます。
これで、バーの高さがConstantに設定された制約になります。
最後に、高さを44に設定します。
これで望んだレイアウトができました。