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

補助ペインの標準レイアウトは、アプリのメイン コンテンツにユーザーの注意を向けさせると同時に、関連する補助コンテンツも表示します。たとえば、メイン コンテンツ ペインには最近の映画に関する情報が表示され、サポートペインには、同じテーマ、同じ監督、出演している他の映画のリストが表示されます。補助ペインの標準レイアウトの詳細については、マテリアル 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