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 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 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 để biết các bố cục chuẩn có sẵn và cách tạo 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()

Cung cấp trải nghiệm khác biệt thông qua các điểm ngắt

Các bố cục trong thư viện ProtoLayout Material đã có tính thích ứng và chú ý đến vị trí cũng như chế độ hiển thị chính xác của phần tử. Tuy nhiên, trong một số trường hợp, bạn nên thay đổi số lượng thành phần hiển thị để đạt được kết quả tốt nhất. Ví dụ: bạn có thể muốn có 3 nút trên màn hình nhỏ hơn và 5 nút trên màn hình lớn hơn.

Để 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. Cách 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ế minh hoạ thêm 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

Bạn cần phải kiểm thử bố cục trên nhiều kích thước màn hình. Sử dụng chú giải Preview Tile (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()
    }
)

Điều 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 các nút bổ sung hiển thị khi không gian màn hình cho phép, khi xem trước:

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