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, 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ới Text 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 trông đẹp mắt trên nhiều loại 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 = { }
            )
        }
    }
}
List.kt

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ữ

Ả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

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 mọi 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 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 ở 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:

  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 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ư được 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 trong trường hợp TimeText 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.