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 이전 휴대전화 안내에 설명된 것과 동일한 접근 방식을 따르세요. 특히 다음을 참고하세요.

• 하나의 앱에서 M2.5와 M3 둘 다를 장기적으로 사용해서는 안 됩니다.
• 단계적 접근 방식 채택

종속 항목

M3에는 M2.5와 별개인 패키지 및 버전이 있습니다.

implementation("androidx.wear.compose:compose-material:1.4.0")

implementation("androidx.wear.compose:compose-material3:1.5.0-beta05")

Wear Compose Material 3 출시 페이지에서 최신 M3 버전을 참고하세요.

Wear Compose Foundation 라이브러리 버전 1.5.0-beta01에서는 Material 3 구성요소와 함께 작동하도록 설계된 새로운 구성요소가 도입되었습니다. 마찬가지로 Wear Compose 탐색 라이브러리의 SwipeDismissableNavHost는 Wear OS 6 (API 수준 36) 이상에서 실행될 때 업데이트된 애니메이션이 있습니다. Wear Compose Material 3 버전으로 업데이트할 때는 Wear Compose Foundation 및 Navigation 라이브러리도 업데이트하는 것이 좋습니다.

implementation("androidx.wear.compose:compose-foundation:1.5.0-beta05")
implementation("androidx.wear.compose:compose-navigation:1.5.0-beta05")

테마 설정

M2.5와 M3에서 테마 컴포저블의 이름은 MaterialTheme이지만 가져오기 패키지와 매개변수는 서로 다릅니다. M3에서는 Colors 매개변수의 이름이 ColorScheme로 변경되었으며 전환을 구현하기 위해 MotionScheme가 도입되었습니다.

import androidx.wear.compose.material.MaterialTheme

MaterialTheme(
        colors = AppColors,
        typography = AppTypography,
        shapes = AppShapes,
        content = content
)

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 클래스 및 관련 함수에 적용됩니다.

import androidx.wear.compose.material.Colors

val appColorScheme: Colors = Colors(
   // M2.5 Color parameters
)

import androidx.wear.compose.material3.ColorScheme

val appColorScheme: ColorScheme = ColorScheme(
   // M3 ColorScheme parameters
)

다음 표에서는 M2.5와 M3의 주요 차이점을 설명합니다.

동적 색상 테마

M3의 새로운 기능은 동적 색상 테마 설정입니다. 사용자가 시계 화면 색상을 변경하면 UI의 색상도 이에 맞게 변경됩니다.

dynamicColorScheme 함수를 사용하여 동적 색 구성표를 구현하고 동적 색 구성표를 사용할 수 없는 경우 defaultColorScheme을 대체로 제공합니다.

@Composable
fun myApp() {
  val myColorScheme = myBrandColors()
  val dynamicColorScheme = dynamicColorScheme(LocalContext.current)
  MaterialTheme(colorScheme = dynamicColorScheme ?: myBrandColors) {...}
}

서체

M3의 서체 시스템은 M2와 다르며 다음과 같은 기능이 포함되어 있습니다.

• 9개의 새로운 텍스트 스타일
• 다양한 두께, 너비, 둥근 정도에 따라 유형 스케일을 맞춤설정할 수 있는 플렉스 글꼴

• AnimatedText(플렉스 글꼴 사용)

import androidx.wear.compose.material.Typography

val Typography = Typography(
   // M2.5 TextStyle parameters
)

import androidx.wear.compose.material3.Typography

val Typography = Typography(
   // M3 TextStyle parameters
)

Flex 글꼴

가변 글꼴을 사용하면 디자이너가 특정 크기의 유형 너비와 두께를 지정할 수 있습니다.

텍스트 스타일

M3에서는 다음 TextStyle을 사용할 수 있습니다. 이러한 구성요소는 M3의 다양한 구성요소에서 기본적으로 사용됩니다.

도형

M3의 도형 시스템은 M2와 다릅니다. 모양 매개변수의 수가 많아졌고 이름이 다르게 지정되었으며 M3 구성요소에 다르게 매핑됩니다. 사용 가능한 도형 크기는 다음과 같습니다.

• 아주 작음
• 작게
• 보통
• 크게
• 아주 크게

Compose에서 이는 M2 Shapes 클래스와 M3 Shapes 클래스에 적용됩니다.

import androidx.wear.compose.material.Shapes

val Shapes = Shapes(
   // M2.5 Shapes parameters
)

import androidx.wear.compose.material3.Shapes

val Shapes = Shapes(
   // M3 Shapes parameters
)

Compose의 Material 2에서 Material 3으로 이전의 도형 매개변수 매핑을 시작점으로 사용합니다.

모양 모핑

M3에서는 도형 변형이 도입되었습니다. 이제 상호작용에 따라 도형이 변형됩니다.

모양 변환 동작은 여러 개의 원형 버튼에서 변형으로 사용할 수 있습니다. 아래를 참고하세요.

구성요소 및 레이아웃

M2.5의 구성요소와 레이아웃은 대부분 M3에서 사용할 수 있습니다. 하지만 일부 M3 구성요소와 레이아웃은 M2.5에 없었습니다. 또한 일부 M3 구성요소에는 상응하는 M2.5 요소보다 더 많은 변형이 있습니다.

일부 구성요소에는 특별한 고려사항이 필요하지만, 다음과 같은 함수 매핑을 시작점으로 사용하는 것이 좋습니다.

다음은 모든 Material 3 구성요소의 전체 목록입니다.

마지막으로 Wear Compose Foundation 라이브러리 버전 1.5.0-beta01의 관련 구성요소 목록은 다음과 같습니다.

버튼

M3의 버튼은 M2.5와 다릅니다. M2.5 칩이 버튼으로 대체되었습니다. Button 구현은 Text, maxLines, textAlign의 기본값을 제공합니다. 이러한 기본값은 Text 요소에서 재정의할 수 있습니다.

import androidx.wear.compose.material.Chip

//M2.5 Buttons
Chip(...)
CompactChip(...)
Button(...)

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를 사용합니다.

import androidx.wear.compose.material.Scaffold

Scaffold {...}

import androidx.wear.compose.material3.AppScaffold
import androidx.wear.compose.material3.ScreenScaffold

AppScaffold {
   // Define the navigation hierarchy within the AppScaffold,
   // such as using SwipeDismissableNavHost.
   SwipeDismissableNavHost(...) {
      composable("home") {
         HomeScreen()
      }
      //other screens
   }
}
fun HomeScreen() {
    val scrollState = rememberScrollState()
    ScreenScaffold(scrollState = scrollState) {
    //rest of the screen code
    }
}

HorizontalPagerIndicator와 함께 HorizontalPager를 사용하는 경우 HorizontalPagerScaffold로 마이그레이션할 수 있습니다. HorizontalPagerScaffold는 AppScaffold 내에 배치됩니다. AppScaffold 및 HorizontalPagerScaffold는 Pager의 구조를 배치하고 HorizontalPageIndicator 및 TimeText 구성요소의 전환을 조정합니다.

HorizontalPagerScaffold는 기본적으로 화면 중앙 끝에 HorizontalPageIndicator를 표시하고 Pager가 페이지로 나뉘는지에 따라 TimeText 및 HorizontalPageIndicator 표시/숨기기를 조정합니다. 이는 PagerState에 의해 결정됩니다.

또한 위치에 따라 스케일링 및 스크림 효과를 사용하여 Pager 내에서 페이지를 애니메이션으로 표시하는 새로운 AnimatedPage 구성요소도 있습니다.

import androidx.wear.compose.material3.AppScaffold
import androidx.wear.compose.material3.HorizontalPagerScaffold
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.foundation.pager.HorizontalPager
import androidx.wear.compose.foundation.pager.rememberPagerState

AppScaffold {
    val pagerState = rememberPagerState(pageCount = { 10 })

    HorizontalPagerScaffold(pagerState = pagerState) {
       HorizontalPager(
          state = pagerState,
        ) { page ->
            AnimatedPage(pageIndex = page, pagerState = pagerState) {
                ScreenScaffold {
…
   }
}

마지막으로 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 구성요소의 추가 변경사항은 아래를 참고하세요.

SwipeDismissableNavHost

SwipeDismissableNavHost은 wear.compose.navigation의 일부입니다. 이 구성요소를 M3와 함께 사용하면 M3 MaterialTheme가 LocalSwipeToDismissBackgroundScrimColor 및 LocalSwipeToDismissContentScrimColor를 업데이트합니다.

TransformingLazyColumn

TransformingLazyColumn는 wear.compose.lazy.foundation의 일부이며 스크롤 중에 목록 항목의 애니메이션을 확장하고 변형하는 기능을 추가하여 사용자 환경을 개선합니다.

ScalingLazyColumn와 마찬가지로 컴포지션 전반에서 기억되는 TransformingLazyColumnState를 만들기 위해 rememberTransformingLazyColumnState()를 제공합니다.

확장 및 모핑 애니메이션을 추가하려면 각 목록 항목에 다음을 추가하세요.

• Modifier.transformedHeight를 사용하면 TransformationSpec를 사용하여 항목의 변환된 높이를 계산할 수 있습니다. 추가 맞춤설정이 필요하지 않은 경우 rememberTransformationSpec()를 사용할 수 있습니다.
• SurfaceTransformation

import androidx.wear.compose.material3.AppScaffold
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.material3.SurfaceTransformation
import androidx.wear.compose.material3.lazy.rememberTransformationSpec
import androidx.wear.compose.material3.lazy.transformedHeight
import androidx.wear.compose.foundation.lazy.rememberTransformingLazyColumnState
import androidx.wear.compose.foundation.lazy.TransformingLazyColumn

val state = rememberTransformingLazyColumnState()
val transformationSpec = rememberTransformationSpec()
AppScaffold {
   ScreenScaffold(state) { contentPadding ->
      TransformingLazyColumn(state = state, contentPadding = contentPadding) {
         items(count = 50) {
            Button(
               onClick = {},
               modifier =
                        Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
                        transformation = SurfaceTransformation(transformationSpec),
                    ) {
                        Text("Item $it")
                    }
                }
            }
        }
    }

유용한 링크

Compose에서 M2.5에서 M3으로 이전하는 방법에 관한 자세한 내용은 다음 추가 리소스를 참고하세요.

샘플

• GitHub의 Material3 브랜치에 있는 Wear OS 샘플
• Wear OS용 Compose Codelab
• Jetcaster 샘플

API 참조 및 소스 코드

• Compose Material 3 API 참조
• Compose Material 3 소스 코드 샘플

디자인

• 디자인 안내