こんにちは！株式会社ZOZOでショップスタッフ向けの販売サポートツール「FAANS」のiOSアプリ開発を担当しているイッセーと申します！
今回は業務の中で必要になった「ハーフモーダルの具体的な高さ」を調べた結果をまとめました。ニッチな内容にはなりますが、ハーフモーダルを使う実装で参考になれば嬉しいです。
はじめに
FAANSでは、YouTubeショートのコメント表示画面のように、画面上部に動画やコンテンツを表示するハーフモーダル画面があります。レイアウトの都合上、ハーフモーダルの高さに応じて、画面上部のコンテンツの高さを動的に変更する必要がありました。
公式ドキュメントの定義
Apple公式ドキュメントを確認すると、iOSのハーフモーダル実装に使用されるUISheetPresentationControllerのDetentクラスにおけるmediumメソッドについて、以下のように記載されています。
Creates a system detent for a sheet that’s approximately half the height of the screen ...
「スクリーンの高さの約半分」と定義されていますが、具体的な数値は示されていません。
検証方法
検証にあたっては、さまざまなiPhoneデバイスを用いて実際のハーフモーダルの高さを計測しました。
その際、各デバイスの画面高さを基準にして、ハーフモーダルが画面全体のどの割合を占めているかを比較しました。
結論
検証の結果、ハーフモーダルの高さは、デバイスによって若干の差異があるものの、おおよそ画面の 53% であることがわかりました。公式ドキュメントの定義にほぼ沿った結果となりました。
以下は検証したデバイスごとの詳細です。
| デバイス | 割合 | ハーフモーダルの高さ | 画面の高さ |
|---|---|---|---|
| iPhone SE (2, 3 Gen) | 52.6% | 351 | 667 |
| iPhone 13, 14 | 53.9% | 455 | 844 |
| iPhone 15, 15 Pro, 16 | 53.2% | 453 | 852 |
| iPhone 15 Pro Max | 53.4% | 498 | 932 |
| iPhone 16 Pro | 53.1% | 464 | 874 |
| iPhone 16 Pro Max | 53.3% | 510 | 956 |
画面サイズが異なっても割合は一定
iPhone SEのような小型デバイスでも、iPhone 16 Pro Maxのような大型デバイスでも、割合はほぼ53%で一定でした。
また、画面が少し縦に伸びたiPhone 16 Proシリーズでも、ハーフモーダルの高さの割合は大きく変わりませんでした。
まとめ
ハーフモーダルの高さは公式ドキュメントの記述通り「画面の約半分」とされていますが、正確には「約53%」であることが確認できました。
この調査により、すべてのデバイスで一貫した表示ができるようなハーフモーダルの実装をすることができました。