대부분의 앱에는 앱의 기본 탐색 UI입니다. 일반 휴대전화와 같이 소형 창문 대상은 일반적으로 을 클릭합니다. 화면의 전체 화면 앱과 같이 앱에서는 일반적으로 앱과 함께 탐색 레일을 사용하는 것이 더 좋습니다. 왼쪽과 오른쪽을 잡고 있는 상태에서 탐색 컨트롤을 더 쉽게 찾을 수 있음 액세스할 수 있습니다.
NavigationSuiteScaffold
로 간단하게 전환
적절한 탐색 UI 컴포저블을 표시하여 탐색 UI 간 전환
WindowSizeClass
기준. 여기에는
런타임 창 크기 변경 중에 UI 변경 기본 동작은 다음과 같습니다.
다음 UI 구성요소 중 하나를 표시합니다.
- 너비 또는 높이가 좁거나 기기가 세로인 경우 탐색 메뉴 탁자 모드
- 그 외 모든 항목의 탐색 레일
![](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/adaptive/navigationsuitescaffold_with_nav_bar.png?authuser=8&hl=ko)
NavigationSuiteScaffold
는 작은 창에 탐색 메뉴를 표시합니다.
![](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/adaptive/navigationsuitescaffold_with_nav_rail.png?authuser=8&hl=ko)
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), }
NavigationSuiteScaffold
를 사용하려면 현재 대상을 추적해야 합니다.
rememberSaveable
를 사용하면 됩니다.
var currentDestination by rememberSaveable { mutableStateOf(AppDestinations.HOME) }
다음 예에서 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. }
대상 콘텐츠 람다 내에서 currentDestination
값을 사용하여
표시할 UI를 결정합니다. 앱에서 탐색 라이브러리를 사용하는 경우
적절한 목적지를 표시합니다. when 문으로도 충분할 수 있습니다.
NavigationSuiteScaffold( navigationSuiteItems = { /*...*/ } ) { // Destination content. when (currentDestination) { AppDestinations.HOME -> HomeDestination() AppDestinations.FAVORITES -> FavoritesDestination() AppDestinations.SHOPPING -> ShoppingDestination() AppDestinations.PROFILE -> ProfileDestination() } }
색상 변경
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... }
탐색 UI는 NavigationSuiteScaffold
노출 영역 앞에 그려집니다.
UI 색상의 기본값은
NavigationSuiteDefaults.colors()
, 내가
이 값도 재정의할 수 있습니다. 예를 들어, 배경색을
탐색 메뉴를 투명하게 설정하지만 나머지 값은 기본값으로 설정합니다.
navigationBarContainerColor
재정의:
NavigationSuiteScaffold( navigationSuiteItems = { /* ... */ }, navigationSuiteColors = NavigationSuiteDefaults.colors( navigationBarContainerColor = Color.Transparent, ) ) { // Content... }
궁극적으로 탐색 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... }
탐색 유형 맞춤설정
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... }
추가 리소스
Material Design 안내를 참고하세요.
다음 androidx.compose.material3
라이브러리 구성요소를 참고하세요.