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:
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:
![Dodatkowe przyciski na większych ekranach](https://developer.android.com/static/images/wear/tile-previews.png?authuser=7&hl=pl)
Małe i duże ekrany pokazujące efekt punktu przerwania
Pełny przykład znajdziesz w przykładzie kafelków multimediów na GitHubie.