Aplikacja powinna dobrze działać na wszystkich urządzeniach z Wear OS o różnych rozmiarach, wykorzystywać w miarę możliwości dodatkowe miejsce, a jednocześnie dobrze wyglądać na mniejszych ekranach. Ten przewodnik zawiera zalecenia, które pomogą Ci poprawić wrażenia 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ą aplikacji Horologist
Układy powinny mieć marże wyrażone w procentach. Funkcja tworzenia wiadomości działa domyślnie w przypadku wartości bezwzględnych, dlatego używaj komponentów z biblioteki Horologist, która ma te funkcje:
- Poziome marginesy są ustawiane prawidłowo na podstawie odsetka rozmiaru ekranu urządzenia.
- Odstępy u góry i u dołu są ustawione prawidłowo. Jest to szczególnie trudne, ponieważ zalecane odstępy między górną i dolną krawędzią mogą zależeć od używanych komponentów. Na przykład w elemencie
Chip
odstępy między komponentemText
a komponentem na liście powinny być inne. - Marginesy (
TimeText
) są ustawione prawidłowo.
Ten fragment kodu wykorzystuje wersję układu ScalingLazyColumn
określoną przez Horologist do tworzenia treści, które świetnie wyglądają na ekranach o różnych rozmiarach ekranu z Wear OS:
import com.google.android.horologist.compose.layout.ScalingLazyColumn
val columnState = rememberResponsiveColumnState(
contentPadding = ScalingLazyColumnDefaults.padding(
first = ItemType.Text,
last = ItemType.SingleButton
)
)
ScreenScaffold(scrollState = columnState) {
ScalingLazyColumn(
columnState = columnState,
modifier = Modifier.fillMaxSize()
) {
item {
ResponsiveListHeader(contentPadding = firstItemPadding()) {
Text(text = "Header")
}
}
// ... other items
item {
Button(...)
}
}
}
Ten przykład pokazuje również ScreenScaffold
]3 i AppScaffold
.
Są one koordynowane między aplikacją a poszczególnymi ekranami (trasy nawigacji), by zapewnić prawidłowe przewijanie i pozycjonowanie TimeText
.
Pamiętaj o tych kwestiach dotyczących dopełnienia u góry i na dole:
- Specyfikacja pierwszego i ostatniego elementu
ItemType
w celu określenia prawidłowego dopełnienia. - Użyj
ResponsiveListHeader
w przypadku pierwszego elementu na liście, ponieważ nagłówkiText
nie powinny mieć dopełnienia.
Pełną specyfikację znajdziesz w zestawach projektowych Figma. Więcej informacji i przykładów znajdziesz tutaj:
- Biblioteka Horologist zawiera komponenty, które pomagają tworzyć zoptymalizowane i zróżnicowane aplikacje na Wear OS.
- Przykład elementu ComposeStarter – przykład ilustrujący zasady opisane w tym przewodniku.
- Przykład z JetCaster – bardziej złożony przykład tworzenia aplikacji do pracy na ekranach o różnych rozmiarach przy użyciu biblioteki Horologist.
Używanie układów przewijania w aplikacji
Podczas wdrażania ekranów jako domyślny układ wybierz przewijany układ, jak pokazano wcześniej na tej stronie. Dzięki temu użytkownicy mogą korzystać z komponentów aplikacji niezależnie od ustawień wyświetlania czy rozmiaru ekranu urządzenia z Wear OS.
Efekt różnych rozmiarów urządzeń i skalowania czcionek.
Okna
Okna również powinny dać się przewijać, chyba że jest jakiś ważny powód.
Komponent ResponsiveDialog
udostępniony przez Horologist dodaje te elementy:
- Domyślnie przewijanie.
- Popraw marże wyrażone w procentach.
- Przyciski, które dostosowują swoją szerokość do dostępnego miejsca, zwiększając liczbę kliknięć.
Elastyczne okna, z domyślnie przewijaniem i przyciskami, które dostosowują się do dostępnego miejsca.
Ekrany niestandardowe mogą wymagać układów bez przewijania
Niektóre ekrany mimo to nadają się do układów bez przewijania. Kilka przykładów to ekran główny odtwarzacza w aplikacji do multimediów oraz ekran treningu w aplikacji fitness.
W takich przypadkach zapoznaj się ze wskazówkami kanonicznymi zawartymi w zestawach projektowych Figma i zaimplementuj projekt dostosowany do rozmiaru ekranu, stosując prawidłowe marginesy.
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:
const val LARGE_DISPLAY_BREAKPOINT = 225
@Composable
fun isLargeDisplay() = LocalConfiguration.current.screenWidthDp >= LARGE_DISPLAY_BREAKPOINT
// ... use in your Composables:
if (isLargeDisplay()) {
// Show additional content.
} else {
// Show content only for smaller displays.
}
Więcej takich możliwości przedstawiamy we wskazówkach dotyczących projektowania.
Testuj kombinacje rozmiarów ekranu i czcionek za pomocą podglądów
Podglądy tworzenia wiadomości ułatwiają tworzenie treści na ekranach o różnych rozmiarach ekranu z Wear OS. Użyj zarówno definicji urządzeń, jak i definicji podglądu skalowania czcionki, aby uzyskać te informacje:
- Sposób wyświetlania ekranów w skrajnych rozmiarach, np. największe czcionki połączone z mniejszym ekranem.
- Jak zróżnicowane środowisko działa w punktach przerwania.
Pamiętaj, aby zaimplementować podglądy za pomocą parametrów WearPreviewDevices
i WearPreviewFontScales
na wszystkich ekranach w aplikacji.
@WearPreviewDevices
@WearPreviewFontScales
@Composable
fun ListScreenPreview() {
ListScreen()
}
Testowanie zrzutu ekranu
Testowanie zrzutów ekranu pozwala nie tylko testować treści na różnych urządzeniach, ale też na różnych rozmiarach. Jest to szczególnie przydatne, gdy dostęp do tych urządzeń może być niemożliwy, a problem może nie występować na ekranach o innych rozmiarach.
Testowanie zrzutów ekranu pomaga też wykrywać regresje w określonych lokalizacjach w bazie kodu.
W naszych przykładach używamy Roborazzi do testowania zrzutów ekranu:
- Skonfiguruj pliki projektu i aplikacji
build.gradle
tak, aby korzystały z Roborazzi. - Utwórz test zrzutu ekranu dla każdego ekranu w aplikacji. Na przykład w przykładzie ComposeStarter test instancji
GreetingScreen
jest zaimplementowany tak, jak wGreetingScreenTest
:
@RunWith(ParameterizedRobolectricTestRunner::class)
class GreetingScreenTest(override val device: WearDevice) : WearScreenshotTest() {
override val tolerance = 0.02f
@Test
fun greetingScreenTest() = runTest {
AppScaffold(
timeText = { ResponsiveTimeText(timeSource = FixedTimeSource) }
) {
GreetingScreen(greetingName = "screenshot", onShowList = {})
}
}
companion object {
@JvmStatic
@ParameterizedRobolectricTestRunner.Parameters
fun devices() = WearDevice.entries
}
}
Ważne uwagi:
FixedTimeSource
umożliwia generowanie zrzutów ekranu, w których obiektTimeText
nie ulega zmianom i w sposób niezamierzony powoduje niepowodzenie testów.WearDevice.entries
zawiera definicje najpopularniejszych urządzeń z Wear OS, aby testy były przeprowadzane na reprezentatywnych rozmiarach ekranów.
Wygeneruj złote obrazy
Aby wygenerować obrazy ekranów, uruchom w terminalu to polecenie:
./gradlew recordRoborazziDebug
Zweryfikuj obrazy
Aby sprawdzić zmiany w istniejących obrazach, uruchom w terminalu to polecenie:
./gradlew verifyRoborazziDebug
Pełen przykład testowania zrzutu ekranu znajdziesz w przykładowym narzędziu ComposeStarter.