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 thiết bị Wear OS ở mọi kích thước, chiếm tận dụng không gian bổ sung nếu có mà vẫn đẹp mắt trên màn hình nhỏ hơn màn hình. Hướng dẫn này đưa ra các đề xuất để tiếp cận người dùng này của bạn.

Để 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 định sẵn để giúp bạn tạo thẻ thông tin của bạn. Các bố cục này đã được thiết kế để thích ứng với màn hình kích thước.

Tham khảo Bố cục thiết kế Figma, trong đó minh hoạ quy tắc bố cục có sẵn và cách tạo thiết kế bằng cách sử dụng chúng:

Bạn nên sử dụng PrimaryLayout hoặc EdgeContentLayout làm cấp cao nhất cho hầu hết các trường hợp sử dụng. Đặ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

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

Để triển khai loại trải nghiệm khác biệt này, hãy sử dụng kích thước màn hình điểm ngắt. 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ế 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 Chú thích Xem trước thẻ thông tin, cùng với TilePreviewHelper và TilePreviewData lớp:

@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. Chiến lược phát hành đĩa đơn ví dụ về điểm ngắt trước đó minh hoạ cách các nút bổ sung được hiển thị khi không gian màn hình cho phép, khi xem trước:

Các nút bổ sung trên màn hình lớn hơn

Màn hình nhỏ và lớn cho thấy tác động của điểm ngắt

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