Xcode
iOS
InterfaceBuilder

Interface BuilderでSafe Areaを考慮したバーのレイアウトを設定する手順


概要

iOSアプリ開発において、画面上部のナビゲーションバーや、画面下部のタブバー、ツールバーなどを配置する際に、標準のコンポーネントを使わずにカスタムビューを使う事があります。その際に、Interface Builderを使用して、Safe Areaを考慮したレイアウトを設定する事があります。この記事では、その設定をする操作の手順を解説します。


目標

画面上部のバーをレイアウトします。標準コンポーネントと似た見た目にするため、バーの主たる部分の高さを44ptにしつつ、バーの領域自体は端末の画面上端まで伸長させます。Auto Layoutの制約構成としては、Top, Left, Rightを親Viewのエッジに密着させ、BottomをSafe Areaの上端から44ptの距離に設定することになります。


手順

まず、バーになるViewを追加します。その際、下図のように、親ビューの左上隅に密着するように配置します。

ss1.png

次に、全方向のエッジの制約を設定します。Top, Left, Rightについては、「親ビューに対して0」を設定します。Bottomについては、とりあえずそのまま設定します。

ss2.png

すると、下図のように制約が設定されます。Bottomに関してはSafe AreaのBottomとの制約になっているはずです。

ss3.png

この、Bottomの制約をダブルクリックして編集に入ります。

まず、下図のように、Safe Area.Bottomとの制約になっている部分を、Safe Area.Topとの制約に変更します。

ss4.png

すると、実際の配置と制約が一致しなくなり、エラー表示になります。そこで下図のように、ConstantをUse Canvas Valueに設定します。

ss6.png

すると、下図のようにエラーが解消され、Constantは負の値になります。

ss7.png

負の値だとわかりにくいので、下図のようにReverse First And Second Itemを選択して、制約関係を反転させます。

ss8.png

これで、バーの高さがConstantに設定された制約になります。

ss9.png

最後に、高さを44に設定します。

ss10.png

これで望んだレイアウトができました。