Ứng dụng của bạn phải hoạt động tốt trên các thiết bị Wear OS ở mọi kích thước, nhờ tận dụng được không gian bổ sung nếu có mà vẫn trông đẹp mắt trên các màn hình nhỏ hơn. Hướng dẫn này cung cấp các đề xuất để đạt được trải nghiệm người dùng này.
Để tìm hiểu thêm về các nguyên tắc thiết kế cho bố cục thích ứng, hãy đọc hướng dẫn thiết kế.
Tạo bố cục thích ứng bằng Horologist
Bố cục phải có lề dựa trên phần trăm. Vì Compose hoạt động theo mặc định trong các giá trị tuyệt đối, hãy sử dụng các thành phần từ Horologist Library có các tính năng sau:
- Lề ngang được đặt chính xác dựa trên tỷ lệ phần trăm màn hình thiết bị kích thước.
- Khoảng cách trên cùng và dưới cùng được đặt chính xác. Điều này đặt ra những thách thức cụ thể
vì khoảng cách được đề xuất trên cùng và dưới cùng có thể phụ thuộc vào các thành phần đang được
đã sử dụng. Ví dụ:
Chip
phải có khoảng cách khác vớiText
khi được sử dụng trong một danh sách. - Lề
TimeText
được đặt chính xác.
Đoạn mã sau đây sử dụng phiên bản của Horologist
Bố cục ScalingLazyColumn
để tạo nội dung đẹp mắt trên nhiều dạng thức
kích thước màn hình Wear OS:
val columnState = rememberResponsiveColumnState( contentPadding = ScalingLazyColumnDefaults.padding( first = ScalingLazyColumnDefaults.ItemType.Text, last = ScalingLazyColumnDefaults.ItemType.SingleButton ) ) ScreenScaffold(scrollState = columnState) { ScalingLazyColumn( columnState = columnState ) { item { ResponsiveListHeader(contentPadding = firstItemPadding()) { Text(text = "Header") } } // ... other items item { Button( imageVector = Icons.Default.Build, contentDescription = "Example Button", onClick = { } ) } } }
Ví dụ này cũng minh hoạ ScreenScaffold
và AppScaffold
.
Sự phối hợp giữa Ứng dụng và các màn hình riêng lẻ
(tuyến đường điều hướng) để đảm bảo hành vi cuộn chính xác và
Định vị TimeText
.
Đối với khoảng đệm trên cùng và dưới cùng, hãy lưu ý những điều sau:
- Thông số kỹ thuật của
ItemType
đầu tiên và cuối cùng để xác định đúng khoảng đệm. - Việc sử dụng
ResponsiveListHeader
cho mục đầu tiên trong danh sách, vì Tiêu đềText
không được có khoảng đệm.
Bạn có thể xem thông số kỹ thuật đầy đủ trong Bộ công cụ thiết kế Figma. Để biết thêm chi tiết và ví dụ, hãy xem:
- Thư viện Horologist – cung cấp các thành phần giúp xây dựng được tối ưu hoá và khác biệt cho Wear OS.
- Mẫu ComposeStarter – một ví dụ cho thấy các nguyên tắc được nêu trong hướng dẫn này.
- Mẫu JetCaster - một ví dụ phức tạp hơn về cách tạo ứng dụng của mình để hoạt động với nhiều kích thước màn hình bằng cách sử dụng thư viện Horologist.
Dùng bố cục cuộn trong ứng dụng
Sử dụng bố cục cuộn, như minh hoạ trước đó trên trang này, làm lựa chọn mặc định khi triển khai các màn hình. Điều này cho phép người dùng truy cập các thành phần trong ứng dụng của bạn bất kể lựa chọn ưu tiên về hiển thị hay kích thước màn hình của thiết bị Wear OS.
![Ảnh hưởng của việc thay đổi kích thước thiết bị và việc điều chỉnh tỷ lệ phông chữ](https://developer.android.com/static/images/wear/screenshot-test.png?authuser=5&hl=vi)
Ảnh hưởng của các kích thước thiết bị khác nhau và điều chỉnh tỷ lệ phông chữ.
Hộp thoại
Hộp thoại cũng nên cuộn được, trừ phi có lý do chính đáng để bạn không nên cuộn.
Thành phần ResponsiveDialog
do Horologist cung cấp sẽ thêm
sau:
- Cuộn theo mặc định.
- Chỉnh sửa lề dựa trên phần trăm.
- Các nút điều chỉnh chiều rộng của chúng ở những nơi có khoảng trống để mang lại kích thước lớn hơn mục tiêu nhấn.
![Hành vi của hộp thoại thích ứng trong Horologist](https://developer.android.com/static/images/wear/adaptive-dialogs.png?authuser=5&hl=vi)
Hộp thoại thích ứng, cung cấp chức năng cuộn theo mặc định và các nút điều chỉnh vào dung lượng còn trống.
Màn hình tuỳ chỉnh có thể yêu cầu bố cục không cuộn
Một số màn hình có thể vẫn phù hợp với bố cục không cuộn. Một số ví dụ bao gồm màn hình trình phát chính trong ứng dụng đa phương tiện và màn hình tập thể dục trong một ứng dụng thể dục.
Trong những trường hợp này, hãy xem hướng dẫn chuẩn trong Bộ công cụ thiết kế Figma và triển khai thiết kế thích ứng với kích thước màn hình bằng cách sử dụng lề chính xác.
Mang đến trải nghiệm khác biệt thông qua các điểm ngắt
Với màn hình lớn hơn, bạn có thể giới thiệu thêm nội dung và tính năng. Người nhận hãy triển khai loại trải nghiệm khác biệt này, sử dụng điểm ngắt kích thước màn hình, hiển thị một bố cục khác khi kích thước màn hình vượt quá 225 dp:
const val LARGE_DISPLAY_BREAKPOINT = 225 @Composable fun isLargeDisplay() = LocalConfiguration.current.screenWidthDp >= LARGE_DISPLAY_BREAKPOINT // ... // ... use in your Composables: if (isLargeDisplay()) { // Show additional content. } else { // Show content only for smaller displays. } // ...
Hướng dẫn thiết kế minh hoạ nhiều cơ hội trong số này.
Thử nghiệm sự kết hợp giữa kích thước màn hình và phông chữ bằng cách sử dụng bản xem trước
Tính năng Xem trước Compose giúp bạn phát triển ứng dụng cho nhiều kích thước màn hình Wear OS. Sử dụng cả định nghĩa bản xem trước điều chỉnh tỷ lệ phông chữ và thiết bị để xem những nội dung sau:
- Cách màn hình xem xét các cực trị về kích thước, ví dụ: phông chữ lớn nhất được ghép nối với màn hình nhỏ nhất.
- Cách hoạt động của trải nghiệm khác biệt trên các điểm ngắt.
Đảm bảo bạn triển khai bản xem trước bằng cách sử dụng WearPreviewDevices
và
WearPreviewFontScales
cho tất cả các màn hình trong ứng dụng.
@WearPreviewDevices @WearPreviewFontScales @Composable fun ComposeListPreview() { ComposeList() }
Kiểm thử ảnh chụp màn hình
Ngoài thử nghiệm xem trước, thử nghiệm ảnh chụp màn hình cho phép bạn thử nghiệm với hàng loạt kích thước phần cứng hiện có. Điều này đặc biệt hữu ích khi các thiết bị đó có thể không có sẵn ngay cho bạn và vấn đề có thể không xuất hiện các kích thước màn hình khác.
Việc kiểm thử ảnh chụp màn hình cũng giúp bạn xác định sự hồi quy tại các vị trí cụ thể ở cơ sở mã của bạn.
Các mẫu của chúng tôi sử dụng Roborazzi để kiểm thử ảnh chụp màn hình:
- Định cấu hình tệp dự án và tệp ứng dụng
build.gradle
để sử dụng Roborazzi. - Tạo chương trình kiểm thử ảnh chụp màn hình cho từng màn hình bạn có trong ứng dụng. Ví dụ:
trong mẫu ComposeStarter, kiểm thử cho
GreetingScreen
là được triển khai như trongGreetingScreenTest
:
@RunWith(ParameterizedRobolectricTestRunner::class)
class GreetingScreenTest(override val device: WearDevice) : WearScreenshotTest() {
override val tolerance = 0.02f
@Test
fun greetingScreenTest() = runTest {
AppScaffold(
timeText = { ResponsiveTimeText(timeSource = FixedTimeSource) }
) {
GreetingScreen(greetingName = "screenshot", onShowList = {})
}
}
companion object {
@JvmStatic
@ParameterizedRobolectricTestRunner.Parameters
fun devices() = WearDevice.entries
}
}
Một số điểm quan trọng cần lưu ý:
FixedTimeSource
cho phép bạn tạo ảnh chụp màn hình trong trường hợpTimeText
không có thay đổi và vô tình làm cho thử nghiệm không thành công.WearDevice.entries
chứa định nghĩa về các thiết bị Wear OS phổ biến nhất, vì vậy, các bài kiểm thử được chạy trên một phạm vi kích thước màn hình đại diện.
Tạo hình ảnh vàng
Để tạo hình ảnh cho màn hình của bạn, hãy chạy lệnh sau trong một cửa sổ dòng lệnh:
./gradlew recordRoborazziDebug
Xác minh hình ảnh
Để xác minh các thay đổi đối với hình ảnh hiện có, hãy chạy lệnh sau trong ga:
./gradlew verifyRoborazziDebug
Để biết ví dụ đầy đủ về kiểm thử ảnh chụp màn hình, hãy xem mẫu ComposeStarter.