iPhoneXが発売されて数日経ちましたが、僕のアプリもようやくiPhoneXに対応しました。

iPhoneX対応って具体的に何をすればいいのか？っていうは、Appleデベロッパーのガイドラインとか、

Quiitaさんとかの記事とかを参考にすれば、だいたい問題ないかと思います。

iPhoneX対応について

Contents

• 対応について
• iPhoneXのシミュレーターで見た感じ、全体的な機能は問題なく動きそうだけど
• iPhoneXのSafeArea対応（広告）
• iPhoneX対応 safeAreaをコードで取得する方法
  • 共有:
  • 関連

対応について

• UIScrollViewでcontentInsetAdjustmentBehaviorというプロパティが増えている。デフォルトだとautomaticが設定されており、contentInsetに自動で良い感じの値をセットしてくれるが、これが鬱陶しい場合はneverにセットする。UITableViewやUIWebviewのscrollViewプロパティも同様であることに注意（参考になる記事）
• storyboardのconstraintで、relative marginsのチェックのon/offによってsafety marginが考慮されたりされなかったりする。意図した描画と違うかどうかはiPhone XのDevice表示で確認するとわかるので、意図した表示と違う場合はconstraintのsecond itemでRelative to marginのチェックを確認する（参考になる記事）
• コードからsafe areaを取得する場合は、UIViewのsafeAreaInstesプロパティを使う。なお、これはviewの配置箇所に対して相対的に取られるもので、viewWillLayoutSubviews以降のライフサイクルで取れる。もしくはUIView#layoutSubviewsでも取れる（参考になる記事）

いろんな記事を読んでいる限り、iPhoneXではレイアウトのアスペクト比が変わったりするので、

レイアウトが崩れないかのチェックや、iPhoneXのSafe Areasにちゃんと対応すれば、とりあえずはiPhoneX対応はしたことになると思ってます。（iPhoneXをゲットしたら実機での確認は必要だけど）

Update your apps for iPhone X.

Respect Safe Areas

Your layout should fill the all-screen Super Retina display while content and controls appear correctly and are easily tappable. Use these safe areas to make sure your app works properly with the new dimensions of iPhone X.

Apps with custom layouts can also easily support iPhone X, especially if your app uses Auto Layout and adheres to these guidelines.

• Documentation

  • Human Interface Guidelines: iPhone X
  • Positioning Content Relative to the Safe Area
  • UIView Class Reference
  • Designing Websites for iPhone X

僕は、現時点では、iPhoneXをゲットできていない状況なので、iPhoneXを入手する前に行うiPhoneX対応としては、以下の対応を行いました。

・アプリでレイアウトが崩れていないかチェック

・iPhoneXのSafeAreaに収まっているかのチェック

・全体的な機能チェック

Xcode9.0のiPhoneXシミュレーターで確認できるところはチェックしましたが、カメラ撮影部分など、iPhoneのハード寄りな部分はチェックできないので、iPhoneXをゲットしたらチェックする予定。

iPhoneXのシミュレーターで見た感じ、全体的な機能は問題なく動きそうだけど

iPhoneXのシミュレーターでチェックした感じでは、画面のアスペクト比が変わってしまったので、画面によりボタンが伸びちゃっている箇所があったりしましたが、基本的な機能などは問題なさそうでした。

ただ、SafeAreaの対応だけは、それなりに時間がかかってしまいました。

僕のアプリでは、広告を表示させているんですが、その広告が、SafeArea外にはみ出て、iPhoneXの下の黒いバーにかかっている状態になってしまっていました。

先日AdMobからきたメールでも、iPhoneXではSafeArea内にちゃんと広告を表示させなきゃだめだよっていうのがあったので、

気合を入れて対応することに。

iPhoneXのSafeArea対応（広告）

とりあえず、AdMobのドキュメントに、iPhoneXのSafeAreaの対応方法が書いてあったので読んで見たら、

かなりわかりやすかったんですが、AdMobで紹介されているiPhoneXのSafe Areaの対応は、基本的にAuto Layoutで組む前提で書かれていたので、未だにAuto Layoutで組んでいない僕は、別の方法を探してみることに。

（すみません。今時まだAuto Layout使ってないんです。理解に時間がかかりそうなんで。。）

とりあえず、ドキュメントをみる限り、ビューのsafeAreaInsetsの値が、iPhoneXの場合、変化するってことはわかったんで、

やり方としては、safeAreaInsetsを取得して、その座標の上に広告を表示すれば、iPhoneXでも正常に広告が表示できるのかなと思いました。

iPhoneX対応 safeAreaをコードで取得する方法

で、調べた結果たどり着いたのが、Appleのドキュメントです。

Positioning Content Relative to the Safe Area

<span class="syntax-keyword">override</span> <span class="syntax-function"><span class="syntax-keyword">func</span> <span class="syntax-title">viewDidAppear</span><span class="syntax-params">(<span class="syntax-number">_</span> animated: Bool)</span></span> { <span class="syntax-keyword">var</span> newSafeArea = <span class="syntax-type">UIEdgeInsets</span>() <span class="syntax-comment">// Adjust the safe area to accommodate </span> <span class="syntax-comment">// the width of the side view.</span> <span class="syntax-keyword">if</span> <span class="syntax-keyword">let</span> sideViewWidth = sideView?.bounds.size.width { newSafeArea.<span class="syntax-keyword">right</span> += sideViewWidth } <span class="syntax-comment">// Adjust the safe area to accommodate </span> <span class="syntax-comment">// the height of the bottom view.</span> <span class="syntax-keyword">if</span> <span class="syntax-keyword">let</span> bottomViewHeight = bottomView?.bounds.size.height { newSafeArea.bottom += bottomViewHeight } <span class="syntax-comment">// Adjust the safe area insets of the </span> <span class="syntax-comment">// embedded child view controller.</span> <span class="syntax-keyword">let</span> child = <span class="syntax-keyword">self</span>.childViewControllers[<span class="syntax-number">0</span>] child.additionalSafeAreaInsets = newSafeArea }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<span class="syntax-keyword">override</span> <span class="syntax-function"><span class="syntax-keyword">func</span> <span class="syntax-title">viewDidAppear</span><span class="syntax-params">(<span class="syntax-number">_</span> animated: Bool)</span></span> {    <span class="syntax-keyword">var</span> newSafeArea = <span class="syntax-type">UIEdgeInsets</span>()    <span class="syntax-comment">// Adjust the safe area to accommodate </span>    <span class="syntax-comment">//  the width of the side view.</span>    <span class="syntax-keyword">if</span> <span class="syntax-keyword">let</span> sideViewWidth = sideView?.bounds.size.width {       newSafeArea.<span class="syntax-keyword">right</span> += sideViewWidth    }    <span class="syntax-comment">// Adjust the safe area to accommodate </span>    <span class="syntax-comment">//  the height of the bottom view.</span>    <span class="syntax-keyword">if</span> <span class="syntax-keyword">let</span> bottomViewHeight = bottomView?.bounds.size.height {       newSafeArea.bottom += bottomViewHeight    }    <span class="syntax-comment">// Adjust the safe area insets of the </span>    <span class="syntax-comment">//  embedded child view controller.</span>    <span class="syntax-keyword">let</span> child = <span class="syntax-keyword">self</span>.childViewControllers[<span class="syntax-number">0</span>]    child.additionalSafeAreaInsets = newSafeArea }

上の例だと、viewDidAppearのタイミングで、safeInsetsを取得して、差分をviewcontrollerのsafeInsets追加してます。

この方法を元に、行った方法が以下です。

safeAreaInsetsの値は、iOS11以上じゃないと取得できないらしいので、iOSバージョンにより条件分岐してます。

viewControllerのviewのsafeAreaInsets.bottomを取得して、その上にAdMobのバナービューを設置すれば、iPhoneXでAdMobのバナーがコードで設置できると思います。

もし同じようなことで悩んでいる人がいたら試してみてください。