Sheets
原文:https://developer.apple.com/design/human-interface-guidelines/ios/views/sheets/
hr.icon
シートは、ユーザーが現在のコンテキストから離れることなく、親ビューに関連した個別のタスクを実行するのに役立ちます。
例えば、メールでは、メールボックスから離れずにメールを作成できるようにシートを使用し、翻訳では、翻訳したい単語を定義するための辞書ビューを表示できるようにシートを使用しています。
https://gyazo.com/ec78ebf302d69564b0bc0a273cdd74d9
https://gyazo.com/15c4e79db0a4b9f0768c3fb500e527cd
開発者向けのガイダンスとして、UISheetPresentationControllerを参照してください。
シートは、コンテンツの一部を覆うカードとして表示されます。
カードの上部の角は丸くなっており、親ビューと視覚的に区別されます。
シートの角の半径は、アプリの他の部分で使用する角の半径に合わせてカスタマイズできます。
開発者向けのガイダンスは、 preferredCornerRadiusを参照してください。
一般的に、シートのサイズを変更するには、シートの内容をスクロールしたり、グラバー(シートの上端に表示される小さな水平方向のインジケータ)をドラッグしたりする必要があります。
iOS 15 以降では、シートのサイズは、シートが自然に置かれる特定の高さである「ディテント」に応じて変更されます。
このシステムでは、シートを完全に広げたときの高さを「大」、完全に広げたときの半分程度の高さを「中」と定義しています。
https://gyazo.com/55f0637f56568f2805d49bc6dae14e01
https://gyazo.com/58ffc10148a91b61539fe1c16be7cff2
シートは自動的に大のディテントをサポートします。
「中」のディテントを追加すると、シートは両方の高さで静止できますが、「中」のみを指定すると、シートは最大の高さまで拡張できません。
開発者向けのガイダンスとして、detentsを参照してください。
デフォルトでは、シートはモーダルであり、親ビューを縮小し、親ビューとのインタラクションができないようなフォーカスされた体験を提供します。
ユーザーはモーダルシートでの操作を終えると、親ビューでの作業を再開する前にシートを解除するか、または自動的に解除されます。
iOS 15以降では、シートを非モーダルにすることもできます。
非モーダルなシートが画面に表示されている場合、ユーザーは親ビューでタスクを継続しながら、シートと対話することができます。
没入感のないコンテンツや簡単なタスクにはシートを使いましょう。
シートを使うと、親ビューの一部を背後に表示することができるので、元のコンテキストを維持したままシートを操作することができます。
ビデオ、写真、カメラビューなどの没入型コンテンツを提供する場合や、ドキュメントのマークアップや写真の編集などの複雑なタスクを実行する場合は、フルスクリーンのモーダルプレゼンテーションを使用します。
フルスクリーンモーダルのスタイルは、画面全体を覆うので、視覚的な混乱を最小限に抑えることができます。
開発者向けのガイダンスとして、UIModalPresentationStyle.fullScreenを参照してください。
シートの内容を段階的に開示できるように、中程度のディテントのサポートを検討してください。
例えば、共有シートでは、最も関連性の高い項目が中程度の区切りで表示され、サイズを変えずに見ることができます。
より多くの項目を表示するには、シートをスクロールまたは拡大します。
非モーダルシートは、メインのタスクを中断せずに利用できる補助的なアイテムを表示したい場合に使用します。
非モーダルシートでアイテムを選択すると、それに応じて親ビューが更新され、アイテムの効果がフィードバックされ、シートが画面に表示されている間はタスクを続行することができます。
例えば、Notes は非モーダルシートを使って、ノートを編集する際に選択したテキストに異なるフォーマットを適用できるようにしています。
非モーダルなシートを実現するには、中程度のディテントをサポートし、親ビューからディミングを取り除く必要があります。
(開発者向けのガイダンスは、largestUndimmedDetentIdentifierを参照してください)
https://gyazo.com/9672f30adc0becea9367c668b9aa897f
https://gyazo.com/4a5a81444cba5d210c757a28692e379b
一般的に、サイズ変更可能なシートにはグラバーを入れます。
グラバーは、シートをドラッグしてサイズを変更できることを示します。
また、グラバーをタップして、ディテントを循環させることもできます。
グラバーは、サイズ変更が可能であることを視覚的に示すだけでなく、VoiceOverと連携することで、画面を見ずにシートのサイズを変更することができます。
開発者向けのガイダンスとして、prefersGrabberVisibleを参照してください。
ポップオーバーの上にシートを表示しない。
ポップオーバーの中にシートを表示することはできますが、ポップオーバーの上には何も表示してはいけません。(アラートを除く)
ポップオーバー内でユーザーがアクションを起こした後にシートを表示する必要がある場合は、シートを表示する前にポップオーバーを閉じてください。
<-- Scroll Views
--> Split Views