補助ペインの正規レイアウトは、アプリのメイン コンテンツにユーザーの注意を向けさせるとともに、関連する補助コンテンツも表示します。たとえば、メインのコンテンツ ペインには最近の映画に関する情報が表示され、補助ペインには同様のテーマ、同じ監督や出演者を持つ他の映画のリストが表示されます。補助ペインの正規レイアウトの詳細については、マテリアル 3 の補助ペインのガイドラインをご覧ください。
補助ペインを実装する
SupportingPaneScaffold
は、最大 3 つのペイン(メインペイン、補助ペイン、オプションの追加ペイン)で構成されます。スキャフォールドは、3 つのペインにウィンドウ スペースを割り当てるためのすべての計算を処理します。大画面では、スキャフォールドはメインペインを横に補助ペインとともに表示します。小画面では、スキャフォールドはメインペインまたはサポートペインを全画面表示します。
依存関係を追加する
SupportingPaneScaffold
は、マテリアル 3 アダプティブ レイアウト ライブラリの一部です。
アプリまたはモジュールの build.gradle
ファイルに、次の 3 つの関連する依存関係を追加します。
Kotlin
implementation("androidx.compose.material3.adaptive:adaptive") implementation("androidx.compose.material3.adaptive:adaptive-layout") implementation("androidx.compose.material3.adaptive:adaptive-navigation")
Groovy
implementation 'androidx.compose.material3.adaptive:adaptive' implementation 'androidx.compose.material3.adaptive:adaptive-layout' implementation 'androidx.compose.material3.adaptive:adaptive-navigation'
- 適応型 - 下位の構成要素(
HingeInfo
、Posture
など) - adaptive-layout - アダプティブ レイアウト(
SupportingPaneScaffold
など) - adaptive-navigation - ペイン内やペイン間のナビゲーション用のコンポーザブル
ナビゲータとスキャフォールドを作成する
小さいウィンドウの場合、ペインは一度に 1 つしか表示されないため、ThreePaneScaffoldNavigator
を使用してペイン間を移動します。rememberSupportingPaneScaffoldNavigator
を使用して、ナビゲータのインスタンスを作成します。「戻る」ジェスチャーを処理するには、canNavigateBack()
をチェックして navigateBack()
を呼び出す BackHandler
を使用します。
val navigator = rememberSupportingPaneScaffoldNavigator() BackHandler(navigator.canNavigateBack()) { navigator.navigateBack() }
スキャフォールドには、画面の分割方法と使用する間隔を制御する PaneScaffoldDirective
と、ペインの現在の状態(拡大 / 非表示など)を提供する ThreePaneScaffoldValue
が必要です。デフォルトの動作では、ナビゲータの scaffoldDirective
と scaffoldValue
をそれぞれ使用します。
SupportingPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, mainPane = { /*...*/ }, supportingPane = { /*...*/ }, )
メインペインと補助ペインは、コンテンツを含むコンポーザブルです。ナビゲーション中にデフォルト ペイン アニメーションを適用するには、AnimatedPane
を使用します。スキャフォールド値を使用して、補助ペインが非表示かどうかを確認します。非表示の場合は、navigateTo(ThreePaneScaffoldRole.Secondary)
を呼び出すボタンを表示して、補助ペインを表示します。
スキャフォールドの完全な実装は次のとおりです。
val navigator = rememberSupportingPaneScaffoldNavigator() BackHandler(navigator.canNavigateBack()) { navigator.navigateBack() } SupportingPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, mainPane = { AnimatedPane(modifier = Modifier.safeContentPadding()) { // Main pane content if (navigator.scaffoldValue[SupportingPaneScaffoldRole.Supporting] == PaneAdaptedValue.Hidden) { Button( modifier = Modifier.wrapContentSize(), onClick = { navigator.navigateTo(SupportingPaneScaffoldRole.Supporting) } ) { Text("Show supporting pane") } } else { Text("Supporting pane is shown") } } }, supportingPane = { AnimatedPane(modifier = Modifier.safeContentPadding()) { // Supporting pane content Text("Supporting pane") } }, )
ペインのコンポーザブルを抽出する
SupportingPaneScaffold
の個々のペインを独自のコンポーザブルに抽出して、再利用とテストを可能にします。デフォルトのアニメーションが必要な場合は、ThreePaneScaffoldScope
を使用して AnimatedPane
にアクセスします。
@Composable fun ThreePaneScaffoldScope.MainPane( shouldShowSupportingPaneButton: Boolean, onNavigateToSupportingPane: () -> Unit, modifier: Modifier = Modifier, ) { AnimatedPane(modifier = modifier.safeContentPadding()) { // Main pane content if (shouldShowSupportingPaneButton) { Button(onClick = onNavigateToSupportingPane) { Text("Show supporting pane") } } else { Text("Supporting pane is shown") } } } @Composable fun ThreePaneScaffoldScope.SupportingPane( modifier: Modifier = Modifier, ) { AnimatedPane(modifier = modifier.safeContentPadding()) { // Supporting pane content Text("This is the supporting pane") } }
ペインをコンポーザブルに抽出すると、SupportingPaneScaffold
の使用が簡単になります(以下を前のセクションのスキャフォールドの完全な実装と比較してください)。
val navigator = rememberSupportingPaneScaffoldNavigator() BackHandler(navigator.canNavigateBack()) { navigator.navigateBack() } SupportingPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, mainPane = { MainPane( shouldShowSupportingPaneButton = navigator.scaffoldValue.secondary == PaneAdaptedValue.Hidden, onNavigateToSupportingPane = { navigator.navigateTo(ThreePaneScaffoldRole.Secondary) } ) }, supportingPane = { SupportingPane() }, )