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á, 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 các ứ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 Compose Material cho điện thoại, cụ thể là:
- Về lâu dài, bạn không nên sử dụng cả M2.5 và M3 trong một ứng dụng.
- Bạn không nên sử dụng các thư viện Horologist Composables, Compose Layout hoặc Compose Material nữa. Thay vào đó, hãy sử dụng các thành phần trong M3.
- Á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:
M2.5
implementation("androidx.wear.compose:compose-material:1.4.0")
M3
implementation("androidx.wear.compose:compose-material3:1.7.0-alpha01")
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.7.0-alpha01 đã 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 Wear Compose Navigation có một ảnh động mới khi chạy trên Wear OS 6 (cấp độ API 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 các thư viện Wear Compose Foundation và Navigation:
implementation("androidx.wear.compose:compose-foundation:1.7.0-alpha01")
implementation("androidx.wear.compose:compose-navigation:1.7.0-alpha01")
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 ra mắt để triển khai các hiệu ứng chuyển đổi.
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 = ColorScheme(), typography = Typography(), shapes = Shapes(), motionScheme = MotionScheme.standard(), content = { /*content here*/ } )
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:
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 )
Bảng sau đây mô tả những điểm khác biệt chính giữa M2.5 và M3:
| M2.5 | M3 |
|---|---|
Color |
Đã đổi tên thành ColorScheme |
| 13 màu | 28 màu |
| Không áp dụng | Giao diện màu động mới |
| Không áp dụng | Màu cấp ba mới để thể hiện nhiều hơn |
Tạo 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ồ, màu sắc trong giao diện người dùng cũng sẽ thay đổi cho phù hợp.
Dùng hàm dynamicColorScheme để triển khai bảng phối màu linh động và cung cấp defaultColorScheme làm phương án dự phòng trong trường hợp bảng phối màu linh động không dùng được.
@Composable fun myApp() { val dynamicColorScheme = dynamicColorScheme(LocalContext.current) MaterialTheme(colorScheme = dynamicColorScheme ?: myBrandColors) {} } internal val myBrandColors: ColorScheme = ColorScheme( /* Specify colors here */)
Kiểu chữ
Hệ thống kiểu chữ trong M3 khác với M2.5 và bao gồm các tính năng sau:
- 9 kiểu văn bản mới
- Phông chữ linh hoạt, cho phép tuỳ chỉnh các thang kiểu chữ cho nhiều độ đậm, chiều rộng và độ tròn
AnimatedText, sử dụng phông chữ linh hoạt
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 )
Phông chữ linh hoạt
Phông chữ linh hoạt cho phép nhà thiết kế chỉ định chiều rộng và độ đậm của kiểu chữ cho các kích thước cụ thể.
Kiểu văn bản
Các TextStyle sau đây có trong M3. Theo mặc định, các thành phần M3 khác nhau sẽ sử dụng những thành phần này.
| Kiểu chữ | TextStyle |
|---|---|
| Màn hình | displayLarge, displayMedium, displaySmall |
| Tiêu đề | titleLarge, titleMedium, titleSmall |
| Nhãn | labelLarge, labelMedium, labelSmall |
| Nội dung | bodyLarge, bodyMedium, bodySmall, bodyExtraSmall |
| Con số | numeralExtraLarge, numeralLarge, numeralMedium, numeralSmall, numeralExtraSmall |
| Arc | arcLarge, arcMedium, arcSmall |
Hình dạng
Hệ thống hình dạng trong M3 khác với M2.5. 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 M2 Shapes và lớp 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 )
Sử dụng mối liên kết tham số Hình dạng trong 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 giới thiệu tính năng Biến đổi hình dạng: giờ đây, các hình dạng sẽ 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 danh sách sau đây về các nút hỗ trợ hành vi Biến đổi hình dạng:
| Nút | Hàm biến đổi hình dạng |
|---|---|
IconButton |
IconButtonDefaults.animatedShape tạo hiệu ứng cho nút biểu tượng khi nhấn |
IconToggleButton |
IconToggleButtonDefaults.animatedShape tạo ảnh động cho nút bật/tắt biểu tượng khi nhấn và IconToggleButtonDefaults.variantAnimatedShapes tạo ảnh động cho nút bật/tắt biểu tượng khi nhấn và đánh dấu/bỏ đánh dấu |
TextButton |
TextButtonDefaults.animatedShape tạo hiệu ứng cho nút văn bản khi nhấn |
TextToggleButton |
TextToggleButtonDefaults.animatedShapes tạo hiệu ứng cho nút bật/tắt văn bản khi nhấn và TextToggleButtonDefaults.variantAnimatedShapes tạo hiệu ứng cho nút bật/tắt văn bản khi nhấn và đánh dấu/bỏ đánh dấu |
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 có 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:
Sau đây là danh sách đầy đủ tất cả các thành phần Material 3:
Và cuối cùng là danh sách một số thành phần có liên quan trong thư viện Wear Compose Foundation:
| Wear Compose Foundation 1.7.0-alpha01 | |
|---|---|
| androidx.wear.compose.foundation.hierarchicalFocusGroup | Được dùng để chú thích các thành phần kết hợp trong một ứng dụng, nhằm theo dõi phần đang hoạt động của thành phần và điều phối tiêu điểm. |
| androidx.wear.compose.foundation.pager.HorizontalPager | Một trình chuyển trang cuộn theo chiều ngang, được xây dựng dựa trên các thành phần Compose Foundation với các điểm cải tiến dành riêng cho Wear để cải thiện hiệu suất và tuân thủ các nguyên tắc của Wear OS. |
| androidx.wear.compose.foundation.pager.VerticalPager | Một trình chuyển trang cuộn theo chiều dọc, được xây dựng dựa trên các thành phần Compose Foundation với các điểm cải tiến dành riêng cho Wear để cải thiện hiệu suất và tuân thủ các nguyên tắc của Wear OS. |
| androidx.wear.compose.foundation.lazy.TransformingLazyColumn | Có thể dùng thay cho ScalingLazyColumn để thêm hiệu ứng biến đổi khi cuộn vào từng mục. |
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. Phương thứ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.
M2.5
import androidx.wear.compose.material.Chip
//M2.5 Buttons
Chip(...)
CompactChip(...)
Button(...)
M3
//M3 Buttons Button(onClick = { }){} CompactButton(onClick = { }){} IconButton(onClick = { }){} TextButton(onClick = { }){}
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 ra mắt một nút mới: EdgeButton. EdgeButton có 4 kích thước khác nhau: cực nhỏ, nhỏ, trung bình và lớn. Việc triển khai EdgeButton cung cấp giá trị mặc định cho maxLines tuỳ thuộc vào kích thước mà bạn có thể tuỳ chỉnh.
Nếu bạn đang sử dụng TransformingLazyColumn hoặc ScalingLazyColumn, hãy truyền EdgeButton vào ScreenScaffold để EdgeButton biến đổi, thay đổi hình dạng khi cuộn, thay vì thêm EdgeButton làm mục cuối cùng trong danh sách. Hãy xem mã sau đây để biết cách sử dụng EdgeButton với ScreenScaffold và TransformingLazyColumn.
val state = rememberTransformingLazyColumnState() ScreenScaffold( scrollState = state, contentPadding = rememberResponsiveColumnPadding( first = ColumnItemType.ListHeader ), edgeButton = { EdgeButton( onClick = { } ) { Text(stringResource(R.string.show)) } } ){ 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ột màn hình và điều phối các phép chuyển đổi của các thành phần ScrollIndicator và TimeText.
AppScaffold cho phép các phần tử tĩnh trên màn hì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 vị trí cho nội dung chính của ứng dụng, thường sẽ 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 một ScreenScaffold cho mỗi Màn hình.
AppScaffold sẽ thêm một thành phần TimeText mặc định vào các màn hình. Bạn có thể ghi đè giá trị này nếu muốn tuỳ chỉnh bằng cách sử dụng tham số timeText.
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 // ...
Nếu đang dùng HorizontalPager với HorizontalPagerIndicator, bạn có thể di chuyển sang HorizontalPagerScaffold. HorizontalPagerScaffold được đặt trong một AppScaffold. AppScaffold và HorizontalPagerScaffold bố trí cấu trúc của một Pager và điều phối các phép chuyển đổi của các thành phần HorizontalPageIndicator và TimeText.
Theo mặc định, HorizontalPagerScaffold hiển thị HorizontalPageIndicator ở giữa cuối màn hình và điều phối việc hiện và ẩn TimeText và HorizontalPageIndicator theo việc Pager có được phân trang hay không, việc này được xác định bằng PagerState.
Ngoài ra, còn có một thành phần AnimatedPage mới, thành phần này tạo ảnh động cho một trang trong Pager bằng hiệu ứng thu phóng và lớp phủ dựa trên vị trí của trang.
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") } } } } } } } }
Cuối cùng, M3 giới thiệu VerticalPagerScaffold theo cùng một mẫu như HorizontalPagerScaffold:
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 giữ chỗ
Modifier.placeholderShimmercung cấp hiệu ứng ánh sáng giữ chỗ chạy trong một vòng lặp ảnh động trong khi chờ dữ liệu tải.
Hãy xem bảng sau để biết thêm các thay đổi đối với thành phần Placeholder.
| M2.5 | M3 |
|---|---|
PlaceholderState.startPlaceholderAnimation |
Đã bị xoá |
PlaceholderState.placeholderProgression |
Đã bị xoá |
PlaceholderState.isShowContent |
Đã đổi tên thành !PlaceholderState.isVisible |
PlaceholderState.isWipeOff |
Đã bị xoá |
PlaceholderDefaults.painterWithPlaceholderOverlayBackgroundBrush |
Đã bị xoá |
PlaceholderDefaults.placeholderBackgroundBrush |
Đã bị xoá |
PlaceholderDefaults.placeholderChipColors |
Đã bị xoá |
SwipeDismissableNavHost
SwipeDismissableNavHost là một phần của wear.compose.navigation. Khi thành phần này được 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à bổ sung khả năng hỗ trợ cho việc mở rộng 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. Bạn nên di chuyển ứng dụng từ ScalingLazyColumn sang TransformingLazyColumn
Tương tự như ScalingLazyColumn, nó cung cấp rememberTransformingLazyColumnState() để tạo TransformingLazyColumnState được ghi nhớ trong các thành phần.
Để thêm ảnh động thu phóng 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 toán chiều cao đã chuyển đổi của các mục bằng cách sử dụngTransformationSpec, bạn có thể sử dụngrememberTransformationSpec()trừ phi bạn cần tuỳ chỉnh thêm.SurfaceTransformation
Để xác minh rằng khoảng đệm ở đầu và cuối danh sách là chính xác, hãy sử dụng đối tượng sửa đổi minimumVerticalContentPadding.
val columnState = rememberTransformingLazyColumnState() val transformationSpec = rememberTransformationSpec() ScreenScaffold( scrollState = columnState ) { contentPadding -> TransformingLazyColumn( state = columnState, contentPadding = contentPadding ) { item { ListHeader( modifier = Modifier .fillMaxWidth() .transformedHeight(this, transformationSpec) .minimumVerticalContentPadding(ListHeaderDefaults.minimumTopListContentPadding), transformation = SurfaceTransformation(transformationSpec) ) { Text(text = "Header") } } // ... other items item { Button( modifier = Modifier .fillMaxWidth() .transformedHeight(this, transformationSpec) .minimumVerticalContentPadding(ButtonDefaults.minimumVerticalListContentPadding), transformation = SurfaceTransformation(transformationSpec), onClick = { /* ... */ }, icon = { Icon( imageVector = Icons.Default.Build, contentDescription = "build", ) }, ) { Text( text = "Build", maxLines = 1, overflow = TextOverflow.Ellipsis, ) } } } }
Đườ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.