지원 창 표준 레이아웃은 관련 지원 콘텐츠를 표시하는 동시에 앱의 기본 콘텐츠에 사용자의 관심을 집중시킵니다. 예를 들어 기본 콘텐츠 창에는 최신 영화에 관한 정보가 표시되고 지원 창에는 비슷한 테마의 다른 영화 목록이나 동일한 감독 또는 주연의 배우가 표시될 수 있습니다. 지원 창 표준 레이아웃에 관한 자세한 내용은 Material 3 지원 창 가이드라인을 참고하세요.
지원 창 구현
SupportingPaneScaffold
는 기본 창, 지원 창, 선택적 추가 창 등 최대 3개의 창으로 구성됩니다. Scaffold는 창 3개에 창 공간을 할당하는 모든 계산을 처리합니다. 대형 화면에서는 Scaffold가 측면에 지원 창이 있는 기본 창을 표시합니다. 작은 화면에서는 Scaffold가 기본 창 또는 지원 창을 전체 화면으로 표시합니다.
종속 항목 추가
SupportingPaneScaffold
는 Material 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 — 창 내부와 창 간에 이동하기 위한 컴포저블
탐색기 및 Scaffold 만들기
작은 창에서는 한 번에 하나의 창만 표시되므로 ThreePaneScaffoldNavigator
를 사용하여 창 간에 이동하거나 창 간에 이동합니다. rememberSupportingPaneScaffoldNavigator
를 사용하여 탐색기의 인스턴스를 만듭니다.
뒤로 동작을 처리하려면 canNavigateBack()
를 확인하고 navigateBack()
을 호출하는 BackHandler
를 사용합니다.
val navigator = rememberSupportingPaneScaffoldNavigator() BackHandler(navigator.canNavigateBack()) { navigator.navigateBack() }
Scaffold에는 화면을 분할하는 방법과 사용할 간격을 제어하는 PaneScaffoldDirective
와 창의 현재 상태 (예: 확장 또는 숨김 여부)를 제공하는 ThreePaneScaffoldValue
가 필요합니다. 기본 동작에는 각각 탐색기의 scaffoldDirective
및 scaffoldValue
를 사용합니다.
SupportingPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, mainPane = { /*...*/ }, supportingPane = { /*...*/ }, )
기본 창과 지원 창은 콘텐츠를 포함하는 컴포저블입니다. AnimatedPane
을 사용하여 탐색 중에 기본 창 애니메이션을 적용합니다. Scaffold 값을 사용하여 지원 창이 숨겨져 있는지 확인합니다. 숨겨져 있으면 navigateTo(ThreePaneScaffoldRole.Secondary)
를 호출하여 지원 창을 표시하는 버튼을 표시합니다.
다음은 Scaffold를 완전히 구현한 것입니다.
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
사용이 간소화됩니다 (다음 내용을 이전 섹션의 Scaffold 전체 구현과 비교).
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() }, )