iPhone X対応でSafeArea相当のviewを置いてみる
storyboardを使っていない古いアプリのiPhone X対応で苦労しているわけだが、、、
iPhone Xの画面の高さが667って出てしまう謎
↑ここでiPhone X対応でディスプレイのサイズをコードで取得したもののやっぱりコードで対応するのは面倒。せっかく強引にstoryboardを突っ込んだので利用してみることにした。

↑storyboardでデフォのview controllerを見るとすでにsafe areaってのが設定されてるのでこれを利用してみる。けど、このsafeAreaと同じサイズのviewはないので自作する。

↑UIViewをドラッグ&ドロップで追加して、constraintを設定。幅、高さ、あとは上下左右がsafeAreaと隙間なしって奴の計6個。

↑このstoryboardのview controllerに対応するViewControllerクラス内で使うため準備しといて、、、

↑storyboard側からViewControllerクラスに参照を教えてやる(Referencing Outletsを指定)。
これでコード側から”安全な”UIViewオブジェクトを参照できる。
- (void)viewDidLoad {
[super viewDidLoad];
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 100, 40)];
label.text = @"TopLeft";
//[self.view addSubview:label];
[safeView addSubview:label];
}
↑こんな感じでUILabelオブジェクトを画面左上に表示するのにself.viewではなくsafeViewに追加する。

↑iPhone 7でself.viewにaddSubview: した場合。

↑iPhone 7でsafeViewにaddSubview: した場合。いいね!

↑iPhone Xでself.viewにaddSubview: した場合。

↑iPhone XでsafeViewにaddSubview: した場合。いいやん!
とまあこんな感じで上下のことは気にせずにレイアウト可能になる。
今までself.viewにaddSubview:してたりself.viewのheightとか取ってたけど、self.view→safeViewと変更するだけで、コードの修正がだいぶ楽になるはずだあ!とやってるんだが、、、
現時点での問題点
(1)self.view.backgroundの色をセットしないと上下が白くなる
self.viewにsafeViewを乗せてるせいだと思うが、iPhone Xだとsafe area外が上下にあるが、このカラーが白いまま。これが不自然に見えるのが嫌だとself.view.backgroundの色をセットする必要がある。
(2)キーボードは容赦なく画面下端から出て来る
safe area内に表示すりゃOKと思っていたけど、よく考えたらキーボードは画面下の端から出て来る。safe area内にしてよって訳にもいかない。
また問題出てきたら追加するわ。
iPhone Xの画面の高さが667って出てしまう謎
↑ここでiPhone X対応でディスプレイのサイズをコードで取得したもののやっぱりコードで対応するのは面倒。せっかく強引にstoryboardを突っ込んだので利用してみることにした。

↑storyboardでデフォのview controllerを見るとすでにsafe areaってのが設定されてるのでこれを利用してみる。けど、このsafeAreaと同じサイズのviewはないので自作する。

↑UIViewをドラッグ&ドロップで追加して、constraintを設定。幅、高さ、あとは上下左右がsafeAreaと隙間なしって奴の計6個。

↑このstoryboardのview controllerに対応するViewControllerクラス内で使うため準備しといて、、、

↑storyboard側からViewControllerクラスに参照を教えてやる(Referencing Outletsを指定)。
これでコード側から”安全な”UIViewオブジェクトを参照できる。
- (void)viewDidLoad {
[super viewDidLoad];
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 100, 40)];
label.text = @"TopLeft";
//[self.view addSubview:label];
[safeView addSubview:label];
}
↑こんな感じでUILabelオブジェクトを画面左上に表示するのにself.viewではなくsafeViewに追加する。

↑iPhone 7でself.viewにaddSubview: した場合。

↑iPhone 7でsafeViewにaddSubview: した場合。いいね!

↑iPhone Xでself.viewにaddSubview: した場合。

↑iPhone XでsafeViewにaddSubview: した場合。いいやん!
とまあこんな感じで上下のことは気にせずにレイアウト可能になる。
今までself.viewにaddSubview:してたりself.viewのheightとか取ってたけど、self.view→safeViewと変更するだけで、コードの修正がだいぶ楽になるはずだあ!とやってるんだが、、、
現時点での問題点
(1)self.view.backgroundの色をセットしないと上下が白くなる
self.viewにsafeViewを乗せてるせいだと思うが、iPhone Xだとsafe area外が上下にあるが、このカラーが白いまま。これが不自然に見えるのが嫌だとself.view.backgroundの色をセットする必要がある。
(2)キーボードは容赦なく画面下端から出て来る
safe area内に表示すりゃOKと思っていたけど、よく考えたらキーボードは画面下の端から出て来る。safe area内にしてよって訳にもいかない。
また問題出てきたら追加するわ。
スポンサーサイト