正規レイアウト

Canonical layouts are proven, versatile layouts that provide an optimal user experience on a variety of form factors.

Depiction of large screen devices showing the canonical layouts.

The canonical layouts support small screen phones as well as tablets, foldables, and ChromeOS devices. Derived from Material Design guidance, the layouts are aesthetic as well as functional.

The Android framework includes specialized components that make implementation of the layouts straightforward and reliable.

The canonical layouts create engaging, productivity‑enhancing UIs that form the foundation of great apps.

List-detail

Wireframe of list-detail layout.

The list-detail layout enables users to explore lists of items that have descriptive, explanatory, or other supplementary information—the item detail.

The layout divides the app window into two side-by-side panes: one for the list, one for the detail. Users select items from the list to display the item detail. Deep links in the detail reveal additional content in the detail pane.

Expanded-width displays (see Use window size classes) accommodate both the list and detail at the same time. Selection of a list item updates the detail pane to show the related content for the selected item.

Medium- and compact-width displays show either the list or the detail, depending on user interaction with the app. When just the list is visible, selection of a list item displays the detail in place of the list. When just the detail is visible, pressing the back button redisplays the list.

Configuration changes such as device orientation changes or app window size changes can change the display's window size class. A list‑detail layout responds accordingly, preserving app state:

  • If an expanded-width display showing both the list and detail panes narrows to medium or compact, the detail pane remains visible and the list pane is hidden
  • If a medium- or compact-width display has just the detail pane visible and the window size class widens to expanded, the list and detail are shown together, and the list indicates that the item corresponding to the content in the detail pane is selected
  • If a medium- or compact-width display has just the list pane visible and widens to expanded, the list and a placeholder detail pane are shown together

List-detail is ideal for messaging apps, contact managers, interactive media browsers or any app where the content can be organized as a list of items that reveal additional information.

Figure 1. Messaging app showing a list of conversations and the details of a selected conversation.

Implementation

Compose の宣言型パラダイムはウィンドウ サイズクラスのロジックをサポートしていて、リストペインと詳細ペインを同時に表示するか（ウィンドウ サイズクラスが拡大幅の場合）、リストペインまたは詳細ペインのどちらかのみを表示するか（ウィンドウ サイズクラスが中程度幅またはコンパクト幅の場合）を判断します。

データフローを単方向にするために、現在の ウィンドウサイズクラスと、選択したリストアイテム（存在する場合）の詳細を含む、すべての状態をホイスティングします。そうすることで、すべての コンポーザブルがデータにアクセスし、正しくレンダリングできるようになります。

小さいウィンドウに詳細ペインのみを表示している場合は、BackHandler を追加して詳細ペインを削除し、リストペインのみを表示します。BackHandler は、ウィンドウ サイズクラスと選択された詳細の状態に依存するハンドラのため、アプリ全体のナビゲーションには関与しません。

ListDetailPaneScaffold は、リストと詳細レイアウトの実装を簡素化する高レベルのコンポーザブルです。ウィンドウ サイズクラスに基づいてペインのロジックを自動的に処理し、ペイン間のナビゲーションをサポートします。

ListDetailPaneScaffold を使用した最小限の実装を次に示します。

@OptIn(ExperimentalMaterial3AdaptiveApi::class)
@Composable
fun MyListDetailPaneScaffold() {
    val navigator = rememberListDetailPaneScaffoldNavigator()
    ListDetailPaneScaffold(
        directive = navigator.scaffoldDirective,
        value = navigator.scaffoldValue,
        listPane = {
            // Listing Pane
        },
        detailPane = {
            // Details Pane
        }
    )
}

この例の主要コンポーネントは次のとおりです。

  • rememberListDetailPaneScaffoldNavigator: リストペインと詳細ペイン間のナビゲーションを管理するナビゲータを作成します。
  • listPane: アイテムのリストを表示します。
  • detailPane: 選択したアイテムのコンテンツを表示します。

実装例の詳細については、以下をご覧ください。

Feed

Wireframe of feed layout.

A feed layout arranges equivalent content elements in a configurable grid for quick, convenient viewing of a large amount of content.

Size and position establish relationships among the content elements.

Content groups are created by making elements the same size and positioning them together. Attention is drawn to elements by making them larger than nearby elements.

Cards and lists are common components of feed layouts.

A feed layout supports displays of almost any size because the grid can adapt from a single, scrolling column to a multi‑column scrolling feed of content.

Feeds are especially well suited for news and social media apps.

Figure 2. Social media app showing posts in cards of varying sizes.

Implementation

フィードでは、多数のコンテンツ要素を縦方向にスクロールするコンテナに含め、グリッドに配置します。Lazy リストでは、多数のアイテムを列または行内に効率的にレンダリングできます。Lazy グリッドでは、アイテムをグリッドにレンダリングすることで、アイテムのサイズとスパンを設定しやすくなります。

利用可能な表示領域に基づいてグリッド レイアウトの列を設定し、グリッド アイテムの最小許容幅を決めます。グリッド アイテムを定義する際は、列のスパンを調整して、一部のアイテムを他のアイテムより強調することができます。

セクション ヘッダー、分割線など、フィードの幅いっぱいに表示されるようデザインしたアイテムの場合は、maxLineSpan を使用してレイアウトの幅全体を設定します。

コンパクト幅のディスプレイで複数の列を表示できるだけのスペースがない場合、LazyVerticalGrid は LazyColumn と同じ動作になります。

LazyVerticalGrid を使用した最小限の実装を次に示します。

@Composable
fun MyFeed(names: List<String>) {
    LazyVerticalGrid(
        // GridCells.Adaptive automatically adapts column count based on available width
        columns = GridCells.Adaptive(minSize = 180.dp),
    ) {
        items(names) { name ->
            Text(name)
        }
    }
}

アダプティブ フィードの鍵は columns 構成です。GridCells.Adaptive(minSize = 180.dp) は、各列の幅が 180.dp 以上のグリッドを作成します。グリッドには、利用可能なスペースに収まるだけの列が表示されます。

実装例については、Compose を利用したフィードのサンプルをご覧ください。

Supporting pane

Wireframe of supporting pane layout.

Supporting pane layout organizes app content into primary and secondary display areas.

The primary display area occupies the majority of the app window (typically about two thirds) and contains the main content. The secondary display area is a pane that takes up the remainder of the app window and presents content that supports the main content.

Supporting pane layouts work well on expanded-width displays (see Use window size classes) in landscape orientation. Medium- or compact‑width displays support showing both the primary and secondary display areas if the content is adaptable to narrower display spaces, or if the additional content can be initially hidden in a bottom or side sheet accessible by means of a control such as a menu or button.

A supporting pane layout differs from a list‑detail layout in the relationship of the primary and secondary content. Secondary pane content is meaningful only in relation to the primary content; for example, a supporting pane tool window is irrelevant by itself. The supplementary content in the detail pane of a list‑detail layout, however, is meaningful even without the primary content, for example, the description of a product from a product listing.

Use cases for supporting pane include:

Figure 3. Shopping app with product descriptions in a supporting pane.

Implementation

Compose はウィンドウ サイズクラスのロジックをサポートしているため、メイン コンテンツと補助コンテンツの両方を同時に表示するか、補助コンテンツを別の場所に配置するかを決められます。

また、現在のウィンドウ サイズクラスや、メイン コンテンツと補助コンテンツのデータに関連する情報を含む、すべての状態をホイスティングできます。

コンパクト幅ディスプレイの場合は、補助コンテンツをメイン コンテンツの下またはボトムシート内に配置します。中程度幅と拡大幅の場合は、メインコンテンツの横に補助コンテンツを配置し、表示できるスペースとコンテンツに応じて適切なサイズを設定します。中程度幅の場合は、表示領域はメインコンテンツと補助コンテンツで均等に分割されます。拡張後の幅の場合は、表示領域の 70% がメイン コンテンツに、30% が補助コンテンツに割り当てられます。

SupportingPaneScaffold は、補助ペインのレイアウトの実装を簡素化する高レベルのコンポーザブルです。このコンポーザブルは、ウィンドウ サイズクラスに基づいてペインのロジックを自動的に処理し、大画面ではペインを並べて表示し、小画面では補助ペインを非表示にします。SupportingPaneScaffold は、ペイン間のナビゲーションもサポートしています。

最小限の実装は次のとおりです。

@OptIn(ExperimentalMaterial3AdaptiveApi::class)
@Composable
fun MySupportingPaneScaffold() {
    // Creates and remembers a navigator to control pane visibility and navigation
    val navigator = rememberSupportingPaneScaffoldNavigator()
    SupportingPaneScaffold(
        // Directive and value help control pane visibility based on screen size and state
        directive = navigator.scaffoldDirective,
        value = navigator.scaffoldValue,
        mainPane = {
            // Main Pane for the primary content
        },
        supportingPane = {
            //Supporting Pane for supplementary content
        }
    )
}
 この例の主なコンポーネントは次のとおりです。

  • rememberSupportingPaneScaffoldNavigator: ペインの表示 / 非表示を管理するナビゲータを作成するコンポーザブル（コンパクト画面で補助ペインを非表示にするなど）
  • mainPane: メイン コンテンツを表示するコンポーザブル
  • supportingPane: 補助コンテンツを表示するコンポーザブル

実装例の詳細については、以下をご覧ください。

Additional resources

前へ
アダプティブ レイアウトの情報をクエリする
次へ
「リストと詳細」レイアウトを作成する