Kafelki aplikacji powinny dobrze działać na urządzeniach z Wear OS o każdym rozmiarze, a przy tym powinny zajmować więcej miejsca, a przy tym świetnie wyglądać na mniejszych ekranach. Ten przewodnik zawiera zalecenia, które pomogą Ci zadbać o wygodę użytkowników.
Aby dowiedzieć się więcej o zasadach projektowania układów adaptacyjnych, przeczytaj wskazówki dotyczące projektowania.
Tworzenie układów elastycznych za pomocą ProtoLayout
Biblioteka materiałów ProtoLayout zawiera wstępnie zdefiniowane układy, które ułatwiają tworzenie kafelków. Układy te są już zaprojektowane tak, aby dopasowywał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:
W większości przypadków zalecamy stosowanie PrimaryLayout lub EdgeContentLayout jako układów najwyższego poziomu. Ustaw zachowanie elastyczniejsze za pomocą parametru setResponsiveContentInsetEnabled, na przykład:
PrimaryLayout.Builder(deviceParameters)
.setResponsiveContentInsetEnabled(true)
.setContent(
// ...
)
.build()
Zapewnianie zróżnicowanych doświadczeń dzięki punktom przerwania
Dzięki większym wyświetlaczom możesz udostępniać dodatkowe treści i funkcje. Aby wdrożyć takie zróżnicowane środowisko, użyj punktów przerwania rozmiaru ekranu, które pokazują 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 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()
}
)
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 wyświetlają się, gdy pozwala na to przestrzeń na ekranie:
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.