Twórz kafelki na różne rozmiary ekranu

Płytki aplikacji powinny dobrze działać na urządzeniach z Wear OS o dowolnych rozmiarach, wykorzystując dodatkową przestrzeń, gdy jest dostępna, i nadal dobrze wyglądać na mniejszych ekranach. W tym przewodniku znajdziesz rekomendacje dotyczące tego typu wrażeń.

Aby dowiedzieć się więcej o zasadach projektowania układów dostosowywanych, przeczytaj wytyczne dotyczące projektowania.

Tworzenie elastycznych układów za pomocą ProtoLayout

Biblioteka ProtoLayout Material zawiera wstępnie zdefiniowane układy, które ułatwiają tworzenie kafelków. Te układy są już zaprojektowane tak, aby dostosowywały się do rozmiaru ekranu.

Zapoznaj się z projektami w programie Figma, które pokazują dostępne kanoniczne układy oraz sposób tworzenia projektu za ich pomocą:

W przypadku większości zastosowań zalecamy stosowanie układów wyższego poziomu PrimaryLayout lub EdgeContentLayout. Ustaw zachowanie elastyczne za pomocą setResponsiveContentInsetEnabled, np.:

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

Zapewnianie zróżnicowanych wrażeń za pomocą punktów przełamania

Układy z biblioteki ProtoLayout Material są już responsywne i dbają o prawidłowe umieszczenie oraz widoczność elementów. W niektórych przypadkach warto jednak zmienić liczbę widocznych elementów, aby uzyskać najlepsze wyniki. Na przykład na mniejszym ekranie możesz umieścić 3 przyciski, a na większym – 5.

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

materialScope(context, deviceConfiguration) {
    primaryLayout(
        mainSlot = {
            buttonGroup {
                buttonGroupItem { button1 }
                buttonGroupItem { button2 }
                buttonGroupItem { button3 }
                if (deviceConfiguration.screenHeightDp >= 225) {
                    buttonGroupItem { button4 }
                    buttonGroupItem { button5 }
                }
            }
        }
    )
}

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

Testowanie płytek na ekranach o różnych rozmiarach za pomocą podglądu

Ważne jest, aby testować układy na ekranach o różnych rozmiarach. Użyj adnotacji w ramach podglądu kafelków oraz klas TilePreviewHelper i TilePreviewData:

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

Dzięki temu możesz wyświetlić układy kafelków bezpośrednio w Android Studio. Poprzedni przykład punktów granicznych pokazuje, jak dodatkowe przyciski są wyświetlane, gdy pozwala na to przestrzeń na ekranie:

Dodatkowe przyciski na większych ekranach

Ekrany mały i duży pokazujące efekt punktu przecięcia

Pełny przykład znajdziesz na GitHubie w pliku z przykładem kafelków z multimediami.