Trang này được dịch bởi Cloud Translation API.

Phát triển ứng dụng cho nhiều kích thước màn hình
Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

Compose for Wear OS Material phiên bản

Ứ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, tận dụng không gian bổ sung (nếu có) và vẫn trông đẹp mắt trên màn hình nhỏ hơn. Hướng dẫn này đưa ra 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 Material 3

Bố cục phải có lề dựa trên tỷ lệ phần trăm. Vì Compose hoạt động theo mặc định ở các giá trị tuyệt đối, hãy sử dụng rememberResponsiveColumnPadding từ Thư viện Horologist để tính khoảng đệm và truyền khoảng đệm đó đến tham số contentPadding của ScreenScaffold và tham số contentPadding của TransformingLazyColumn.

Đoạn mã sau đây sử dụng thành phần TransformingLazyColumn để tạo nội dung trông đẹp mắt trên nhiều kích thước màn hình Wear OS:

val columnState = rememberTransformingLazyColumnState()
val contentPadding = rememberResponsiveColumnPadding(
    first = ColumnItemType.ListHeader,
    last = ColumnItemType.Button,
)
val transformationSpec = rememberTransformationSpec()
ScreenScaffold(
    scrollState = columnState,
    contentPadding = contentPadding
) { contentPadding ->
    TransformingLazyColumn(
        state = columnState,
        contentPadding = contentPadding
    ) {
        item {
            ListHeader(
                modifier = Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
                transformation = SurfaceTransformation(transformationSpec)
            ) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                modifier = Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
                transformation = SurfaceTransformation(transformationSpec),
                onClick = { /* ... */ },
                icon = {
                    Icon(
                        imageVector = Icons.Default.Build,
                        contentDescription = "build",
                    )
                },
            ) {
                Text(
                    text = "Build",
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis,
                )
            }
        }
    }
}List.kt

Ví dụ này cũng minh hoạ ScreenScaffold và AppScaffold. Các thành phần này phối hợp giữa Ứng dụng và từng màn hình (tuyến điều hướng) để đảm bảo hành vi cuộn và vị trí TimeText chính xác.

Đố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 khoảng đệm chính xác.
Sử dụng ListHeader 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 thông tin chi tiết và ví dụ, hãy xem:

Thư viện Horologist – cung cấp các trình trợ giúp để giúp tạo các ứng dụng được tối ưu hoá và khác biệt cho Wear OS.
Mẫu ComposeStarter – một ví dụ minh hoạ 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 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.

Sử dụng bố cục cuộn trong ứng dụng

Sử dụng bố cục cuộn, như đã trình bày trước đó trên trang này, làm lựa chọn mặc định khi triển khai màn hình. Điều này cho phép người dùng truy cập vào các thành phần của ứng dụng bất kể lựa chọn ưu tiên về màn hình hoặc kích thước màn hình thiết bị Wear OS.

Ảnh hưởng của kích thước thiết bị và tỷ lệ phông chữ khác nhau

Tác động của các kích thước thiết bị và tỷ lệ phông chữ khác nhau.

Hộp thoại

Hộp thoại cũng phải có thể cuộn được, trừ phi có lý do rất chính đáng. Thành phần AlertDialog có khả năng thích ứng và có thể cuộn theo mặc định nếu nội dung vượt quá chiều cao khung nhìn.

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 vẫn có thể 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 ứng dụng thể dục.

Trong những trường hợp này, hãy xem hướng dẫn chuẩn được cung cấp trong bộ thiết kế Figma và triển khai một thiết kế thích ứng với kích thước màn hình, sử dụng đúng lề.

Cung cấp 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. Để triển khai loại trải nghiệm khác biệt này, hã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.
    }
    // ...List.kt

Hướng dẫn thiết kế minh hoạ thêm về những cơ hội này.

Kiểm thử các tổ hợp kích thước màn hình và phông chữ bằng bản xem trước

Bản xem trước trong 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 xem trước về thiết bị và tỷ lệ phông chữ để xem những nội dung sau:

Màn hình của bạn trông như thế nào ở kích thước cực đại, ví dụ: phông chữ lớn nhất ghép nối với màn hình nhỏ nhất.
Cách trải nghiệm khác biệt của bạn hoạt động trên các điểm ngắt.

Đảm bảo bạn triển khai bản xem trước bằng WearPreviewDevices và WearPreviewFontScales cho tất cả màn hình trong ứng dụng.

@WearPreviewDevices
@WearPreviewFontScales
@Composable
fun ComposeListPreview() {
    ComposeList()
}List.kt

Kiểm thử ảnh chụp màn hình

Ngoài việc kiểm thử bản xem trước, tính năng kiểm thử ảnh chụp màn hình cho phép bạn kiểm thử trên một loạt kích thước phần cứng hiện có. Điều này đặc biệt hữu ích khi bạn không thể sử dụng các thiết bị đó ngay lập tức và vấn đề có thể không xuất hiện trên các kích thước màn hình khác.

Kiểm thử ảnh chụp màn hình cũng giúp bạn xác định các trường hợp hồi quy tại các vị trí cụ thể trong cơ sở mã.

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 build.gradle của dự án và ứng dụng để sử dụng Roborazzi.
Tạo 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 được triển khai như trong GreetingScreenTest:

@RunWith(ParameterizedRobolectricTestRunner::class)
class GreetingScreenTest(override val device: WearDevice) : WearScreenshotTest() {
    override val tolerance = 0.02f

    @Test
    fun greetingScreenTest() = runTest {
        AppScaffold {
            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 ý:

WearDevice.entries chứa các định nghĩa cho hầu hết các thiết bị Wear OS phổ biến để các bài kiểm thử 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, hãy chạy lệnh sau trong một thiết bị đầu cuối:

./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 một thiết bị đầu cuối:

./gradlew verifyRoborazziDebug

Để xem ví dụ đầy đủ về kiểm thử ảnh chụp màn hình, hãy xem mẫu ComposeStarter.

Phát triển ứng dụng cho nhiều kích thước màn hình Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.