正規レイアウト

规范化布局是经过验证的通用型布局，可在各种规格的设备上提供最佳用户体验。

描绘了显示规范化布局的各种大屏设备。

规范化布局既支持小屏幕的手机，也支持平板电脑、可折叠设备和 ChromeOS 设备。此类布局遵循 Material Design 指南，不仅十分美观 ，而且功能强大。

Android 框架包含专门的组件，让您可以使用 View 和 Jetpack Compose 方便而可靠地实现此类布局。

借助规范化布局，您可以构建出引人注目且能提高效率的界面，为打造优秀的应用奠定基础。

列表详情

列表-详情布局的线框图。

借助列表详情布局，用户可以浏览包含描述性、解释性或其他补充信息（即“项详情”）的项列表。

该布局可将应用窗口分为两个并排显示的窗格：一个用于显示列表，另一个用于显示详情。用户从列表中选择要查看的项，即可显示对应的项详情。详情中的深层链接可以在详情窗格中显示更多内容。

较大宽度的显示屏（请参阅使用窗口大小类别）可同时容纳 列表和详情。选择列表项后，详情窗格会更新，以显示所选项的相关内容。

中等宽度和紧凑宽度的显示屏可以显示列表或详情，具体取决于用户与应用的互动。如果只显示列表，当用户选择某个列表项时，对应的详情便会取代列表进行显示。如果只显示详情，当用户按返回按钮时，系统会重新显示列表。

配置更改（例如设备屏幕方向更改或应用窗口大小更改）可能会更改显示屏的窗口大小类别。列表详情布局会相应地做出响应，同时保留应用状态：

  • 如果展开宽度的显示屏同时显示列表窗格和详情窗格，然后收窄为中等宽度或紧凑宽度，则详情窗格仍会显示，而列表窗格会变为隐藏状态
  • 如果中等宽度或紧凑宽度的显示屏先只显示“详细信息”窗格，然后窗口大小类别展开为较大宽度，则列表和详情会一起显示，并且列表会指明与“详细信息”窗格中的内容对应的项已被选中
  • 如果中等宽度或较小宽度的屏幕先只显示列表窗格，然后展开为较大宽度，则列表和占位符详情窗格会一起显示

列表详情布局非常适合即时通讯应用、通讯录管理器、互动 媒体浏览器或内容可整理为 项列表（用于显示额外信息）的任何应用。

图 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
        }
    )
}

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

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

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

信息流

Feed 布局的线框图。

Feed 布局能够以可配置网格的形式排列等效的内容元素，以便用户快速、方便地查看大量内容。

内容元素之间的关系由大小和位置确定。

如要创建内容组，可以将相关元素设置为相同的大小，并将这些元素放置到一起。如要吸引用户注意某个元素，可以将其设置为比附近的元素大。

卡片和列表是 Feed 布局的常见组件。

Feed 布局支持几乎任何尺寸的显示屏，因为网格可从滚动的单列调整为滚动的多列内容 Feed。

Feed 尤其适用于 新闻和社交媒体应用。

图 2. 以各种大小的卡片显示帖子的社交媒体应用。

实现

フィードでは、多数のコンテンツ要素を縦方向にスクロールするコンテナに含め、グリッドに配置します。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 を利用したフィードのサンプルをご覧ください。

辅助窗格

辅助窗格布局的线框图。

辅助窗格布局会按主要显示区域和辅助显示区域来整理应用内容。

主要显示区域占据应用窗口的大部分区域（通常占据三分之二左右），并且包含主要内容。辅助显示区域是一个窗格，它占据应用窗口的其余区域，并会展示主要内容的辅助性内容。

辅助窗格布局在采用横屏模式的较大宽度显示屏（请参阅使用窗口大小类别）上效果出众。在以下情况下，中等宽度或紧凑宽度的显示屏支持同时显示主要显示区域和辅助显示区域：内容可适应狭窄的显示空间，或者附加内容最初可隐藏在底部或侧边动作条（可通过菜单或按钮等控件访问）中。

主要内容和辅助内容之间的关系是辅助窗格布局与列表详情布局的区别所在。辅助窗格内容只在与主要内容相关时才有用；例如，如果单独使用，辅助窗格工具窗口则没有意义。但是，即使没有主要内容，列表详情布局的详情窗格中的补充内容仍然有意义；例如，商品详情中的商品说明。

辅助窗格的用例包括：

图 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
        }
    )
}
 この例の主なコンポーネントは次のとおりです。

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

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

其他资源

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