Material 3 Expressive는 차세대 Material Design입니다. 업데이트된 테마 설정, 구성요소, 맞춤설정 기능(동적 색상 등)을 포함합니다.
이 가이드에서는 앱의 Wear Compose Material 2.5(androidx.wear.compose) Jetpack 라이브러리에서 Wear Compose Material 3(androidx.wear.compose.material3) Jetpack 라이브러리로의 이전을 중점적으로 설명합니다.
접근 방식
앱 코드를 M2.5에서 M3로 이전하려면 Compose Material 이전 휴대전화 안내에 설명된 것과 동일한 접근 방식을 따르세요. 특히 다음을 참고하세요.
종속 항목
M3에는 M2.5와 별개인 패키지 및 버전이 있습니다.
M2.5
implementation("androidx.wear.compose:compose-material:1.4.0")
M3
implementation("androidx.wear.compose:compose-material3:1.6.0-alpha03")
Wear Compose Material 3 출시 페이지에서 최신 M3 버전을 참고하세요.
Wear Compose Foundation 라이브러리 버전 1.6.0-alpha03에서는 Material 3 구성요소와 함께 작동하도록 설계된 새로운 구성요소가 도입되었습니다.
마찬가지로 Wear Compose Navigation 라이브러리의 SwipeDismissableNavHost
는 Wear OS 6 (API 수준 36) 이상에서 실행할 때 업데이트된 애니메이션이 있습니다. Wear Compose Material 3 버전으로 업데이트할 때는 Wear Compose Foundation 및 Navigation 라이브러리도 업데이트하는 것이 좋습니다.
implementation("androidx.wear.compose:compose-foundation:1.6.0-alpha03")
implementation("androidx.wear.compose:compose-navigation:1.6.0-alpha03")
테마
M2.5와 M3에서 테마 컴포저블의 이름은 MaterialTheme
이지만 가져오기 패키지와 매개변수는 서로 다릅니다. M3에서는 Colors
매개변수의 이름이 ColorScheme
로 변경되었으며 전환을 구현하기 위해 MotionScheme
가 도입되었습니다.
M2.5
import androidx.wear.compose.material.MaterialTheme
MaterialTheme(
colors = AppColors,
typography = AppTypography,
shapes = AppShapes,
content = content
)
M3
import androidx.wear.compose.material3.MaterialTheme
MaterialTheme(
colorScheme = AppColorScheme,
typography = AppTypography,
shapes = AppShapes,
motionScheme = AppMotionScheme,
content = content
)
색상
M3의 색상 시스템은 M2.5와 크게 다릅니다. 색상 매개변수의 수가 많아졌고 이름도 다르며 M3 구성요소에 다른 방식으로 매핑됩니다. Compose에서 이는 M2.5 Colors
클래스, M3 ColorScheme
클래스 및 관련 함수에 적용됩니다.
M2.5
import androidx.wear.compose.material.Colors
val appColorScheme: Colors = Colors(
// M2.5 Color parameters
)
M3
import androidx.wear.compose.material3.ColorScheme
val appColorScheme: ColorScheme = ColorScheme(
// M3 ColorScheme parameters
)
다음 표에서는 M2.5와 M3의 주요 차이점을 설명합니다.
M2.5 |
M3 |
---|---|
|
|
13가지 색상 |
28가지 색상 |
해당 사항 없음 |
새 동적 색상 테마 설정 |
해당 사항 없음 |
더 많은 표현을 위한 새로운 3차 색상 |
동적 색상 테마 설정
M3의 새로운 기능은 동적 색상 테마 설정입니다. 사용자가 시계 화면 색상을 변경하면 UI의 색상도 이에 맞게 변경됩니다.
dynamicColorScheme
함수를 사용하여 동적 색 구성표를 구현하고 동적 색 구성표를 사용할 수 없는 경우 defaultColorScheme
을 대체로 제공합니다.
@Composable
fun myApp() {
val myColorScheme = myBrandColors()
val dynamicColorScheme = dynamicColorScheme(LocalContext.current)
MaterialTheme(colorScheme = dynamicColorScheme ?: myBrandColors) {...}
}
서체
M3의 서체 시스템은 M2와 다르며 다음 기능을 포함합니다.
- 9개의 새로운 텍스트 스타일
- 다양한 두께, 너비, 둥근 정도에 따라 유형 스케일을 맞춤설정할 수 있는 플렉스 글꼴
AnimatedText
(유연한 글꼴 사용)
M2.5
import androidx.wear.compose.material.Typography
val Typography = Typography(
// M2.5 TextStyle parameters
)
M3
import androidx.wear.compose.material3.Typography
val Typography = Typography(
// M3 TextStyle parameters
)
Flex 글꼴
가변 글꼴을 사용하면 디자이너가 특정 크기의 유형 너비와 두께를 지정할 수 있습니다.
텍스트 스타일
M3에서는 다음 TextStyles를 사용할 수 있습니다. 이러한 구성요소는 M3의 다양한 구성요소에서 기본적으로 사용됩니다.
서체 |
TextStyle |
---|---|
디스플레이 |
displayLarge, displayMedium, displaySmall |
제목 |
titleLarge, titleMedium, titleSmall |
라벨 |
labelLarge, labelMedium, labelSmall |
본문 |
bodyLarge, bodyMedium, bodySmall, bodyExtraSmall |
숫자 |
numeralExtraLarge, numeralLarge, numeralMedium, numeralSmall, numeralExtraSmall |
Arc |
arcLarge, arcMedium, arcSmall |
도형
M3의 도형 시스템은 M2와 다릅니다. 모양 매개변수의 수가 많아졌고 이름이 다르게 지정되었으며 M3 구성요소에 다르게 매핑됩니다. 사용 가능한 도형 크기는 다음과 같습니다.
- 매우 작음
- 작게
- 보통
- 크게
- 특대
Compose에서 이는 M2 Shapes
클래스와 M3 Shapes
클래스에 적용됩니다.
M2.5
import androidx.wear.compose.material.Shapes
val Shapes = Shapes(
// M2.5 Shapes parameters
)
M3
import androidx.wear.compose.material3.Shapes
val Shapes = Shapes(
// M3 Shapes parameters
)
Compose의 Material 2에서 Material 3으로 이전의 도형 매개변수 매핑을 시작점으로 사용합니다.
도형 변형
M3에서는 도형 변형이 도입되었습니다. 이제 도형이 상호작용에 따라 변형됩니다.
모양 변환 동작은 여러 라운드 버튼의 변형으로 사용할 수 있습니다. 모양 변환을 지원하는 버튼 목록은 다음을 참고하세요.
버튼 |
도형 변형 함수 |
---|---|
|
IconButtonDefaults.animatedShape()는 누를 때 아이콘 버튼에 애니메이션을 적용합니다. |
|
IconToggleButtonDefaults.animatedShape()는 누를 때 아이콘 전환 버튼을 애니메이션 처리하고 IconToggleButtonDefaults.variantAnimatedShapes()는 누르고 선택/선택 해제할 때 아이콘 전환 버튼에 애니메이션을 적용합니다. |
|
TextButtonDefaults.animatedShape()는 누를 때 텍스트 버튼에 애니메이션을 적용합니다. |
|
TextToggleButtonDefaults.animatedShapes()는 누를 때 텍스트 전환 버튼에 애니메이션을 적용하고 TextToggleButtonDefaults.variantAnimatedShapes()는 누르고 선택/선택 해제할 때 텍스트 전환 버튼에 애니메이션을 적용합니다. |
구성요소 및 레이아웃
M2.5의 구성요소와 레이아웃은 대부분 M3에서 사용할 수 있습니다. 하지만 일부 M3 구성요소와 레이아웃은 M2.5에 없었습니다. 또한 일부 M3 구성요소에는 상응하는 M2.5 요소보다 더 많은 변형이 있습니다.
일부 구성요소에는 특별한 고려사항이 필요하지만, 다음과 같은 함수 매핑을 시작점으로 사용하는 것이 좋습니다.
다음은 모든 Material 3 구성요소의 전체 목록입니다.
Material 3 |
Material 2.5에 상응하는 구성요소 (M3에 새로 도입되지 않은 경우) |
---|---|
신규 |
|
신규 |
|
android.wear.compose.material.Scaffold (androidx.wear.compose.material3.ScreenScaffold 사용) |
|
신규 |
|
체크박스 전환 컨트롤이 있는 androidx.wear.compose.material.ToggleChip |
|
androidx.wear.compose.material.Chip (배경이 필요하지 않은 경우에만) |
|
신규 |
|
신규 |
|
신규 |
|
색조 버튼 배경이 필요한 경우 androidx.wear.compose.material.Chip |
|
신규 |
|
신규 |
|
신규 |
|
신규 |
|
신규 |
|
라디오 버튼 전환 컨트롤이 있는 androidx.wear.compose.material.ToggleChip |
|
android.wear.compose.material.Scaffold (androidx.wear.compose material3.AppScaffold 사용) |
|
androidx.wear.compose.material3.SegmentedCircularProgressIndicator |
신규 |
androidx.wear.compose.material.SwipeToRevealCard 및 androidx.wear.compose.material.SwipeToRevealChip |
|
스위치 전환 컨트롤이 있는 androidx.wear.compose.material.ToggleChip |
|
신규 |
마지막으로 버전 1.6.0-alpha03에서 처음 도입된 Wear Compose Foundation 라이브러리의 관련 구성요소 목록은 다음과 같습니다.
Wear Compose Foundation 1.6.0-alpha03 |
|
---|---|
컴포지션의 활성 부분을 추적하고 포커스를 조정하기 위해 애플리케이션에서 컴포저블에 주석을 다는 데 사용됩니다. |
|
Compose Foundation 구성요소를 기반으로 빌드된 가로 스크롤 페이저로, 성능을 개선하고 Wear OS 가이드라인을 준수하기 위해 Wear 관련 개선사항이 적용되었습니다. |
|
Compose Foundation 구성요소를 기반으로 빌드된 세로 스크롤 페이저로, 성능을 개선하고 Wear OS 가이드라인을 준수하기 위해 Wear 관련 개선사항이 적용되어 있습니다. |
|
|
|
버튼
M3의 버튼은 M2.5와 다릅니다. M2.5 칩이 버튼으로 대체되었습니다. Button
구현은 Text
, maxLines
, textAlign
의 기본값을 제공합니다. 이러한 기본값은 Text
요소에서 재정의할 수 있습니다.
M2.5
import androidx.wear.compose.material.Chip
//M2.5 Buttons
Chip(...)
CompactChip(...)
Button(...)
M3
import androidx.wear.compose.material3.Button
//M3 Buttons
Button(...)
CompactButton(...)
IconButton(...)
TextButton(...)
M3에는 새로운 버튼 변형도 있습니다. Compose Material 3 API 참조 개요에서 확인하세요.
M3에는 새로운 버튼인 EdgeButton
이 도입되었습니다. EdgeButton
는 초소형, 소형, 중형, 대형의 4가지 크기로 제공됩니다. EdgeButton
구현은 맞춤설정할 수 있는 크기에 따라 maxLines
의 기본값을 제공합니다.
TransformingLazyColumn
및 ScalingLazyColumn
을 사용하는 경우 EdgeButton
를 ScreenScaffold
에 전달하여 스크롤 시 모양이 변경되도록 합니다. ScreenScaffold
및 TransformingLazyColumn
와 함께 EdgeButton
를 사용하는 방법을 확인하려면 다음 코드를 참고하세요.
import androidx.wear.compose.material3.EdgeButton
import androidx.wear.compose.material3.ScreenScaffold
ScreenScaffold(
scrollState = state,
contentPadding = contentPadding,
edgeButton = {
EdgeButton(...)
}
){ contentPadding ->
TransformingLazyColumn(state = state, contentPadding = contentPadding,){
// additional code here
}
}
Scaffold
M3의 스캐폴드는 M2.5와 다릅니다. M3에서는 AppScaffold
및 새로운 ScreenScaffold
컴포저블이 스캐폴드를 대체했습니다. AppScaffold
및 ScreenScaffold
는 화면의 구조를 배치하고 ScrollIndicator
및 TimeText
구성요소의 전환을 조정합니다.
AppScaffold
를 사용하면 스와이프하여 닫기와 같은 인앱 전환 중에 TimeText
와 같은 정적 화면 요소가 계속 표시됩니다. 일반적으로 SwipeDismissableNavHost
와 같은 탐색 구성요소에서 제공하는 기본 애플리케이션 콘텐츠를 위한 슬롯을 제공합니다.
활동에 AppScaffold
하나를 선언하고 각 화면에 ScreenScaffold
를 사용합니다.
M2.5
import androidx.wear.compose.material.Scaffold
Scaffold {...}
M3
AppScaffold { val navController = rememberSwipeDismissableNavController() SwipeDismissableNavHost( navController = navController, startDestination = "message_list" ) { composable("message_list") { MessageList(onMessageClick = { id -> navController.navigate("message_detail/$id") }) } composable("message_detail/{id}") { MessageDetail(id = it.arguments?.getString("id")!!) } } } } // Implementation of one of the screens in the navigation @Composable fun MessageDetail(id: String) { // .. Screen level content goes here val scrollState = rememberTransformingLazyColumnState() val padding = rememberResponsiveColumnPadding( first = ColumnItemType.BodyText ) ScreenScaffold( scrollState = scrollState, contentPadding = padding ) { scaffoldPaddingValues -> // Screen content goes here // ...
HorizontalPagerIndicator와 함께 HorizontalPager
를 사용하는 경우 HorizontalPagerScaffold
로 마이그레이션할 수 있습니다. HorizontalPagerScaffold
은 AppScaffold
내에 배치됩니다. AppScaffold
및 HorizontalPagerScaffold
는 Pager의 구조를 배치하고 HorizontalPageIndicator
및 TimeText
구성요소의 전환을 조정합니다.
HorizontalPagerScaffold
는 기본적으로 화면 중앙 끝에 HorizontalPageIndicator
를 표시하고 Pager
가 페이지로 나뉘는지 여부에 따라 TimeText
와 HorizontalPageIndicator
의 표시와 숨기기를 조정합니다. 이는 PagerState
에 의해 결정됩니다.
또한 위치에 따라 스케일링 및 스크림 효과를 사용하여 Pager 내에서 페이지를 애니메이션으로 표시하는 새로운 AnimatedPage
구성요소도 있습니다.
AppScaffold { val pagerState = rememberPagerState(pageCount = { 10 }) val columnState = rememberTransformingLazyColumnState() val contentPadding = rememberResponsiveColumnPadding( first = ColumnItemType.ListHeader, last = ColumnItemType.BodyText, ) HorizontalPagerScaffold(pagerState = pagerState) { HorizontalPager( state = pagerState, ) { page -> AnimatedPage(pageIndex = page, pagerState = pagerState) { ScreenScaffold( scrollState = columnState, contentPadding = contentPadding ) { contentPadding -> TransformingLazyColumn( state = columnState, contentPadding = contentPadding ) { item { ListHeader( modifier = Modifier.fillMaxWidth() ) { Text(text = "Pager sample") } } item { if (page == 0) { Text(text = "Page #$page. Swipe right") } else{ Text(text = "Page #$page. Swipe left and right") } } } } } } } }
마지막으로 M3에서는 HorizontalPagerScaffold
과 동일한 패턴을 따르는 VerticalPagerScaffold
을 도입합니다.
import androidx.wear.compose.material3.AppScaffold
import androidx.wear.compose.material3.HorizontalPagerScaffold
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.foundation.pager.VerticalPager
import androidx.wear.compose.foundation.pager.rememberPagerState
AppScaffold {
val pagerState = rememberPagerState(pageCount = { 10 })
VerticalPagerScaffold(pagerState = pagerState) {
VerticalPager(
state = pagerState
) { page ->
AnimatedPage(pageIndex = page, pagerState = pagerState){
ScreenScaffold {
…
}
}
자리표시자
M2.5와 M3 간에 API 변경사항이 있습니다.
이제 Placeholder.PlaceholderDefaults
은 두 가지 수정자를 제공합니다.
Modifier.placeholder
: 아직 로드되지 않은 콘텐츠 대신 그려집니다.- 데이터가 로드되기를 기다리는 동안 애니메이션 루프에서 실행되는 자리표시자 쉬머 효과를 제공하는 자리표시자 쉬머 효과
Modifier.placeholderShimmer
Placeholder
구성요소의 추가 변경사항은 다음 표를 참고하세요.
M2.5 |
M3 |
---|---|
|
삭제됨 |
|
삭제됨 |
|
|
|
삭제됨 |
|
삭제됨 |
|
삭제됨 |
|
삭제됨 |
SwipeDismissableNavHost
SwipeDismissableNavHost
은 wear.compose.navigation
의 일부입니다. 이 구성요소를 M3와 함께 사용하면 M3 MaterialTheme가 LocalSwipeToDismissBackgroundScrimColor
및 LocalSwipeToDismissContentScrimColor
를 업데이트합니다.
TransformingLazyColumn
TransformingLazyColumn
는 wear.compose.lazy.foundation
의 일부이며 스크롤 중에 목록 항목의 애니메이션을 확장하고 변형하는 지원을 추가하여 사용자 환경을 개선합니다.
ScalingLazyColumn
와 마찬가지로 컴포지션 전반에서 기억되는 TransformingLazyColumnState
를 만들기 위해 rememberTransformingLazyColumnState()
를 제공합니다.
확장 및 모핑 애니메이션을 추가하려면 각 목록 항목에 다음을 추가합니다.
Modifier.transformedHeight
를 사용하여TransformationSpec
를 사용하여 변환된 항목의 높이를 계산할 수 있는 경우 추가 맞춤설정이 필요하지 않으면rememberTransformationSpec()
를 사용할 수 있습니다.SurfaceTransformation
val columnState = rememberTransformingLazyColumnState() val contentPadding = rememberResponsiveColumnPadding( first = ColumnItemType.ListHeader, last = ColumnItemType.Button, ) val transformationSpec = rememberTransformationSpec() ScreenScaffold( scrollState = columnState, contentPadding = contentPadding ) { contentPadding -> TransformingLazyColumn( state = columnState, contentPadding = contentPadding ) { item { ListHeader( modifier = Modifier.fillMaxWidth().transformedHeight(this, transformationSpec), transformation = SurfaceTransformation(transformationSpec) ) { Text(text = "Header") } } // ... other items item { Button( modifier = Modifier.fillMaxWidth().transformedHeight(this, transformationSpec), transformation = SurfaceTransformation(transformationSpec), onClick = { /* ... */ }, icon = { Icon( imageVector = Icons.Default.Build, contentDescription = "build", ) }, ) { Text( text = "Build", maxLines = 1, overflow = TextOverflow.Ellipsis, ) } } } }
유용한 링크
Compose에서 M2.5에서 M3으로 이전하는 방법에 관한 자세한 내용은 다음 추가 리소스를 참고하세요.