Twórz kafelki na różne rozmiary ekranu

Kafelki aplikacji powinny dobrze działać na urządzeniach z Wear OS o różnych rozmiarach, wykorzystując dodatkową przestrzeń, gdy jest dostępna, a także dobrze wyglądać na mniejszych ekranach. W tym przewodniku znajdziesz rekomendacje dotyczące zapewnienia użytkownikom takich wrażeń.

Więcej informacji o zasadach projektowania układów adaptacyjnych znajdziesz w przewodniku po projektowaniu.

Zapewnianie zróżnicowanych wrażeń dzięki punktom przerwania

Układy z biblioteki ProtoLayout Material są elastyczne i zapewniają prawidłowe rozmieszczenie oraz widoczność elementów. W niektórych przypadkach możesz jednak chcieć zmieniać liczbę widocznych elementów, aby uzyskać jak najlepsze wyniki. Możesz na przykład chcieć mieć 3 przyciski na mniejszym wyświetlaczu i 5 na większym.

Aby wdrożyć takie zróżnicowane wrażenia, użyj punktów przerwania rozmiaru ekranu. Aby wyświetlić inny układ, gdy rozmiar ekranu przekracza 225 dp:

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

Wskazówki dotyczące projektowania pokazują dodatkowe możliwości.

Testowanie kafelków na ekranach o różnych rozmiarach za pomocą podglądów

Ważne jest, aby przetestować układy na ekranach o różnych rozmiarach. Użyj adnotacji Podgląd kafelka wraz z klasami TilePreviewHelper i 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

Dzięki temu możesz wyświetlać podgląd układów kafelków bezpośrednio w Android Studio.

Pełny przykład znajdziesz w przykładowych kafelkach timera w GitHubie.