지원 창 표준 레이아웃이 앱의 주요 기능에 사용자의 관심을 집중시킴 관련 지원 콘텐츠를 표시합니다. 예를 들어, 콘텐츠 창에 최신 영화에 대한 정보가 표시될 수 있고 창에 테마가 비슷하거나 동일한 다른 영화의 목록이 표시됩니다. 주연을 맡을 수도 있습니다. 지원 창에 대한 자세한 내용은 자세한 내용은 Material 3 지원 창 가이드라인
지원 창 구현
SupportingPaneScaffold
는 최대 세 개의
창: 기본 창, 지원 창, 선택적 추가 창 발판
는 창 공간을 세 개의 창에 할당하기 위한 모든 계산을 처리합니다. 사용 설정됨
Scaffold는 기본 창을 표시하고 지원 창이
있습니다. 작은 화면에서는 Scaffold가 기본 또는 지원
창이 전체 화면으로 표시됩니다.
![기본 콘텐츠가 지원 콘텐츠와 함께 디스플레이의 대부분을 차지합니다.](https://android-dot-devsite-v2-prod.appspot.com/static/develop/ui/compose/images/layouts/adaptive/supporting-pane.png?hl=ko)
종속 항목 추가
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'
- 적응형 — 하위 수준 빌딩 블록, 즉
HingeInfo
및Posture
- adaptive-layout — 다음과 같은 적응형 레이아웃입니다.
<ph type="x-smartling-placeholder">
SupportingPaneScaffold
</ph> - adaptive-navigation: 및 창 사이
탐색기 및 Scaffold 만들기
작은 창에서는 한 번에 하나의 창만 표시되므로
이동 수단: ThreePaneScaffoldNavigator
페인(pane) 다음과 같이 탐색기의 인스턴스를 만듭니다.
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)
:
확인할 수 있습니다
다음은 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
의 개별 창을 자체 창으로 추출
컴포저블을 사용하여 재사용 및 테스트가 가능하도록 만들었습니다. 사용
다음 경우에 AnimatedPane
액세스: ThreePaneScaffoldScope
기본 애니메이션을 원하는 경우:
@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() }, )