지원 창 레이아웃 빌드

지원 창 표준 레이아웃이 앱의 주요 기능에 사용자의 관심을 집중시킴 관련 지원 콘텐츠를 표시합니다. 예를 들어, 콘텐츠 창에 최신 영화에 대한 정보가 표시될 수 있고 창에 테마가 비슷하거나 동일한 다른 영화의 목록이 표시됩니다. 주연을 맡을 수도 있습니다. 지원 창에 대한 자세한 내용은 자세한 내용은 Material 3 지원 창 가이드라인

지원 창 구현

SupportingPaneScaffold는 최대 세 개의 창: 기본 창, 지원 창, 선택적 추가 창 발판 는 창 공간을 세 개의 창에 할당하기 위한 모든 계산을 처리합니다. 사용 설정됨 Scaffold는 기본 창을 표시하고 지원 창이 있습니다. 작은 화면에서는 스캐폴드가 기본 창 또는 지원 창을 전체 화면으로 표시합니다.

기본 콘텐츠가 지원 콘텐츠와 함께 디스플레이의 대부분을 차지합니다.
그림 1. 지원 창 레이아웃

종속 항목 추가

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()
}
SampleSupportingPaneScaffold.kt

스캐폴드에는 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의 개별 창을 자체 창으로 추출 컴포저블을 사용하여 재사용 및 테스트가 가능하도록 만들었습니다. 사용 다음 경우에 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")
    }
}
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

이전
목록-세부정보 레이아웃 빌드
다음
정렬 선