Google は AI 技術を使用して、コンテンツをご希望の言語に翻訳しています。AI 翻訳には誤りが含まれる場合があります。

正規レイアウト

正規化レイアウトは、さまざまなフォームファクタで最適なユーザーエクスペリエンスを提供し、さまざまな用途に使用できる実証済みのレイアウトです。

正規化レイアウトが表示されている大画面デバイスの描写。

正規レイアウトは、小画面のスマートフォンのほか、タブレット、折りたたみ式デバイス、ChromeOS デバイスにも対応しています。マテリアルデザインのガイダンスに基づいたレイアウトは、見た目の美しさと機能性を兼ね備えています。

Android フレームワークには特化したコンポーネントが含まれていて、簡単かつ確実にレイアウトを実装できます。

正規化レイアウトを利用することで、生産性を高める魅力的な UI を作成し、優れたアプリの基盤を構築できます。

リスト詳細

リスト / 詳細レイアウトのワイヤフレーム

リストと詳細レイアウトでは、記述や説明などの補足情報（アイテムの詳細情報）があるアイテムのリストをユーザーに表示します。

このレイアウトでは、アプリウィンドウが 2 つの横並びのペイン（リスト用と詳細用）に分割されます。ユーザーがリストからアイテムを選択するとそのアイテムの詳細が表示されます。詳細のディープリンクをクリックすると、詳細ペインに追加のコンテンツが表示されます。

拡大幅ディスプレイ（ウィンドウサイズクラスを使用するを参照）では、リストと詳細を同時に表示できます。リストのアイテムを選択すると詳細ペインが更新され、選択したアイテムに関連するコンテンツが表示されます。

中程度幅ディスプレイとコンパクト幅ディスプレイでは、ユーザーによるアプリの操作に応じてリストまたは詳細のどちらかが表示されます。リストのみが表示されている場合にリストのアイテムを選択すると、リストに代わって詳細が表示されます。詳細だけが表示されているときに [戻る] ボタンを押すと、リストが再表示されます。

デバイスの向きやアプリのウィンドウサイズなどの設定を変更すると、ディスプレイのウィンドウサイズクラスが変更されます。リスト / 詳細レイアウトは、設定内容に応じてアプリの状態を維持しながら変更に対応します。

リストペインと詳細ペインの両方を表示している拡大幅ディスプレイが中程度幅またはコンパクト幅に狭められた場合、詳細ペインはそのままで、リストペインが非表示になります。
中程度幅またはコンパクト幅のディスプレイに詳細ペインのみが表示されている場合に、ウィンドウサイズクラスが拡大幅に広げられると、リストと詳細が一緒に表示され、リストペインは、詳細ペイン内のコンテンツに対応するアイテムが選択された状態になります。
中程度幅またはコンパクト幅のディスプレイでリストペインだけが表示されている状態から拡大幅に広げられた場合は、リストペインとプレースホルダの詳細ペインが同時に表示されます。

リストと詳細レイアウトは、メッセージアプリ、連絡先管理ツール、インタラクティブなメディアブラウザのほか、詳細情報を表示するアイテムのリストとしてコンテンツを整理できるアプリに最適です。

図 1. メッセージのリストと選択したメッセージの詳細を表示するメッセージアプリ

実装

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
        }
    )
}CanonicalLayoutSamples.kt

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

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

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

リストと詳細レイアウトを作成するデベロッパーガイド
リストと詳細-作成サンプル

フィード

フィードレイアウトのワイヤフレーム

フィードレイアウトは、同等のコンテンツ要素を設定可能なグリッドに配置して、大量のコンテンツをすばやく簡単に確認できるようにするレイアウトです。

サイズと位置によって、コンテンツ要素間の関係が決まります。

コンテンツグループは、複数の要素を同じサイズにして一緒に配置したものです。近くの他の要素より大きくすることで、ユーザーの関心を引けます。

カードとリストは、フィードレイアウトの一般的なコンポーネントです。

グリッドは、スクロール可能な単一の列から複数列のフィードまで適応可能なため、フィードレイアウトは、ほぼすべてのサイズのディスプレイに対応できます。

フィードは、特にニュースアプリやソーシャルメディアアプリに適しています。

図 2.さまざまなサイズのカードに投稿を表示するソーシャルメディアアプリ

実装

Feed 包含大量内容元素，这些内容元素位于一个纵向滚动容器中，而该容器采用网格布局。延迟列表可高效地在列或行中呈现大量的项。延迟网格以网格形式呈现项，支持配置项的大小和 span。

根据可用的显示区域配置网格布局的列，以设置网格项允许的最小宽度。定义网格项时，只需调整列 span 即可让某些项比其他项更为醒目。

对于部分标题、分隔线或要占据 Feed 的整个宽度的其他项，请使用 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)
        }
    }
}CanonicalLayoutSamples.kt

自适应 Feed 的关键在于 columns 配置。 GridCells.Adaptive(minSize = 180.dp) 创建一个网格，其中每列至少为 180.dp 宽。然后，网格会显示尽可能多的列，以适应可用空间。

如需查看示例实现，请参阅使用 Compose 构建 Feed 示例。

補助ペイン

補助ペインレイアウトのワイヤフレーム

補助ペインレイアウトは、アプリのコンテンツをプライマリ表示領域とセカンダリ表示領域に分けて編成するためのものです。

プライマリ表示領域はアプリウィンドウの大部分（通常は約 3 分の 2）を占め、メインコンテンツを表示します。セカンダリ表示領域は、アプリウィンドウの残りの部分を構成するペインで、メインのコンテンツをサポートするコンテンツを表示します。

補助ペインレイアウトは、横向きの拡大幅ディスプレイ（ウィンドウサイズクラスを使用するを参照）に適しています。中程度幅またはコンパクト幅のディスプレイで表示領域をプライマリとセカンダリに分けられるのは、コンテンツの表示領域が小さくなってもかまわない場合か、最初は追加のコンテンツをボトムシートまたはサイドシートに隠し、メニューまたはボタンで表示を制御できる場合です。

補助ペインレイアウトとリスト / 詳細レイアウトの違いは、プライマリコンテンツとセカンダリコンテンツの関係です。リスト / 詳細レイアウトのセカンダリペインのコンテンツは、プライマリコンテンツと関連していますが、たとえば、補助ペインにツールウィンドウを表示した場合のように、補助ペイン自体はプライマリコンテンツとは関係ありません。ただし、リスト / 詳細レイアウトの詳細ペインの補足コンテンツ（例: 商品リスティングの商品説明）は、プライマリコンテンツがなくても意味を持ちます。

補助ペインのユースケースには、次のようなものがあります。

生産性向上アプリ: 補助ペインにレビューアのコメントが添付されたドキュメントまたはスプレッドシート
メディアアプリ: 補助ペインにストリーミング動画と関連動画のリストが表示されている場合や、プレイリストが付いている音楽アルバムの説明
ツールと設定: 補助ペインにパレット、効果、その他の設定が表示されるメディア編集ツール

図 3. 補助ペインに商品の説明が表示されているショッピングアプリ。

実装

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
        }
    )
}CanonicalLayoutSamples.kt

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

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