Material 3 Expressive는 차세대 Material Design입니다. 업데이트된 테마 설정, 구성요소, Material You 맞춤설정 기능(동적 색상 등)을 포함합니다.

이 가이드에서는 앱의 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-beta01")

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-beta01")
implementation("androidx.wear.compose:compose-navigation:1.5.0-beta01")

테마 설정

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가지
• 다양한 두께, 너비, 둥글기에 맞게 서체 크기를 맞춤설정할 수 있는 Flex 글꼴

• AnimatedText: Flex 글꼴을 사용합니다.

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 글꼴

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

텍스트 스타일

M3에서는 다음과 같은 TextStyles를 사용할 수 있습니다. 이는 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와 같은 탐색 구성요소에서 제공합니다.

Activity에 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는 페이저의 구조를 레이아웃하고 HorizontalPageIndicator 및 vTimeText 구성요소의 전환을 조정합니다.

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와 마찬가지로 rememberTransformingLazyColumnState()를 제공하여 컴포지션 전반에서 기억되는 TransformingLazyColumnState를 만듭니다.

크기 조절 및 모핑 애니메이션을 추가하려면 각 목록 항목에 다음을 추가합니다.

• 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

API 참조 및 소스 코드

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

디자인

• 디자인 안내