Twórz kafelki na różne rozmiary ekranu

Płytki aplikacji powinny dobrze działać na urządzeniach z Wear OS o dowolnym rozmiarze, wykorzystując dodatkową przestrzeń tam, gdzie jest ona dostępna, i nadal dobrze wyglądać na mniejszych ekranach. W tym przewodniku znajdziesz zalecenia 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 artykułami na temat układów projektowania Figmy, które pokazują dostępne układy kanoniczne i sposób tworzenia projektu przy ich użyciu:

• PrimaryLayout
• EdgeContentLayout
• MultiButtonLayout
• MultiSlotLayout

W przypadku większości zastosowań zalecamy stosowanie układów wyższego poziomu PrimaryLayout lub EdgeContentLayout. Ustaw zachowanie w reakcji na setResponsiveContentInsetEnabled, na przykład:

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 w celu uzyskania najlepszych wyników może się jednak okazać, że liczba widocznych elementów jest inna. 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:

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()

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

Przetestuj kafelki na ekranach o różnych rozmiarach za pomocą podglądu

Ważne jest, aby przetestować układy na ekranach o różnych rozmiarach. Użyj adnotacji podglądu kafelków wraz z klasami TilePreviewHelper i TilePreviewData:

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

Pozwala to wyświetlać podgląd układów kafelków bezpośrednio w Android Studio. Poprzedni przykład punktów granicznych pokazuje, jak dodatkowe przyciski są wyświetlane, gdy pozwala na to miejsce na ekranie:

Pełny przykład znajdziesz w przykładzie kafelków multimediów na GitHubie.