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

「補助ペイン」の正規レイアウトでは、アプリのメインの画面にユーザーの注意が向く 関連する補足コンテンツも表示できますたとえば、メイン コンテンツ ペインには最近の映画に関する情報が、サブペインには、類似したテーマ、同じ監督、主演俳優の映画のリストが表示されます。補助ペインについて詳しくは、 正規レイアウトについて詳しくは、 マテリアル 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'
  • 適応型 - HingeInfo や Posture などの低レベルのビルディング ブロック
  • adaptive-layout - アダプティブ レイアウト。例: SupportingPaneScaffold
  • adaptive-navigation - 内部と外部を移動するためのコンポーザブル ペイン間

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

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

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: 再生中にデフォルトのペイン アニメーションを適用する ナビゲーションです。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")
        }
    },
)
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

前へ
「リストと詳細」レイアウトを作成する
次へ
アライメント ライン