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

「補助ペイン」の正規レイアウトでは、アプリのメインの画面にユーザーの注意が向く 関連する補足コンテンツも表示できますたとえば、メインの コンテンツ ペインに最近の映画に関する情報が ペインには、テーマが似ている他の映画のリストが 出演しています補助ペインについて詳しくは、 正規レイアウトについて詳しくは、 マテリアル 3 の補助ペインのガイドライン

補助ペインを実装する

SupportingPaneScaffold は最大 3 つまで メインペイン、補助ペイン、オプションの追加ペインがあります。スキャフォールド は、ウィンドウ スペースを 3 つのペインに割り当てるすべての計算を処理します。オン 大画面の場合、スキャフォールドにはメインペインが表示され、補助ペインが 使用できます。小さな画面では、スキャフォールドにメインまたはサポート 表示されます。

メイン コンテンツがディスプレイの大部分を占め、その隣に補足コンテンツが表示されます。
図 1. 補助ペインのレイアウト。

依存関係を追加する

SupportingPaneScaffold は次の地域に属しています: マテリアル 3 のアダプティブ レイアウト ライブラリ

次の 3 つの関連する依存関係を、アプリケーションの build.gradle ファイルに追加します。 アプリまたはモジュール:

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'

  • adaptive - 次のような下位レベルの構成要素 HingeInfoPosture
  • adaptive-layout - アダプティブ レイアウト。例: SupportingPaneScaffold
  • adaptive-navigation - 内部と外部を移動するためのコンポーザブル ペイン間

ナビゲータとスキャフォールドを作成する

小さいウィンドウでは一度に 1 つのペインしか表示されないため、 移動: ThreePaneScaffoldNavigator 表示されます。ナビゲータのインスタンスを rememberSupportingPaneScaffoldNavigator。 「戻る」ジェスチャーを処理するには、BackHandler を使用して、 canNavigateBack() と通話 navigateBack():

val navigator = rememberSupportingPaneScaffoldNavigator()

BackHandler(navigator.canNavigateBack()) {
    navigator.navigateBack()
}

スキャフォールドには PaneScaffoldDirective が必要です。 画面の分割方法と使用間隔を制御します。 ThreePaneScaffoldValue: 現在の ペインの状態(展開 / 非表示など)をコントロールできます。デフォルトの ナビゲータの scaffoldDirectivescaffoldValue:

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

メインペインと補助ペインは、コンテンツを含むコンポーザブルです。使用 AnimatedPane: 再生中にデフォルトのペイン アニメーションを適用する ナビゲーションです。scaffold 値を使用して、補助ペインが 非表示呼び出すボタンを表示します。 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 の個々のペインを個別のペインに抽出する 再利用やテストが可能なものにします。使用 次の場合は、ThreePaneScaffoldScopeAnimatedPane にアクセスします デフォルトのアニメーションを使用します。

@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() },
)