iOS
Swift

Viewを高さ指定で上端に配置しSafe Areaの外側も同じ色にする

More than 1 year has passed since last update.

はじめに

独自のナビゲーションバーを実装しているアプリで以下の条件でiPhoneX対応していました。

  • iPhoneXとその他でNavigationBarのStatusBarを除いた高さは同じにしたい
  • StatusBarとNavigationBarは同じ色にしたいが背景色のためだけに追加のViewは置きたくない
  • コードによって端末やバージョン判定、StatusBarの高さの取得などはできるだけしたくない

指定した高さのViewをSafe Areaの上端に配置すると外側まで色が変わってくれるのが理想です。

UIToolBarは、Safe Areaぴったりに配置するとSafe Areaの下まで背景色がついてくれます。
toolbar.png
(左:Safe Areaから1だけ上にずれてる状態 右:Safe Areaにぴったり)

しかし、ただのUIViewは空気を読んでくれませんでした。

スクリーンショット 2017-10-18 3.43.38.png
(A. Safe AreaのTopに高さ44のViewを配置)

スクリーンショット 2017-10-18 3.46.12.png
(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の間に設置する

スクリーンショット 2017-10-18 4.47.32.png

  • LeftとRightはSafe Areaに対して0に設定する
  • TopはSuperViewに対して0に設定する(Safe Areaになっていないか確認)
  • BottomはSafe Areaに対して0に設定する(ここで設定されるのはSafe Area.Bottom)

スクリーンショット 2017-10-18 4.56.10.png

2. BottomをSafe Area.BottomからSafe Area.Topに変更する

スクリーンショット 2017-10-18 4.59.02.png

  • BottomからTopに変更することで、ViewがSafe Areaより上側だけに描画される

3. Safe Area.TopからのConstantを0からViewの高さに変更する

スクリーンショット 2017-10-18 5.04.39.png

  • 上端に設置したいViewの高さを指定する(マイナスにすることに注意)

4. 完成

スクリーンショット 2017-10-18 5.42.25.png

環境

  • Xcode 9.0
  • iOS 11.0

サンプル

この方法を利用した擬似NavigationBarと、それを下端に応用した擬似ToolBarのサンプルです。
https://github.com/ninten320/PseudoNavigationAndToolBar

PseudoNavigationAndToolBar.png