지원 창 레이아웃 빌드

지원 창 표준 레이아웃은 앱의 기본 콘텐츠에 사용자의 관심을 집중시키면서 관련 지원 콘텐츠도 표시합니다. 예를 들어 기본 콘텐츠 창에는 최근 영화에 대한 정보가 표시되고 보조 창에는 유사한 주제 또는 동일한 감독 또는 주연 배우가 있는 다른 영화 목록이 표시될 수 있습니다. 지원 창 표준 레이아웃에 관한 자세한 내용은 Material 3 지원 창 가이드라인을 참고하세요.

지원 창 구현

SupportingPaneScaffold는 기본 창, 지원 창, 선택적 추가 창 등 최대 3개의 창으로 구성됩니다. 스캐폴드는 세 창에 창 공간을 할당하기 위한 모든 계산을 처리합니다. 대형 화면에서는 스캐폴드가 기본 창과 측면에 지원 창을 표시합니다. 작은 화면에서는 스캐폴드가 기본 창 또는 보조 창을 전체 화면으로 표시합니다.

종속 항목 추가

SupportingPaneScaffold는 Material 3 적응형 레이아웃 라이브러리의 일부입니다.

앱 또는 모듈의 build.gradle 파일에 다음 세 가지 관련 종속 항목을 추가합니다.

implementation("androidx.compose.material3.adaptive:adaptive")
implementation("androidx.compose.material3.adaptive:adaptive-layout")
implementation("androidx.compose.material3.adaptive:adaptive-navigation")

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: 창 내부 및 창 간에 탐색하는 컴포저블

탐색기 및 스캐폴드 만들기

작은 창에는 한 번에 창 하나만 표시되므로 창 간에 이동하려면 ThreePaneScaffoldNavigator를 사용합니다. rememberSupportingPaneScaffoldNavigator를 사용하여 탐색기 인스턴스를 만듭니다. 뒤로 동작을 처리하려면 canNavigateBack()를 확인하고 navigateBack()를 호출하는 BackHandler를 사용합니다.

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를 사용하여 탐색 중에 기본 창 애니메이션을 적용합니다. 스캐폴드 값을 사용하여 지원 창이 숨겨져 있는지 확인합니다. 숨겨져 있으면 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 사용이 간소화됩니다 (다음을 이전 섹션에서 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() },
)
SampleSupportingPaneScaffold.kt