Help us understand the problem. What is going on with this article?

【随時更新】iPhoneX完全対応マニュアル

More than 1 year has passed since last update.

はじめに

この記事は既存、もしくは新規で開発するiOSアプリをiPhoneXに対応するための知見をまとめたものです。
新しい情報やTipsをコメントいただけると随時更新させていただきますので、よろしくお願いします!

iPhoneXについて

  • 2017年9月12日に開催されたApple Special Eventにて発表された最新のiPhone
  • 顔認証でロック解除ができる「Face ID」を搭載
  • ベゼルレスディスプレイ
    • 今までのデバイスと違って、四隅が丸くなっていたり、フロントカメラ部分の凹みがディスプレイに被っていたりするので、このようなディスプレイに対応するためにセーフエリアの概念が新しく追加された

iPhoneXの凹み

セーフエリアについて

セーフエリア

iPhoneX対応 Tips集

ここからは対応するためのTipsを紹介していきます。

Storyboardでセーフエリアを有効にするには

  1. 任意のStoryboardを開く
  2. 右側にあるInterface Builderのインスペクタを開く
  3. Use Safe Area Layout Guides」のチェックをONにする
  4. セーフエリア(UILayoutGuide) が追加される

Use Safe Area Layout Guidesのチェッカー

  • セーフエリアを有効にしていなかったStoryboardでセーフエリアを有効にすると、Top Layout GuideやBottom Layout Guideに接続していたビューは自動でセーフエリアのTop、Bottomに差し替えてくれる

セーフエリアの適用前後

ソースコード上からセーフエリアを取得したい

ViewController.swift
import UIKit

class ViewController: UIViewController {

    override func viewWillLayoutSubviews() {
        super.viewWillLayoutSubviews()

        // iOS11かどうかで分岐する
        let safeAreaInsets: UIEdgeInsets
        if #available(iOS 11, *) {
            safeAreaInsets = view.safeAreaInsets
        } else {
            safeAreaInsets = .zero
        }
        print("safeAreaInsets: \(safeAreaInsets)")
    }
}

ソースコード上からセーフエリアの変化を感知したい

  • iOS11からはセーフエリアの変化を感知するためにUIViewopen func safeAreaInsetsDidChange() が、UIViewControlleropen func viewSafeAreaInsetsDidChange() が追加されている
    • それぞれ、オーバーライドすることで、メソッド内でセーフエリアの変化を感知できる
  • このメソッドを便利に使えるようにする拡張方法などはmarty-suzukiさんの以下の記事が参考になる

セーフエリアだけで切り取るだけのデザインは非推奨

  • 上下に常に黒いバーが存在するような、セーフエリアで切り取るだけのデザインのアプリはAppleが提供する標準アプリと矛盾したデザインになってしまうため、非推奨となっている

切り取るだけは非推奨

  • 以下の画像のように、上下の背景とコンテンツが溶け込むような意識をする必要がある

Appleの提供する標準アプリの例

必要な箇所でclipsToBoundsがtrueになっているかを注意する

  • 今までのデバイスだと、ディスプレイの外に配置しておけば見えなくなるので、安心して画面外に置いていたビューが、セーフエリアによってあられもない姿にされてしまう
  • 見切れさせたくない箇所は、しっかりとclipsToBoundsをtrueにしておく必要がある

clipsToBoundsの見直し

コンテンツをフルスクリーン表示する際にはアスペクト比を保つ

  • iPhoneXでコンテンツをフルスクリーンで表示する際には、iPhone8を基準にした場合、左右を切り取って上下を埋めて表示するか、左右を合わせて上下を凹ませて表示するかして、アスペクト比は保つようにする必要がある

コンテンツをフルスクリーン表示する際にはアスペクト比を保つ

iPhoneXの下のバーを消したい

  • バーの正式名称はHome Indicator
  • iOS11からはHome Indicatorを非表示にするためのメソッド(open func prefersHomeIndicatorAutoHidden() -> Bool)がUIViewControllerに追加されている
    • オーバーライドしてtrueを返せば、Home Indicatorは画面に一定時間触らなければ、自動的に非表示になる
    • 非表示になってから画面に触れると、Home Indocatorはすぐに表示される
  • Home Indicatorは基本表示されていないとユーザーに混乱を招くため、画像や動画をフルスクリーン表示する際など、Home Indocatorが被ることでコンテンツの表示に影響が出てしまう場合以外は非表示にしないようにする
ViewController.swift
import UIKit

class ViewController: UIViewController {
    private var isHiddenHomeIndicator: Bool = true

    override func viewDidLoad() {
        super.viewDidLoad()

        if #available(iOS 11, *) { 
            // HomeIndicatorの表示を更新するためのメソッド
            setNeedsUpdateOfHomeIndicatorAutoHidden() 
        }
    }

    @available(iOS 11, *)
    override func prefersHomeIndicatorAutoHidden() -> Bool {
        return isHiddenHomeIndicator
    }
}

Home Indicator Auto Hidden

セーフエリアに対応済みのレイアウト系ライブラリ一覧

参考リンク一覧

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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした