はじめに
独自のナビゲーションバーを実装しているアプリで以下の条件でiPhoneX対応していました。
- iPhoneXとその他でNavigationBarのStatusBarを除いた高さは同じにしたい
- StatusBarとNavigationBarは同じ色にしたいが背景色のためだけに追加のViewは置きたくない
- コードによって端末やバージョン判定、StatusBarの高さの取得などはできるだけしたくない
指定した高さのViewをSafe Areaの上端に配置すると外側まで色が変わってくれるのが理想です。
UIToolBarは、Safe Areaぴったりに配置するとSafe Areaの下まで背景色がついてくれます。
（左：Safe Areaから1だけ上にずれてる状態 右：Safe Areaにぴったり）
しかし、ただのUIViewは空気を読んでくれませんでした。
（A. Safe AreaのTopに高さ44のViewを配置）
（B. SuperViewのTopに高さ44のViewを配置）
Safe Areaからの高さを設定する場合にはStatusBarの背景色をどう描画するかを解決する必要があります。
SuperViewからの高さを設定する場合にはStatusBarの高さの違いによるViewの高さの違いを解決する必要があります。
Safe AreaのTopからの高さを指定しつつ、SuperViewからSafe Areaまでの間も描画できれば目標が果たせそうです。
解決策
設置したいViewの高さをxとして、ViewのTopをSuperView.Top、BottomをSafe Area.Top - xに設定することで実現します。
以下に手順を説明します。
1. ViewをSuperView.TopとSafe Area.Bottomの間に設置する
- LeftとRightはSafe Areaに対して0に設定する
- TopはSuperViewに対して0に設定する(Safe Areaになっていないか確認)
- BottomはSafe Areaに対して0に設定する(ここで設定されるのはSafe Area.Bottom)
2. BottomをSafe Area.BottomからSafe Area.Topに変更する
- BottomからTopに変更することで、ViewがSafe Areaより上側だけに描画される
3. Safe Area.TopからのConstantを0からViewの高さに変更する
- 上端に設置したいViewの高さを指定する(マイナスにすることに注意)
4. 完成
環境
- Xcode 9.0
- iOS 11.0
サンプル
この方法を利用した擬似NavigationBarと、それを下端に応用した擬似ToolBarのサンプルです。
https://github.com/ninten320/PseudoNavigationAndToolBar
