적응형 탐색 빌드

대부분의 앱에는 앱의 기본 탐색 UI입니다. 일반 휴대전화와 같이 소형 창문 대상은 일반적으로 을 클릭합니다. 화면의 전체 화면 앱과 같이 앱에서는 일반적으로 앱과 함께 탐색 레일을 사용하는 것이 더 좋습니다. 왼쪽과 오른쪽을 잡고 있는 상태에서 탐색 컨트롤을 더 쉽게 찾을 수 있음 액세스할 수 있습니다.

NavigationSuiteScaffold로 간단하게 전환 적절한 탐색 UI 컴포저블을 표시하여 탐색 UI 간 전환 WindowSizeClass 기준. 여기에는 런타임 창 크기 변경 중에 UI 변경 기본 동작은 다음과 같습니다. 다음 UI 구성요소 중 하나를 표시합니다.

  • 너비 또는 높이가 좁거나 기기가 세로인 경우 탐색 메뉴 탁자 모드
  • 그 외 모든 항목의 탐색 레일
를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder"></ph>
그림 1. NavigationSuiteScaffold는 작은 창에 탐색 메뉴를 표시합니다.
를 통해 개인정보처리방침을 정의할 수 있습니다.
를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">
</ph>
그림 2. NavigationSuiteScaffold는 확장된 창에 탐색 레일을 표시합니다.

종속 항목 추가

NavigationSuiteScaffold은(는) Material3 적응형 탐색 모음 있습니다. 앱의 build.gradle 파일에 라이브러리의 종속 항목을 추가합니다. 모듈:

Kotlin


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

Groovy


implementation 'androidx.compose.material3:material3-adaptive-navigation-suite'

Scaffold 만들기

NavigationSuiteScaffold의 두 가지 주요 부분은 탐색 도구 모음 항목입니다. 선택한 대상의 콘텐츠가 포함됩니다 사용자는 포드의 구성과 탐색 도구 모음 항목을 생성할 수 있지만 일반적으로 다른 위치(예: enum)에서

enum class AppDestinations(
    @StringRes val label: Int,
    val icon: ImageVector,
    @StringRes val contentDescription: Int
) {
    HOME(R.string.home, Icons.Default.Home, R.string.home),
    FAVORITES(R.string.favorites, Icons.Default.Favorite, R.string.favorites),
    SHOPPING(R.string.shopping, Icons.Default.ShoppingCart, R.string.shopping),
    PROFILE(R.string.profile, Icons.Default.AccountBox, R.string.profile),
}
SampleNavigationSuiteScaffold.kt

NavigationSuiteScaffold를 사용하려면 현재 대상을 추적해야 합니다. rememberSaveable를 사용하면 됩니다.

var currentDestination by rememberSaveable { mutableStateOf(AppDestinations.HOME) }
SampleNavigationSuiteScaffold.kt

다음 예에서 navigationSuiteItems 매개변수 (유형 NavigationSuiteScope는 item 함수를 사용합니다. 개별 대상의 탐색 UI를 정의합니다. 대상 UI는 탐색 메뉴, 레일, 창에 걸쳐 사용됩니다. 탐색 항목을 만들려면 AppDestinations에 대해 루프를 실행합니다 (이전 스니펫에 정의됨).

NavigationSuiteScaffold(
    navigationSuiteItems = {
        AppDestinations.entries.forEach {
            item(
                icon = {
                    Icon(
                        it.icon,
                        contentDescription = stringResource(it.contentDescription)
                    )
                },
                label = { Text(stringResource(it.label)) },
                selected = it == currentDestination,
                onClick = { currentDestination = it }
            )
        }
    }
) {
    // TODO: Destination content.
}
SampleNavigationSuiteScaffold.kt

대상 콘텐츠 람다 내에서 currentDestination 값을 사용하여 표시할 UI를 결정합니다. 앱에서 탐색 라이브러리를 사용하는 경우 적절한 목적지를 표시합니다. when 문으로도 충분할 수 있습니다.

NavigationSuiteScaffold(
    navigationSuiteItems = { /*...*/ }
) {
    // Destination content.
    when (currentDestination) {
        AppDestinations.HOME -> HomeDestination()
        AppDestinations.FAVORITES -> FavoritesDestination()
        AppDestinations.SHOPPING -> ShoppingDestination()
        AppDestinations.PROFILE -> ProfileDestination()
    }
}
SampleNavigationSuiteScaffold.kt

색상 변경

NavigationSuiteScaffold는 전체 영역에 Surface를 만듭니다. 일반적으로 전체 창을 차지하게 됩니다 게다가 스캐폴드는 NavigationBar와 같은 특정 탐색 UI를 그립니다. 노출 영역과 탐색 UI 모두 앱의 테마 값을 재정의할 수 있습니다.

containerColor 매개변수는 노출 영역의 색상을 지정합니다. 기본값 은 색 구성표의 배경 색상입니다. contentColor 매개변수 는 해당 표면 에 있는 콘텐츠의 색상을 지정합니다. 기본값은 'on'입니다. 색상 containerColor에 지정된 모든 값입니다. 예를 들어 containerColor background 색상을 사용하면 contentColor는 onBackground 색상을 사용합니다. Compose의 Material Design 3 테마 설정을 참고하세요. 를 참조하세요. 이러한 값을 재정의할 때 앱이 어두운 화면과 밝은 디스플레이를 지원하도록 테마에 정의된 값 사용 모드:

NavigationSuiteScaffold(
    navigationSuiteItems = { /* ... */ },
    containerColor = MaterialTheme.colorScheme.primary,
    contentColor = MaterialTheme.colorScheme.onPrimary,
) {
    // Content...
}
SampleNavigationSuiteScaffold.kt

탐색 UI는 NavigationSuiteScaffold 노출 영역 앞에 그려집니다. UI 색상의 기본값은 NavigationSuiteDefaults.colors(), 내가 이 값도 재정의할 수 있습니다. 예를 들어, 배경색을 탐색 메뉴를 투명하게 설정하지만 나머지 값은 기본값으로 설정합니다. navigationBarContainerColor 재정의:

NavigationSuiteScaffold(
    navigationSuiteItems = { /* ... */ },
    navigationSuiteColors = NavigationSuiteDefaults.colors(
        navigationBarContainerColor = Color.Transparent,
    )
) {
    // Content...
}
SampleNavigationSuiteScaffold.kt

궁극적으로 탐색 UI에서 각 항목을 맞춤설정할 수 있습니다. 호출 시 item 함수를 사용할 때 NavigationSuiteItemColors 클래스는 탐색 메뉴, 탐색 레일, 탐색의 항목 색상 창 즉, 각 탐색 UI 유형에서 동일한 색상을 사용할 수 있습니다. 필요에 따라 색상을 바꿀 수 있습니다. 색상 정의 모든 항목에 동일한 객체 인스턴스를 사용하기 위한 NavigationSuiteScaffold 수준 NavigationSuiteDefaults.itemColors() 함수를 호출하여 다음과 같이 변경할 수 있습니다.

val myNavigationSuiteItemColors = NavigationSuiteDefaults.itemColors(
    navigationBarItemColors = NavigationBarItemDefaults.colors(
        indicatorColor = MaterialTheme.colorScheme.primaryContainer,
        selectedIconColor = MaterialTheme.colorScheme.onPrimaryContainer
    ),
)

NavigationSuiteScaffold(
    navigationSuiteItems = {
        AppDestinations.entries.forEach {
            item(
                icon = {
                    Icon(
                        it.icon,
                        contentDescription = stringResource(it.contentDescription)
                    )
                },
                label = { Text(stringResource(it.label)) },
                selected = it == currentDestination,
                onClick = { currentDestination = it },
                colors = myNavigationSuiteItemColors,
            )
        }
    },
) {
    // Content...
}
SampleNavigationSuiteScaffold.kt

탐색 유형 맞춤설정

NavigationSuiteScaffold의 기본 동작은 탐색 UI를 변경합니다. 창 크기에 따라 다름 클래스를 참조하세요. 하지만 이 동작을 재정의하는 것이 좋습니다. 예를 들어 앱이 피드에 표시할 콘텐츠의 큰 창이 있으면 앱에서 영구적인 탐색을 사용하여 탐색 창을 닫을 수 있지만 여전히 기본 동작으로 돌아갑니다 소형 및 중형 창 크기 클래스:

val adaptiveInfo = currentWindowAdaptiveInfo()
val customNavSuiteType = with(adaptiveInfo) {
    if (windowSizeClass.windowWidthSizeClass == WindowWidthSizeClass.EXPANDED) {
        NavigationSuiteType.NavigationDrawer
    } else {
        NavigationSuiteScaffoldDefaults.calculateFromAdaptiveInfo(adaptiveInfo)
    }
}

NavigationSuiteScaffold(
    navigationSuiteItems = { /* ... */ },
    layoutType = customNavSuiteType,
) {
    // Content...
}
SampleNavigationSuiteScaffold.kt

추가 리소스

Material Design 안내를 참고하세요.

다음 androidx.compose.material3 라이브러리 구성요소를 참고하세요.

이전
멀티 윈도우 모드 지원
다음
목록-세부정보 레이아웃 빌드