iPhoneXのSafeAreaに対応!独自Viewを使ってSafeArea外まで引き延ばす方法(Auto Layout化)

2018年2月1日

UINavigationControllerを使っているとデフォルトで上記のように自動でSafeArea外まで引き伸ばしてくれますが、独自Viewの場合は少しばかり設定が必要です。

今回は独自Viewを使用した場合にSafeAreaの外側までViewを伸ばし、iphoneXやそれ以外の端末でにAutoLayoutさせる方法をご紹介します。

1.Viewと追加しConstraintsを設定する

 

まずはViewを追加します、わかりやすいように赤色に設定をします。
この時Safe Areaより下に作成してください。
Safe Areaより上に作ると、次のConstraintsの設定でSafe Areaを基準にすることができなくなります。

Viewを追加したらConstraintsを追加します。
     
・TopをSafe Areaを基準に-44
・LeftをSafe Areaを基準に0
・RightをSafe Areaを基準に0
・Heightを88

と設定し4つのConstraintsを追加します。

Topを-44したのはiPhoneXのSafeAreaの位置が画面上端から44となっていて、それ以外の端末は20となっているので一番大きいサイズであるiPhoneXの分だけマイナスしてあげます。こうすることによりSafeArea外まで独自ViewをAutoLayoutしているように見せかけます。

 

このように設定できていれば大丈夫です。

サイズは任意ですが、今回は横幅は最大まで、縦幅はiPhoneXのSafeArea外 44 + 44 の88で作成しようと思います。iPhoneXの場合375,88となります。

2.独自ViewにButtonを配置しNavigationBarのように常に同じ位置に来るようにAutoLayoutする

次にボタンを独自View内に配置します。
わかりやすいようにオレンジ色にしました。

サイズとAutoresizingを設定します。

サイズはx:15 y:44 width:50 height:44としています。
yが44なのは先ほどConstraintsで-44した分だけ戻すイメージです。
heightが44なのは独自Viewを88にしたので88 - 44(y) = 44(height)となる計算です。

ここが一番重要な注意点です。
AutoresizingはLeftとButtomにつけましょう。

 


TopにしているとiPhoneX以外の端末でチェックした時にこのようにずれてしまいます。

 

以上が独自Viewを自動でSafeArea外まで引き伸ばし、UINavigationControllerやUINavigationBarのようなAutoLayoutされた独自Viewの設定方法となります。

こちらと似た方法でUITabBarControllerのように下側のSafeArea外まで引き延ばす方法も実現できます。