지원 창 레이아웃 빌드

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

지원 창 구현

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

종속 항목 추가

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'

• Adaptive - 하위 수준 구성 요소(예: HingeInfo, Posture)
• Adaptive-layout - 적응형 레이아웃(예: SupportingPaneScaffold)
• adaptive-navigation — 창 내부와 창 간에 이동하기 위한 컴포저블

탐색기 및 Scaffold 만들기

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

val navigator = rememberSupportingPaneScaffoldNavigator()

BackHandler(navigator.canNavigateBack()) {
    navigator.navigateBack()
}
SampleSupportingPaneScaffold.kt

Scaffold에는 화면을 분할하는 방법과 사용할 간격을 제어하는 PaneScaffoldDirective와 창의 현재 상태 (예: 확장 또는 숨김 여부)를 제공하는 ThreePaneScaffoldValue가 필요합니다. 기본 동작에는 각각 탐색기의 scaffoldDirective 및 scaffoldValue를 사용합니다.

SupportingPaneScaffold(
    directive = navigator.scaffoldDirective,
    value = navigator.scaffoldValue,
    mainPane = { /*...*/ },
    supportingPane = { /*...*/ },
)
SampleSupportingPaneScaffold.kt

기본 창과 지원 창은 콘텐츠를 포함하는 컴포저블입니다. 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")
        }
    },
)
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