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

【iOS】2018年、Size Class のバリエーションが複雑になってきた

More than 1 year has passed since last update.

はじめに(TL;DR)

2018 年 11 月に発売された 第3世代 iPad Pro 12.9 インチ。
マルチタスクで画面分割すると Size Class が他のデバイスと異なるみたいです。

  • 第3世代 iPad Pro 12.9" はポートレートで 2/3画面分割すると Horizontal Size Class が Regular
  • その他のデバイスはポートレートで 2/3画面分割すると Horizontal Size Class が Compact

UISplitViewController DisplayMode??.002.jpeg

アダプティブレイアウトを実現しているアプリでは十分に注意したいですね。
特に UISplitViewController は Horizontal Size Class が Regular の場合のみ画面分割します。

つまり、 iPad Pro 12.9" は、第3世代デバイスとそれ以前のデバイスでレイアウトが異なる場合があることを意味しています。

多くの Apple 純正アプリでレイアウトの違いを確認できます。
シミュレータで連絡先アプリを Split View 表示してみると、下記のような表示になります。

第2世代 iPad Pro 12.9"

スクリーンショット 2018-12-02 13.51.43.png

第3世代 iPad Pro 12.9"

スクリーンショット 2018-12-02 13.54.03.png

第3世代 iPad Pro では Side-by-side なレイアウトで表示されます。
これらの点を十分考慮して、アプリを設計していきたいですね。

ということで、この記事で抑えておきたい内容は以上になりますが、
他のデバイスの Size Class についても触れておきます。

検証環境

  • macOS: バージョン 10.14.1
  • Xcode: Version 10.1
  • Swift: Apple Swift version 4.2.1

Apple のドキュメントはまだ更新されていない

Size Class のバリエーションは Human Interface Guidelines の Adaptivity and Layout のページに記載があります。
このページに記載されている内容を理解しておけば、基本的には間違いが無いので良いです。

ただし、2018 年 12 月現在、Human Interface Guidelines には、
第3世代 iPad Pro 12.9" Portrait 2/3 Split View についての記載がありません。
この点だけ注意が必要です。

Size Class 一覧

Apple のドキュメントが未整備なので、2018年現在の Size Class について整理しました。

デバイスの Size Class

2018年現在、大きく3つに分類することができます。

  • iPad/iPad Pro
  • iPhone (6|7|8) plus, iPhone XS Max/XR
  • 上記以外の画面サイズの iPhone

iPad/iPad Pro

サイズ、向きに依らず、すべてのデバイスで共通の Size Class です。

iPhone

Portrait はすべてのデバイスで共通の Size Class です。
Landscape は plus シリーズ / XS Max/ XR のみ水平向が Regular です。

一覧表

表にすると次のようになります。

UISplitViewController DisplayMode??.001.jpeg

プログラムから取得する際の注意点

プログラムからデバイスの Size Class を取得する場合は、UIScreen.main.traitCollection から取得できます。

UIView から取得できる TraitCollection は、マルチタスクや UISplitViewController の影響を受けるため、
デバイスの Size Class と異なる値が設定される場合があるので注意しましょう。

また、Size Class の変更は UIViewControllertraitCollectionDidChange(_:) により検知できます。

余談になりますが、 traitCollectionDidChange(_:) は画面サイズの変更や画面の回転を検知することに関しては一般的には不向きです。

上記一覧表の通り、iPad の場合は画面向きによらずに Regular / Regular です。
フルスクリーンモードでデバイスを回転した場合は、TraitCollection の変更が発生しないため、traitCollectionDidChange(_:) が呼ばれないことに注意しましょう。

マルチタスクの Size Class

iPad では、Split View によるマルチタスクが可能です。
マルチタスク時は分割比率に応じて Size Class が決まります。

【New!】 Portrait の Split View

Portrait で Split View にすると、水平向は Compact になります。
ただし、第3世代の iPad Pro 12.9" だけは、2/3 Split View で水平向が Regular です。
第3世代 iPad Pro 11" は Compact です。

UISplitViewController DisplayMode??.003.jpeg

Landscape の Split View

Landscape では、Portrait とは異なり、1/2 Split View が可能です。
iPad Pro 12.9" とそれ以外のデバイスで 1/2 Split View の SizeClass が異なります。

UISplitViewController DisplayMode??.004.jpeg

シミュレータで連絡先アプリ、メッセージアプリを Split View 表示してみると、下記のような表示になります。

第2世代 iPad Pro 10.5"

スクリーンショット 2018-12-02 18.31.55.png

スクリーンショット 2018-12-02 18.31.38.png

第2世代 iPad Pro 12.9"

スクリーンショット 2018-12-02 15.17.36.png

スクリーンショット 2018-12-02 15.22.59.png

【余談】実際の分割比率(面積比)

各デバイスの Split View のスクリーンショットを取得する過程で気付いたのですが、
1/3, 2/3 Split View は面積比が 1/3, 2/3 というわけではないみたいです。
デバイス毎に異なっているように見えます。

次のサンプルプロジェクトとシミュレータを用いて、
どのくらいの比率、サイズになるのかを確認してみました。

サンプルプロジェクトについて

サンプルプロジェクトは GitHub に公開しています。
Build Scheme は3つ用意していて、用途は下記の通りです。
実験する場合は、同一デバイスに対して3つともビルドします。

スキーム名 用途
SizeClassSample1 画面の幅、スクリーンに対する表示割合、Horizontal Size Class を表示します
SizeClassSample2 SizeClassSample1 と同様の機能でバンドル ID が異なります
SizeClassSample3 UISplitViewController の子VC の表示割合などを表示します

SizeClassSample2 が SizeClassSample1 と同様の機能でバンドル ID が異なるのは、別アプリとして起動させて分割比率を確認するためです。

Portrait

12.9" iPad Pro( 第3世代 )

スクリーンショット 2018-12-02 19.24.24.png

12.9" iPad Pro

スクリーンショット 2018-12-02 19.22.15.png

11" iPad Pro

スクリーンショット 2018-12-02 19.20.20.png

10.5" iPad Pro

スクリーンショット 2018-12-02 19.18.39.png

9.7" iPad

スクリーンショット 2018-12-02 19.15.13.png

Landscape

12.9" iPad Pro( 第3世代 )

スクリーンショット 2018-12-02 19.24.20.png

12.9" iPad Pro

スクリーンショット 2018-12-02 19.22.18.png

11" iPad Pro

スクリーンショット 2018-12-02 19.20.25.png

10.5" iPad Pro

スクリーンショット 2018-12-02 19.18.42.png

9.7" iPad

スクリーンショット 2018-12-02 19.14.59.png

SplitViewController の Size Class

UISplitViewController は Horizontal Size Class が Regular の場合に限り、
プライマリビューコントローラとセカンダリビューコントローラ( 以下、プライマリとセカンダリ )を Side-by-side に表示することができます。
preferredDisplayMode でプライマリの表示方法を Side-by-side 以外に変えることは可能 )

Side-by-side で表示した場合のプライマリとセカンダリの Horizontal Size Class は下記の通りです。

ビューコントローラ Horizontal Size Class
プライマリビューコントローラ Compact
セカンダリビューコントローラ Regular

第3世代 iPad Pro 12.9" では下記スクリーンショットのような表示になりました。

Portrait

スクリーンショット 2018-12-02 16.11.40.png

Landscape

スクリーンショット 2018-12-02 16.11.43.png

分割幅はデフォルトの状態のものです。
下記のプロパティを設定することでプライマリの分割幅を調整できます。

  • preferredPrimaryColumnWidthFraction
  • minimumPrimaryColumnWidth
  • maximumPrimaryColumnWidth

デフォルトでは、各プロパティには UISplitViewController.automaticDimension が設定されていて、システムが適当な大きさを割り当てます。

また、セカンダリの Size Class が Regular なので、セカンダリに UISplitViewController を更に入れ子することで、3ペインのような画面構成をつくることも可能です。1

上述の Size Class は、Side-by-side なレイアウトであれば、マルチタスク時も成立します。
分割幅はプライマリ側の値で決定されるので、セカンダリよりもプライマリの方が大きな画面サイズになることがあります。

UISplitViewController.automaticDimension な状態でマルチタスク表示した場合のスクリーンショットを載せておきます。

第3世代 iPad Pro 12.9"

スクリーンショット 2018-12-02 16.06.11.png

ということで、セカンダリが最も画面幅が狭いにもかかわらず、Horizontal Size Class が Regular になりました。
この挙動が気になるようであれば、UISplitViewController に対して下記の調整をすると良いでしょう。

  • preferredDisplayMode で表示方法を変える
  • preferredPrimaryColumnWidthFraction などでプライマリの横幅を調整する

まとめ

  • 第3世代 iPad Pro 12.9" でマルチタスクをすると Size Class が他と異なる場合がある
  • 1/3, 2/3 Split View はデバイスごとに面積比が違う
  • SplitViewController を使用しているとかなりスリムな画面になる場合がある
    • DisplayMode を変更するか、プライマリの幅を調整する

参考


  1. Multiple UISplitViewController Tutorial | raywenderlich.com に実装例とサンプルコードがあります。 

Why do not you register as a user and use Qiita more conveniently?
  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
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