iPhone X に向けてレイアウトの対応をやってみた【Auto Layout】

スポンサーリンク

iPhone 8/8 Plus と iPhone X、LTE対応した Apple Watch Series 3 などなどAppleの新商品が発表されました。

Xcode 9 GM バージョンも出てきたので、iPhone X に向けた対応を進めていきましょう。

とりあえずは上下が黒く切れないようにすること。

レイアウトを iPhone X でも見た感じ問題なくすること。

スポンサーリンク

LaunchImage の追加

iPhone X の解像度は 2436px × 1125px (812pt × 375pt @3x) となります。

LaunchImage にもこのサイズの iPhone X 用サイズの設定が追加されているので、対応する画像を登録します。

これでとりあえず縦長になった新しいサイズでの表示ができるようになります。

iOS 11 Programming

iOS 11 Programming

  • 著者:堤 修一,吉田 悠一,池田 翔,坂田 晃一,加藤 尋樹,川邉 雄介,岸川克己,所 友太,永野 哲久,加藤 寛人,
  • 発行日:2017年11月16日
  • 対応フォーマット:製本版,PDF
  • PEAKSで購入する

Auto Layout の調整

iPhone X – Overview – iOS Human Interface Guidelines

上の凹部分と下のホームバー部分などを考慮しないといけない。

これにはSafe Areaという概念が導入されている。

Storyboardにもその設定があるのでこちらを有効にする。

ちなみにこの設定は Deployment Target が 9.0 以上でないと利用できない。古い場合はバージョン上げるしかないですね。

Safe Area はまさに上下の部分を除いた領域。

Navigation Controller や Tab Bar Controller などは Safe Area のレイアウトを有効にしておけば(してなくても)勝手に考慮してレイアウトを設定してくれる。

ただ、自分で用意した View の場合は、そこまでしてくれないので、画面によっては Safe Area を基準にレイアウトを調整する必要がある。

具体的には、外枠側のサイズや位置の調整をする Constraint を、 View から Safe Area に変更して調整をする。

ちなみにある程度のレイアウトは、Safe Area を有効にした時点で自動で View から Safe Area に変更するみたい。

Auto Layout の対応はこちらで説明しています。

その際この本が役に立ちました。一通りの内容が網羅せれているので参考になります。

よくわかるAuto Layout iOSレスポンシブデザインをマスター
よくわかるAuto Layout iOSレスポンシブデザインをマスター
  • 価格: ¥ 2,808
  • 出版社/メーカー:川邉 雄介
  • 販売者:Amazon.co.jp

枠に近すぎるボタンの調整

あまり近いとタップできないことになるので調整。

Tinysquare では Map を全画面に切り替えるボタンがそれに該当していた。

まとめ

てことでスクリーンショット撮ったらこんな感じ。

なかなかそれらしくなってかっこいい。

てことで、iPhone X が出るのが楽しみです。

スポンサーリンク