このページは Cloud Translation API によって翻訳されました。

補助ペインレイアウトを作成する

補助ペインの正規レイアウトは、アプリのメインコンテンツにユーザーの注意を向けさせるとともに、関連する補助コンテンツも表示します。たとえば、メインのコンテンツペインには最近の映画に関する情報が表示され、補助ペインには同様のテーマ、同じ監督や出演者を持つ他の映画のリストが表示されます。補助ペインの正規レイアウトの詳細については、マテリアル 3 の補助ペインのガイドラインをご覧ください。

補助ペインを実装する

SupportingPaneScaffold は、最大 3 つのペイン（メインペイン、補助ペイン、オプションの追加ペイン）で構成されます。スキャフォールドは、3 つのペインにウィンドウスペースを割り当てるためのすべての計算を処理します。大画面では、スキャフォールドはメインペインを横に補助ペインとともに表示します。小画面では、スキャフォールドはメインペインまたはサポートペインを全画面表示します。

ディスプレイの大部分を占めるメインコンテンツと補足コンテンツ。 — **図 1.** 補助ペインのレイアウト。

依存関係を追加する

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

スキャフォールドには、画面の分割方法と使用する間隔を制御する PaneScaffoldDirective と、ペインの現在の状態（拡大 / 非表示など）を提供する ThreePaneScaffoldValue が必要です。デフォルトの動作では、ナビゲータの scaffoldDirective と scaffoldValue をそれぞれ使用します。

SupportingPaneScaffold(
    directive = navigator.scaffoldDirective,
    value = navigator.scaffoldValue,
    mainPane = { /*...*/ },
    supportingPane = { /*...*/ },
)SampleSupportingPaneScaffold.kt

メインペインと補助ペインは、コンテンツを含むコンポーザブルです。ナビゲーション中にデフォルトペインアニメーションを適用するには、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")
        }
    },
)SampleSupportingPaneScaffold.kt

ペインのコンポーザブルを抽出する

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

ペインをコンポーザブルに抽出すると、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() },
)SampleSupportingPaneScaffold.kt

「リストと詳細」レイアウトを作成する

アライメントライン