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

Các ô của ứng dụng phải hoạt động hiệu quả trên 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 cả màn hình nhỏ. 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ế.

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ó khả năng thích ứng và đảm bảo vị trí cũng như khả năng hiển thị chính xác của các phần tử. 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. Ví dụ: bạn có thể muốn 3 nút trên màn hình nhỏ và 5 nút trên màn hình lớn.

Để triển khai loại trải nghiệm khác biệt này, hãy sử dụng các điểm ngắt kích thước màn hình. Để hiện một bố cục khác khi kích thước màn hình vượt quá 225 dp, hãy làm như sau:

materialScope(this, requestParams.deviceConfiguration) {
    // ...
    val isLargeScreen = deviceConfiguration.screenWidthDp >= 225
    primaryLayout(
        mainSlot = {
            buttonGroup {
                buttonGroupItem { button1 }
                buttonGroupItem { button2 }
                buttonGroupItem { button3 }
                if (isLargeScreen) {
                    buttonGroupItem { button4 }
                    buttonGroupItem { button5 }
                }
            }
        }
    )
}
Tile.kt

Hướng dẫn thiết kế minh hoạ các cơ hội bổ sung.

Kiểm thử các ô trên nhiều kích thước màn hình bằng tính năng Xem trước

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

@Preview(device = WearDevices.LARGE_ROUND)
fun smallPreview(context: Context) = TilePreviewData {
    TilePreviewHelper.singleTimelineEntryTileBuilder(
        materialScope(context, it.deviceConfiguration) {
            myAdaptiveLayout() // varies the layout depending on the size of the screen
        }
    )
        .build()
}
Tile.kt

Nhờ đó, bạn có thể xem trước bố cục Thẻ thông tin ngay trong Android Studio.

Để xem ví dụ đầy đủ, hãy xem mẫu ô hẹn giờ trên GitHub.