「補助ペイン」の正規レイアウトでは、アプリのメインの画面にユーザーの注意が向く 関連する補足コンテンツも表示できますたとえば、メインの コンテンツ ペインに最近の映画に関する情報が ペインには、テーマが似ている他の映画のリストが 出演しています補助ペインについて詳しくは、 正規レイアウトについて詳しくは、 マテリアル 3 の補助ペインのガイドライン
補助ペインを実装する
SupportingPaneScaffold
は最大 3 つまで
メインペイン、補助ペイン、オプションの追加ペインがあります。スキャフォールド
は、ウィンドウ スペースを 3 つのペインに割り当てるすべての計算を処理します。オン
大画面の場合、スキャフォールドにはメインペインが表示され、補助ペインが
使用できます。小さな画面では、スキャフォールドにメインまたはサポート
表示されます。
![メイン コンテンツがディスプレイの大部分を占め、その隣に補足コンテンツが表示されます。](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/adaptive/supporting-pane.png?authuser=6&hl=ja)
依存関係を追加する
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 - 次のような下位レベルの構成要素
HingeInfo
、Posture
- adaptive-layout - アダプティブ レイアウト。例:
SupportingPaneScaffold
- adaptive-navigation - 内部と外部を移動するためのコンポーザブル ペイン間
ナビゲータとスキャフォールドを作成する
小さいウィンドウでは一度に 1 つのペインしか表示されないため、
移動: ThreePaneScaffoldNavigator
表示されます。ナビゲータのインスタンスを
rememberSupportingPaneScaffoldNavigator
。
「戻る」ジェスチャーを処理するには、BackHandler
を使用して、
canNavigateBack()
と通話
navigateBack()
:
val navigator = rememberSupportingPaneScaffoldNavigator() BackHandler(navigator.canNavigateBack()) { navigator.navigateBack() }
スキャフォールドには PaneScaffoldDirective
が必要です。
画面の分割方法と使用間隔を制御します。
ThreePaneScaffoldValue
: 現在の
ペインの状態(展開 / 非表示など)をコントロールできます。デフォルトの
ナビゲータの scaffoldDirective
と
scaffoldValue
:
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
の個々のペインを個別のペインに抽出する
再利用やテストが可能なものにします。使用
次の場合は、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() }, )