Material 3 Expressive là phiên bản cải tiến tiếp theo của Material Design. Phiên bản này có giao diện cập nhật, cũng như các thành phần và tính năng cá nhân hoá Material You, chẳng hạn như màu động.

Hướng dẫn này tập trung vào việc di chuyển từ thư viện Jetpack Wear Compose Material 2.5 (androidx.wear.compose) sang thư viện Jetpack Wear Compose Material 3 (androidx.wear.compose.material3) cho ứng dụng.

Phương pháp

Để di chuyển mã ứng dụng từ M2.5 sang M3, hãy làm theo phương pháp tương tự như mô tả trong hướng dẫn di chuyển điện thoại Compose Material, cụ thể:

• Bạn không nên sử dụng cả M2.5 và M3 trong một ứng dụng về lâu dài
• Áp dụng phương pháp theo giai đoạn

Phần phụ thuộc

M3 có gói và phiên bản riêng so với M2.5:

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

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

Xem các phiên bản M3 mới nhất trên trang phát hành Wear Compose Material 3.

Thư viện Wear Compose Foundation phiên bản 1.5.0-beta01 giới thiệu một số thành phần mới được thiết kế để hoạt động với các thành phần Material 3. Tương tự, SwipeDismissableNavHost từ thư viện Điều hướng Wear Compose có ảnh động được cập nhật khi chạy trên Wear OS 6 (API cấp 36) trở lên. Khi cập nhật lên phiên bản Wear Compose Material 3, bạn cũng nên cập nhật thư viện Wear Compose Foundation và Navigation:

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

Giao diện

Trong cả M2.5 và M3, thành phần kết hợp giao diện có tên là MaterialTheme, nhưng các gói và tham số nhập lại khác nhau. Trong M3, tham số Colors đã được đổi tên thành ColorScheme và MotionScheme đã được giới thiệu để triển khai các hiệu ứng chuyển đổi.

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
)

Màu

Hệ thống màu trong M3 khác biệt đáng kể so với M2.5. Số lượng tham số màu đã tăng lên, chúng có tên khác nhau và ánh xạ đến các thành phần M3 theo cách khác nhau. Trong Compose, điều này áp dụng cho lớp Colors của M2.5, lớp ColorScheme của M3 và các hàm liên quan:

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
)

Bảng sau đây mô tả những điểm khác biệt chính giữa M2.5 và M3:

Giao diện màu động

Một tính năng mới trong M3 là giao diện màu động. Nếu người dùng thay đổi màu mặt đồng hồ, thì màu sắc trong giao diện người dùng sẽ thay đổi cho phù hợp.

Sử dụng hàm dynamicColorScheme để triển khai bảng phối màu động và cung cấp defaultColorScheme làm phương án dự phòng trong trường hợp không có bảng phối màu động.

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

Kiểu chữ

Hệ thống kiểu chữ trong M3 khác với M2 và bao gồm các tính năng sau:

• 9 kiểu văn bản mới
• Phông chữ Flex cho phép tuỳ chỉnh tỷ lệ kiểu chữ cho nhiều độ đậm, chiều rộng và độ tròn

• AnimatedText, sử dụng phông chữ 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
)

Phông chữ Flex

Phông chữ Flex cho phép nhà thiết kế chỉ định chiều rộng và độ đậm của kiểu cho các kích thước cụ thể.

Kiểu văn bản

Các TextStyles sau đây có trong M3. Các thành phần M3 sử dụng các thành phần này theo mặc định.

Hình dạng

Hệ thống hình dạng trong M3 khác với M2. Số lượng tham số hình dạng đã tăng lên, các tên gọi khác nhau và ánh xạ đến các thành phần M3 theo cách khác nhau. Có các kích thước hình dạng sau:

• Rất nhỏ
• Nhỏ
• Trung bình
• Lớn
• Rất lớn

Trong Compose, điều này áp dụng cho lớp Shapes (Hình dạng) của M2 và lớp Shapes (Hình dạng) của M3:

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
)

Sử dụng ánh xạ tham số Hình dạng từ phần Di chuyển từ Material 2 sang Material 3 trong Compose làm điểm xuất phát.

Biến đổi hình dạng

M3 ra mắt tính năng Biến đổi hình dạng: các hình dạng hiện biến đổi để phản hồi các lượt tương tác.

Hành vi Biến đổi hình dạng có sẵn dưới dạng một biến thể trên một số nút tròn, hãy xem bên dưới:

Thành phần và bố cục

Hầu hết các thành phần và bố cục trong M2.5 đều có trong M3. Tuy nhiên, một số thành phần và bố cục M3 không tồn tại trong M2.5. Hơn nữa, một số thành phần M3 có nhiều biến thể hơn các phiên bản tương đương trong M2.5.

Mặc dù một số thành phần cần được xem xét đặc biệt, nhưng bạn nên bắt đầu từ các ánh xạ hàm sau đây:

Dưới đây là danh sách đầy đủ tất cả các thành phần Material 3:

Cuối cùng, danh sách một số thành phần có liên quan từ thư viện Wear Compose Foundation phiên bản 1.5.0-beta01:

Nút

Các nút trong M3 khác với M2.5. Khối M2.5 đã được thay thế bằng Nút. Việc triển khai Button cung cấp các giá trị mặc định cho Text maxLines và textAlign. Bạn có thể ghi đè các giá trị mặc định đó trong phần tử 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 cũng bao gồm các biến thể nút mới. Hãy xem các nút mới này trên trang Tổng quan về tài liệu tham khảo API Compose Material 3.

M3 giới thiệu một nút mới: EdgeButton. EdgeButton có 4 kích thước: cực nhỏ, nhỏ, trung bình và lớn. Phương thức triển khai EdgeButton cung cấp giá trị mặc định cho maxLines tuỳ thuộc vào kích thước có thể tuỳ chỉnh.

Nếu bạn đang sử dụng TransformingLazyColumn và ScalingLazyColumn, hãy truyền EdgeButton vào ScreenScaffold để nó biến đổi, thay đổi hình dạng khi cuộn. Hãy xem mã bên dưới để kiểm tra cách sử dụng EdgeButton với ScreenScaffold và TransformingLazyColumn.

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

Scaffold trong M3 khác với M2.5. Trong M3, AppScaffold và thành phần kết hợp ScreenScaffold mới đã thay thế Scaffold. AppScaffold và ScreenScaffold bố trí cấu trúc của màn hình và điều phối các chuyển đổi của thành phần ScrollIndicator và TimeText.

AppScaffold cho phép các thành phần màn hình tĩnh như TimeText vẫn hiển thị trong quá trình chuyển đổi trong ứng dụng, chẳng hạn như vuốt để đóng. ​​Thành phần này cung cấp một khe cho nội dung ứng dụng chính, thường do một thành phần điều hướng cung cấp, chẳng hạn như SwipeDismissableNavHost

Bạn khai báo một AppScaffold cho Hoạt động và sử dụng ScreenScaffold cho mỗi Màn hình.

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
    }
}

Nếu đang sử dụng HorizontalPager với HorizontalPagerIndicator, bạn có thể di chuyển sang HorizontalPagerScaffold. HorizontalPagerScaffold được đặt trong AppScaffold. AppScaffold và HorizontalPagerScaffold trình bày cấu trúc của một Trình chuyển trang và điều phối các quá trình chuyển đổi của các thành phần HorizontalPageIndicator và TimeText.

Theo mặc định, HorizontalPagerScaffold hiển thị HorizontalPageIndicator ở cuối màn hình và điều phối việc hiển thị/ẩn TimeText và HorizontalPageIndicator tuỳ thuộc vào việc Pager có được phân trang hay không, điều này do PagerState xác định.

Ngoài ra, còn có một thành phần AnimatedPage mới tạo ảnh động cho một trang trong Pager với hiệu ứng điều chỉnh theo tỷ lệ và hiệu ứng scrim dựa trên vị trí của trang đó.

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 {
…
   }
}

Cuối cùng, M3 giới thiệu VerticalPagerScaffold tuân theo cùng một mẫu như HorizontalPagerScaffold:

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 {
        …
   }
}

Phần giữ chỗ

Có một số thay đổi về API giữa M2.5 và M3. Placeholder.PlaceholderDefaults hiện cung cấp hai đối tượng sửa đổi:

• Modifier.placeholder được vẽ thay vì nội dung chưa được tải
• Hiệu ứng ánh sáng lấp lánh của phần giữ chỗ Modifier.placeholderShimmer cung cấp hiệu ứng ánh sáng lấp lánh của phần giữ chỗ chạy trong một vòng lặp ảnh động trong khi chờ tải dữ liệu.

Hãy xem phần bên dưới để biết các thay đổi khác đối với thành phần Placeholder.

SwipeDismissableNavHost

SwipeDismissableNavHost là một phần của wear.compose.navigation. Khi thành phần này được sử dụng với M3, MaterialTheme M3 sẽ cập nhật LocalSwipeToDismissBackgroundScrimColor và LocalSwipeToDismissContentScrimColor.

TransformingLazyColumn

TransformingLazyColumn là một phần của wear.compose.lazy.foundation và thêm tính năng hỗ trợ điều chỉnh tỷ lệ và biến đổi ảnh động trên các mục trong danh sách trong khi cuộn, giúp nâng cao trải nghiệm người dùng.

Tương tự như ScalingLazyColumn, lớp này cung cấp rememberTransformingLazyColumnState() để tạo TransformingLazyColumnState được ghi nhớ trên các thành phần.

Để thêm ảnh động điều chỉnh theo tỷ lệ và biến đổi, hãy thêm nội dung sau vào từng mục trong danh sách:

• Modifier.transformedHeight cho phép bạn tính chiều cao đã chuyển đổi của các mục bằng cách sử dụng TransformationSpec, bạn có thể sử dụng rememberTransformationSpec() trừ phi cần tuỳ chỉnh thêm.
• 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")
                    }
                }
            }
        }
    }

Đường liên kết hữu ích

Để tìm hiểu thêm về việc di chuyển từ M2.5 sang M3 trong Compose, hãy tham khảo các tài nguyên khác sau đây.

Mẫu

Mẫu Wear OS trong nhánh Material3 trên GitHub

Lớp học lập trình về Compose cho Wear OS

Tài liệu tham khảo API và mã nguồn

• Tài liệu tham khảo về API của Compose Material 3
• Mẫu Compose Material 3 trong mã nguồn

Thiết kế

• Hướng dẫn thiết kế