post Image
新型iPad Pro (2018) のsafeAreaInsetsの値が気になって夜も眠れない

はじめに

ipad-rotate_endframe__4c3qbjskaiaq_medium_2x.jpg

画像はiPad Pro – Apple(日本)より

2018年10月30日に行われた Apple Special Event にて、新型iPad Pro (2018) が発表されました。
上の画像を見てわかるように、ホームボタンがなくなり、画面の下部にHome Indicatorを持つ初のiPadの登場となりました。
また、ベゼルが少なくなり、スクリーンの角が丸みを帯びていることがわかります。
これらのことから、今回の新型iPad Pro (2018) は今までの端末には無い新たなsafeAreaInsetsの値のパターンを持っているのではないかと、気になって気になって1日たったの8時間しか眠れなかったのですが、先日リリースされたXcode 10.1に新型iPad Pro (2018) のSimulatorが追加されていましたので、safeAreaInsetsの値を検証してみることにしました。

検証環境

  • macOS High Sierra 10.13.6
  • Xcode 10.1
  • Simulator
    • iPad Pro (11-inch) – iOS 12.1
    • iPad Pro (12.9-inch) (3rd generation) – iOS 12.1

検証方法

1. プロジェクトの作成

新規プロジェクトの作成で「Single View App」テンプレートから1枚のViewControllerを持ったプロジェクトを作成します。

2. 背景色を持ったUIViewをSafeAreaに対して追加

「Main.storyboard」を開き、ViewControllerのview上に白以外の背景色を持ったUIViewを配置し、以下の図のようにSafe Area (safeAreaLayoutGuide) の各Edge (top, bottom, leading, trailing) に対して、配置したviewの各Edgeとの制約を追加します。

スクリーンショット 2018-11-01 19.18.50.png

3. view.safeAreaInsetsの値をコンソールに出力

「ViewController.swift」を開き、ソースコードを以下のように書き換えます。override func viewWillLayoutSubviews()ViewControllerのライフサイクルの中で最も早くview.safeAreaInsetsが確定するタイミングなので、この中で出力するようにしています。
あとは実行し、ログを確認することで、safeAreaInsetsの値がわかります。

ViewContoller.swift
import UIKit

class ViewController: UIViewController {

    override func viewWillLayoutSubviews() {
        super.viewWillLayoutSubviews()

        // `view.safeAreaInsets`の値を出力
        print(view.safeAreaInsets)
    }
}

検証結果

safeAreaInsetsの値の変化に関する検証結果

今回の新型iPad Pro (2018) は上下左右ともベゼルの幅が同じため、画面回転やSlideOverによる画面分割を行っても、safeAreaInsetsの値は 1つの画面構成パターンに対して1つのパターンのみ になるということがわかりました。
また、iPad Pro (11-inch)iPad Pro (12.9-inch) (3rd generation)にはsafeAreaInsetsの値の差はありませんでした。

画面構成パターン別検証結果

ViewControllerのみの場合

スクリーンショット 2018-11-01 18.17.37.png

出力結果
UIEdgeInsets(top: 24.0, left: 0.0, bottom: 20.0, right: 0.0)

NavigationController + ViewControllerの場合

スクリーンショット 2018-11-01 18.16.25.png

出力結果
UIEdgeInsets(top: 74.0, left: 0.0, bottom: 20.0, right: 0.0)

TabBarController + ViewControllerの場合

スクリーンショット 2018-11-01 18.20.25.png

出力結果
UIEdgeInsets(top: 24.0, left: 0.0, bottom: 65.0, right: 0.0)

NavigationController + TabBarController + ViewControllerの場合

スクリーンショット 2018-11-01 18.13.58.png

出力結果
UIEdgeInsets(top: 74.0, left: 0.0, bottom: 65.0, right: 0.0)

最後に

今年の9月に発表されたiPhone XS, XS Max, XRと今回発表された新型iPad Pro (2018) の流れを見る限り、今後のAppleの新デバイスはFace IDを活用したホームボタン無しのHome Indicatorを持ったデバイスがどんどん増えていくと思われます。
そのため、今後のiOSアプリ開発ではSafeAreaを考慮したレイアウトやデザインを意識することが必須となっていくのではないかと思いました。

これで今夜からはぐっすりと眠れそうです。
それでは皆様、おやすみなさい。
最後まで読んでいただき、ありがとうございました。(寝言)


『 Swift 』Article List
Category List

Eye Catch Image
Read More

Androidに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

AWSに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Bitcoinに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

CentOSに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

dockerに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

GitHubに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Goに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Javaに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

JavaScriptに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Laravelに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Pythonに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Rubyに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Scalaに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Swiftに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Unityに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Vue.jsに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Wordpressに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

機械学習に関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。