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
- Á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.5.0-beta05")
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 trong thư viện Wear Compose Navigation có ảnh động mới 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 các thư viện Wear Compose Foundation và Navigation:
implementation("androidx.wear.compose:compose-foundation:1.5.0-beta05")
implementation("androidx.wear.compose:compose-navigation:1.5.0-beta05")
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.
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
)
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 |
|---|---|
|
đã được đổi tên thành |
13 màu |
28 màu |
Không áp dụng |
giao diện màu động mới |
Không áp dụng |
các 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 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ữ 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. Đây là những thành phần được nhiều thành phần M3 sử dụng theo mặc định.
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. 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:
- Quá nhỏ
- Nhỏ
- Trung bình
- Lớn
- Rất lớn
Trong Compose, điều này áp dụng cho lớp Shapes của M2 và lớp Shapes của M3:
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 ánh xạ tham số Hình dạng trong phần Di chuyển từ Material 2 sang Material 3 trong Compose làm điểm bắt đầu.
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 bên dưới:
Nút |
Chức năng biến đổi hình dạng |
|---|---|
|
IconButtonDefaults.animatedShape() tạo hiệu ứng cho nút biểu tượng khi nhấn |
|
IconToggleButtonDefaults.animatedShape() tạo hiệu ứng cho nút bật/tắt biểu tượng khi nhấn và IconToggleButtonDefaults.variantAnimatedShapes() tạo hiệu ứng cho nút bật/tắt biểu tượng khi nhấn và đánh dấu/bỏ đánh dấu |
|
TextButtonDefaults.animatedShape() tạo hiệu ứng cho nút văn bản khi nhấn |
|
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 trong Material 3:
Material 3 |
Thành phần tương đương Material 2.5 (nếu không phải là thành phần mới trong M3) |
|---|---|
Mới |
|
Mới |
|
android.wear.compose.material.Scaffold (với androidx.wear.compose.material3.ScreenScaffold) |
|
Mới |
|
androidx.wear.compose.material.ToggleChip có chế độ bật/tắt hộp đánh dấu |
|
androidx.wear.compose.material.Chip (chỉ khi không cần nền) |
|
Mới |
|
Mới |
|
Mới |
|
androidx.wear.compose.material.Chip khi cần có nền nút có nhiều sắc độ màu |
|
Mới |
|
Mới |
|
Mới |
|
Mới |
|
Mới |
|
androidx.wear.compose.material.ToggleChip có nút bật/tắt nút chọn |
|
android.wear.compose.material.Scaffold (với androidx.wear.compose material3.AppScaffold) |
|
androidx.wear.compose.material3.SegmentedCircularProgressIndicator |
Mới |
androidx.wear.compose.material.SwipeToRevealCard và androidx.wear.compose.material.SwipeToRevealChip |
|
androidx.wear.compose.material.ToggleChip có chế độ điều khiển bật/tắt công tắc |
|
Mới |
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 phiên bản 1.5.0-beta01:
Wear Compose Foundation 1.5.0-beta |
|
|---|---|
Đượ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. |
|
Một trình phâ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. |
|
Một trình phâ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. |
|
Có thể dùng thay cho ScalingLazyColumn để thêm hiệu ứng biến đổi khi cuộn cho 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
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 ra mắt một nút mới: EdgeButton. EdgeButton có 4 kích thước: siêu 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 mà bạn 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 để biết 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ộ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.
M2.5
import androidx.wear.compose.material.Scaffold
Scaffold {...}
M3
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 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/ẩn TimeText và HorizontalPageIndicator theo việc Pager có được phân trang hay không, điều 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.
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 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 của phần giữ chỗ
Modifier.placeholderShimmercung cấp hiệu ứng ánh sáng của phần 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ên dưới để biết những thay đổi khác đối với thành phần Placeholder.
M2.5 |
M3 |
|---|---|
|
Đã bị xoá |
|
Đã bị xoá |
|
Đã đổi tên thành |
|
Đã bị xoá |
|
đã bị xoá |
|
Đã bị xoá |
|
Đã 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.
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 đã biế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
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
- Các mẫu Wear OS trong nhánh Material3 trên GitHub
- Lớp học lập trình về Compose cho Wear OS
- Mẫu Jetcaster