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

はじめに（TL;DR）

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

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

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

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

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

第２世代 iPad Pro 12.9"

第３世代 iPad Pro 12.9"

第３世代 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 には、
第３世代 iPad Pro 12.9" Portrait 2/3　Split View についての記載がありません。
この点だけ注意が必要です。

Size Class 一覧

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

デバイスの Size Class

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

• 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 です。

一覧表

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

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

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

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

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

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

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

マルチタスクの Size Class

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

【New!】 Portrait の Split View

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

Landscape の Split View

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

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

第２世代 iPad Pro 10.5"

第２世代 iPad Pro 12.9"

【余談】実際の分割比率（面積比）

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

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

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

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

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

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

Portrait

12.9" iPad Pro（ 第３世代 ）

12.9" iPad Pro

11" iPad Pro

10.5" iPad Pro

9.7" iPad

Landscape

12.9" iPad Pro（ 第３世代 ）

12.9" iPad Pro

11" iPad Pro

10.5" iPad Pro

9.7" iPad

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

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

Portrait

Landscape

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

• preferredPrimaryColumnWidthFraction
• minimumPrimaryColumnWidth
• maximumPrimaryColumnWidth

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

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

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

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

第３世代 iPad Pro 12.9"

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

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

まとめ

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

参考

• Adaptivity and Layout - Visual Design - iOS - Human Interface Guidelines - Apple Developer
• Adopting Multitasking Enhancements on iPad: Getting Oriented
• UISplitViewController - UIKit | Apple Developer Documentation

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