Split Views

https://developer.apple.com/design/human-interface-guidelines/ios/views/split-views/

Split Views

スプリットビュー

A split view manages the presentation of two side-by-side panes of content, with persistent content in the primary pane and related information in the secondary pane. Each pane can contain any variety of elements, including navigation bars, toolbars, tab bars, tables, collections, images, maps, and custom views. Split views are often used with filterable content; a list of filter categories appears in the primary pane, and the filtered results for the selected category are shown in the secondary pane. If your app requires it, the primary pane can overlay the secondary pane and can be hidden offscreen when not in use. This is particularly useful when the device is in portrait orientation, as it allows more room for viewing content in the secondary pane.

分割ビューは、2つのサイドバイサイドコンテンツペインの表示を管理します。プライマリペインには永続的なコンテンツがあり、セカンダリペインには関連情報が表示されます。 各ペインには、ナビゲーションバー、ツールバー、タブバー、表、コレクション、イメージ、マップ、カスタムビューなど、さまざまな要素を含めることができます。 分割ビューは、フィルタリング可能なコンテンツでよく使用されます。 フィルタカテゴリのリストがプライマリペインに表示され、選択したカテゴリのフィルタ結果がセカンダリペインに表示されます。 あなたのアプリがそれを必要とするならば、第一のペインは第二のペインにオーバーレイすることができ、使用されていないときはオフスクリーンで隠すことができます。 これは、デバイスが縦向きである場合に特に便利です。これは、セカンダリペインでコンテンツを表示するためのスペースが増えるためです。

Choose a split-view layout that works well with your content. By default, a split view devotes a third of the screen to the primary pane and two-thirds to the secondary pane. The screen can also be split into halves. Choose an appropriate split based on your content, and make sure the panes don’t look unbalanced. Avoid creating a secondary pane that’s narrower than the primary pane.

コンテンツに適した分割ビューレイアウトを選択します。 デフォルトでは、スプリットビューは画面の3分の1をプライマリペインに、3分の2をセカンダリペインに割り当てます。 画面を半分に分割することもできます。 コンテンツに基づいて適切な分割を選択し、ペインがアンバランスに見えないようにします。 プライマリペインよりも狭いセカンダリペインを作成しないでください。

Persistently highlight the active selection in the primary pane. Although the secondary pane’s content can change, it should always correspond to a clearly identifiable selection in the primary pane. This helps people understand the relationship between the panes.

メインペインでアクティブな選択肢を持続的に強調表示します。 セカンダリペインの内容は変更可能ですが、プライマリペインの明確な識別可能な選択に常に対応する必要があります。 これは、人々がペイン間の関係を理解するのに役立ちます。

In general, restrict navigation to one side of a split view. Placing navigation in both panes of a split view makes it hard for people to stay oriented and discern the relationship between the two panes.

一般的には、分割ビューの片側へのナビゲーションを制限します。 スプリットビューの両方のペインにナビゲーションを配置すると、人々が方向を変えずに2つのペインの関係を識別することが難しくなります。

Provide multiple ways to access a hidden primary pane. On layouts where the primary pane may be offscreen, be sure to provide a button—typically in a navigation bar—to reveal the pane. Unless your app uses the swipe gesture to perform other functions, let people swipe from the side of the screen to access the primary pane too.

非表示のプライマリペインにアクセスする複数の方法を提供します。 メインペインがオフスクリーンになるレイアウトでは、ペインを表示するために、通常はナビゲーションバーにボタンを用意してください。 アプリがスワイプジェスチャーを使用して他の機能を実行している場合を除き、画面の横からスワイプしてメインペインにアクセスできるようにします。

For developer guidance, see UISplitViewController.