LoginSignup
8
6

More than 5 years have passed since last update.

【iPhone X対応】Safe Area外の上下領域にコンテンツを配置

Last updated at Posted at 2017-10-24

はじめに

初心者向けに記述しております。
ご了承ください。

対象:Xcode9

やりたいこと

Screen Shot 2017-10-24 at 11.06.29.png 今回はContainerViewを用いた例で説明を行いますが、UIViewのみを使用した場合も同じように対応することができます。上記画像では、UIViewControllerにContainerViewを設置し、UIViewの色をピンクに設定しています。なお、コード側には何も手を加えていません。 初期状態ではSafe Areaの下側が表示されていません。上記画像のガイド線を見るとわかると思います。 Screen Shot 2017-10-24 at 11.07.03.png 実際にiPhone XのSimulatorで起動すると、Safe Areaの下側までViewが表示されていないことがわかると思います。そこで、**Safe Areaの下側までUIViewが表示されるように変更したい**と思います。

解決策

Screen Shot 2017-10-24 at 11.08.06.png 上記画像の、赤枠部分でiPhone Xサイズを選択するとStoryboard上のUIもiPhone Xのものに切り替わります。 Screen Shot 2017-10-24 at 11.08.29.png 切り替えを行うと、Safe Areaの下側まで表示されるようになるので、コンテンツを下まで引き伸ばし、~~制約をアップデートします~~。Containerを利用する場合はContainerView側を上記のように変更します。 **【追記】この場合、制約をSafe Areaに対してつけてはいけないので、アップデートを使わず手動で制約をつけ直したほうがいいです。** Screen Shot 2017-10-24 at 11.08.44.png すると、上記画像のようにiPhone Xの全画面にUIViewが表示されるようになりました。 なお、Safe Area外のデザインに関してはガイドラインに従う必要があります。アプリのリリースを検討している方は、Apple公式のガイドラインに一度目を通しておきましょう。
8
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
6