Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
73
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

Top/Bottom Layout GuideをSafe Area対応する

iPhone Xの登場により、iOS 11 + Xcode 9からSafe Areaという概念が導入されました。これによりTop/Bottom Layout GuideはDeprecatedになりました。

Storyboard上にAuto Layoutで配置されたViewを、Safe Areaに対応するのはほとんどの場合、簡単だと思います。

Top/Bottom Layout GuideからSafe Area対応する

Xcode 9以前で、Top/Botton Layout Guideで配置したViewのConstraintを、Xcode9で見てみると、そのままになっています。自動変換も変換を促すアラートも出ません。

001.png

File InspectorにUse Safe Area Layout Guidesという項目があるので、チェックを入れます。

002.png

再び先程のViewのConstraintを見ると、Safe Areaとして配置されています!

003.png

Safe Areaについて

まずSafe AreaがTop/Botton Layout Guideと何が違うのか簡単に説明します。

  • Top/Botton Layout Guideは、StatusBarもしくはNavigationBarの下端、Toolbarの上端の内側にViewを配置するための境界線だった
  • Left Layout Guide、Right Layout Guideは無かった。Viewは常にスクリーンの左右一杯に表示されるため、それらは必要無かった
  • しかし、iPhone Xの登場によって左右のLayout Guideも必要になった。横画面(Landscape)にした時に、マイク、カメラ部分と重ならないように左右にマージンが必要になったからである
  • それらを考慮した上下左右の境界線を、Safe Areaと呼ぶことになった

iPhone Xでの表示の差異

では、実際にiPhone XのSimulator上での動作を見てみる。

背景色が青のViewを、Top/Bottom Layout内に配置した場合、Safe Area内に配置した場合を比較してみる。

縦画面(Portrait)の場合は、どちら上部のマイク・カメラ領域(StatusBar)と下部のジェスチャー領域の内側にViewが表示されている。

004.png

004-1.png

横画面(Landscape)では、Top/Bottom Layout Guideの場合は、左右いっぱいに表示される。

005.png

Safe Areaの場合は、マイク・カメラ領域(左もしくは右)の内側に配置され、マイク・カメラと逆側も同じだけマージンが取られる。

006.png

基本的には、Safe Area内にViewを配置したほうが良いだろう。画像を全画面表示する時などは、Safe AreaではなくSuper Viewに対してConstraintを貼ることになるだろう。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
73
Help us understand the problem. What are the problem?