Twórz aplikacje na ekrany o różnych rozmiarach

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 komponentem Text 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łówki Text nie powinny mieć dopełnienia.

Pełną specyfikację znajdziesz w zestawach projektowych Figma. Więcej informacji i przykładów znajdziesz tutaj:

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óżnego rozmiaru urządzenia i skalowania czcionek.

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ęć.
Adaptacyjne zachowanie okna dialogowego w aplikacji Horologist

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:

  1. Skonfiguruj pliki projektu i aplikacji build.gradle tak, aby korzystały z Roborazzi.
  2. 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 w GreetingScreenTest:
@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", 
        }
    }

    companion object {
        @JvmStatic
        @ParameterizedRobolectricTestRunner.Parameters
        fun devices() = WearDevice.entries
    }
}

Ważne uwagi:

  • FixedTimeSource umożliwia generowanie zrzutów ekranu, w których obiekt TimeText 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.