Phát triển ứng dụng cho nhiều kích thước màn hình

Ứ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 được nhiều không gian hơn (nếu có) và vẫn hiển thị tố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 với các giá trị tuyệt đối thay vào đó, hãy sử dụng các thành phần trong Thư viện Horologist, trong đó có những tính năng sau:

  • Lề ngang được đặt chính xác dựa trên tỷ lệ phần trăm kích thước màn hình thiết bị.
  • 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 trên cùng và dưới cùng được đề xuất 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ới thành phần Text khi được sử dụng trong danh sách.
  • Lề TimeText được đặt chính xác.

Đoạn mã sau đây sử dụng phiên bản bố cục ScalingLazyColumn của Horologist để tạo nội dung trông đẹp mắt trên nhiều kích thước màn hình Wear OS:

import com.google.android.horologist.compose.layout.ScalingLazyColumn

val columnState = rememberResponsiveColumnState(
    contentPadding = ScalingLazyColumnDefaults.padding(
        first = ItemType.Text,
        last = ItemType.SingleButton
    )
)

ScreenScaffold(scrollState = columnState) {
    ScalingLazyColumn(
        columnState = columnState,
        modifier = Modifier.fillMaxSize()
    ) {
        item {
            ResponsiveListHeader(contentPadding = firstItemPadding()) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(...)
        }
    }
}

Ví dụ này cũng minh hoạ ScreenScaffold]3 và AppScaffold. Các toạ độ này giữa Ứng dụng và các màn hình riêng lẻ (các tuyến điều hướng) để đảm bảo hành vi cuộn chính xác và vị trí 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 thông tin 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ác ứng 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 một ứ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.

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 các màn hình của bạn. Đ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 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ữ

Tác động của nhiều kích thước thiết bị và việc đ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 như 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 khi không gian cho phép, để tăng mục tiêu nhấn.
Hành vi của hộp thoại thích ứng trong Horologist

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 cho phù hợp với không gian có sẵ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 có thể vẫn phù hợp với bố cục không cuộn. Có thể kể đến một số ví dụ như 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 hoá được cung cấp trong Bộ công cụ thiết kế Figma và triển khai một thiết kế đáp ứng với kích thước của 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. Để 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.
}

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ụ: cặp phông chữ lớn nhất 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.

Hãy đả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ả màn hình trong ứng dụng.

@WearPreviewDevices
@WearPreviewFontScales
@Composable
fun ListScreenPreview() {
    ListScreen()
}

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

Ngoài việc kiểm thử bản xem trước, việc kiểm thử ảnh chụp màn hình còn cho phép bạn kiểm thử trên nhiều 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 cho bạn ngay 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.

Việc kiểm thử ảnh chụp màn hình cũng giúp bạn xác định các lần hồi quy tại các vị trí cụ thể trong cơ sở mã của mình.

Các mẫu của chúng tôi sử dụng Roborazzi để kiểm thử ảnh chụp màn hình:

  1. Định cấu hình tệp dự án và tệp ứng dụng build.gradle để sử dụng Roborazzi.
  2. Tạo một bài kiểm thử ảnh chụp màn hình cho từng màn hình trong ứng dụng của bạn. Ví dụ: trong mẫu ComposeStarter, quy trình kiểm thử cho GreetingScreen được triển khai như bạn thấy trong GreetingScreenTest:
@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 mà trong đó TimeText không thay đổi và vô tình khiến kiểm thử không thành công.
  • WearDevice.entries chứa định nghĩa cho hầu hết các thiết bị Wear OS phổ biến để chạy các bài kiểm thử trên phạm vi kích thước màn hình tiêu biểu.

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 một điểm cuối:

./gradlew verifyRoborazziDebug

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