Twórz kafelki na różne rozmiary ekranu

Kafelki aplikacji powinny dobrze działać na urządzeniach z Wear OS każdej wielkości. zaletą dodatkowej przestrzeni, gdy jest dostępna, a przy tym świetnie wygląda na mniejszych także ekrany. Przewodnik zawiera zalecenia, które pomogą Ci zdobyć tego użytkownika z myślą o użytkownikach.

Aby dowiedzieć się więcej o zasadach projektowania układów adaptacyjnych, przeczytaj artykuł wskazówkami dotyczącymi projektowania.

Tworzenie układów elastycznych za pomocą ProtoLayout

Biblioteka materiałów ProtoLayout zawiera wstępnie zdefiniowane układy, i rozbuduj swoje kafelki. Te układy zostały już zaprojektowane tak, aby przystosowały się do ekranu rozmiaru.

znajdziesz w artykule Układy kanoniczne Figma, które pokazują wersję kanoniczną dostępne układy graficzne i sposoby tworzenia projektu przy ich użyciu:

• PrimaryLayout
• EdgeContentLayout
• MultiButtonLayout
• MultiSlotLayout

Zalecamy PrimaryLayout lub EdgeContentLayout jako najwyższy poziom. dla większości zastosowań. Ustaw zachowanie responsywne za pomocą setResponsiveContentInsetEnabled, na przykład:

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

Zapewnianie zróżnicowanych doświadczeń dzięki punktom przerwania

Układy z biblioteki ProtoLayout Material są już elastyczne, aby zadbać o prawidłowe rozmieszczenie i widoczność elementów. Jednak w niektórych przypadkach warto zmienić liczbę widocznych elementów, aby uzyskać najlepsze rezultaty. Dla: np. 3 przyciski na mniejszym wyświetlaczu i 5 na większym wyświetlacz.

Aby wdrożyć tego typu zróżnicowane środowisko, użyj rozmiaru ekranu punktów przerwania. Aby pokazać 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 pokazują dodatkowe możliwości.

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

Przetestuj układy na ekranach o różnych rozmiarach. Użyj Adnotacje podglądu kafelka wraz z atrybutami TilePreviewHelper i Zajęcia (TilePreviewData):

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

Dzięki temu możesz wyświetlać podgląd układów kafelków bezpośrednio w Android Studio. poprzedni przykład punktów przerwania pokazuje, jak dodatkowe przyciski są wyświetlane, gdy pozwala na to ilość miejsca na ekranie, na podglądzie:

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