Phát triển thẻ thông tin cho nhiều kích thước màn hình

Thẻ thông tin của ứng dụng sẽ hoạt động tốt trên thiết bị Wear OS ở mọi kích thước, tận dụng thêm không gian nếu có sẵn 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 đư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ế.

Xây dựng bố cục thích ứng bằng ProtoLayout

Thư viện ProtoLayout Material cung cấp các bố cục được xác định trước để giúp bạn tạo thẻ thông tin. Các bố cục này đã được thiết kế để thích ứng với kích thước màn hình.

Hãy tham khảo Bố cục thiết kế Figma, trong đó minh hoạ các bố cục chuẩn có sẵn và cách xây dựng thiết kế bằng các bố cục đó:

• PrimaryLayout
• EdgeContentLayout
• MultiButtonLayout
• MultiSlotLayout

Đối với hầu hết các trường hợp sử dụng, bạn nên dùng PrimaryLayout hoặc EdgeContentLayout làm bố cục cấp cao nhất. Đặt hành vi thích ứng bằng cách sử dụng setResponsiveContentInsetEnabled, ví dụ:

PrimaryLayout.Builder(deviceParameters)
    .setResponsiveContentInsetEnabled(true)
    .setContent(
        // ...
    )
.build()

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:

PrimaryLayout.Builder(deviceParameters)
    .setResponsiveContentInsetEnabled(true)
    .setContent(
        MultiButtonLayout.Builder()
            .addButtonContent(button1)
            .addButtonContent(button2)
            .addButtonContent(button3)
            .apply {
                if (deviceParameters.screenHeightDp >= 225) {
                    addButtonContent(button4)
                    addButtonContent(button5)
                }
            }
            .build()
    )
    .setPrimaryLabelTextContent(label)
    .setPrimaryChipContent(compactChip)
    .build()

Hướng dẫn thiết kế sẽ minh hoạ các cơ hội khác.

Kiểm thử thẻ thông tin trên nhiều kích thước màn hình bằng Bản xem trước

Điều quan trọng là bạn phải kiểm thử bố cục trên nhiều kích thước màn hình. Sử dụng các chú giải Bản xem trước thẻ thông tin, cùng với các lớp TilePreviewHelper và TilePreviewData:

@Preview(device = WearDevices.LARGE_ROUND)
fun smallPreview(context: Context) = TilePreviewData(
    onTileRequest = { request ->
        TilePreviewHelper.singleTimelineEntryTileBuilder(
            buildLayout()
        ).build()
    }
)

Thao tác này cho phép bạn xem trước bố cục Thẻ thông tin ngay trong Android Studio. Ví dụ về điểm ngắt trước minh hoạ cách hiển thị các nút bổ sung khi không gian màn hình cho phép, khi được xem trước:

Để biết ví dụ đầy đủ, hãy xem mẫu thẻ thông tin nội dung trên GitHub.