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

Aplikacja powinna dobrze działać na urządzeniach z Wear OS o różnych rozmiarach, wykorzystując dodatkową przestrzeń, gdy jest dostępna, a jednocześnie dobrze wyglądać na mniejszych ekranach. W tym przewodniku znajdziesz zalecenia, które pomogą Ci zapewnić użytkownikom takie wrażenia.

Więcej informacji o zasadach projektowania układów adaptacyjnych znajdziesz w przewodniku.

Tworzenie elastycznych układów za pomocą Material 3

Układy powinny mieć marginesy oparte na procentach. Kompozycja domyślnie działa na wartościach bezwzględnych, więc do obliczania dopełnienia i przekazywania go do parametru ScreenScaffold komponentu contentPadding oraz parametru TransformingLazyColumn komponentu contentPadding używaj funkcji rememberResponsiveColumnPadding z biblioteki Horologist.

Ten fragment kodu używa komponentu TransformingLazyColumn do tworzenia treści, które świetnie wyglądają na ekranach Wear OS o różnych rozmiarach:

val columnState = rememberTransformingLazyColumnState()
val transformationSpec = rememberTransformationSpec()
ScreenScaffold(
    scrollState = columnState
) { contentPadding ->
    TransformingLazyColumn(
        state = columnState,
        contentPadding = contentPadding
    ) {
        item {
            ListHeader(
                modifier = Modifier
                    .fillMaxWidth()
                    .transformedHeight(this, transformationSpec)
                    .minimumVerticalContentPadding(ListHeaderDefaults.minimumTopListContentPadding),
                transformation = SurfaceTransformation(transformationSpec)
            ) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                modifier = Modifier
                    .fillMaxWidth()
                    .transformedHeight(this, transformationSpec)
                    .minimumVerticalContentPadding(ButtonDefaults.minimumVerticalListContentPadding),
                transformation = SurfaceTransformation(transformationSpec),
                onClick = { /* ... */ },
                icon = {
                    Icon(
                        imageVector = Icons.Default.Build,
                        contentDescription = "build",
                    )
                },
            ) {
                Text(
                    text = "Build",
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis,
                )
            }
        }
    }
}

Ten przykład pokazuje też, jak używać znaczników ScreenScaffold i AppScaffold. Koordynują one działanie aplikacji i poszczególnych ekranów (trasy nawigacji), aby zapewnić prawidłowe przewijanie i TimeText pozycjonowanie.

W przypadku dopełnienia u góry i u dołu pamiętaj też o tych kwestiach:

  • Specyfikacja pierwszego i ostatniego znaku ItemType, aby określić prawidłowy odstęp.
  • Użycie ListHeader w przypadku pierwszego elementu na liście, ponieważ nagłówki Text nie powinny mieć dopełnienia.

Pełną specyfikację znajdziesz w zestawach projektów w Figma. Więcej informacji i przykłady znajdziesz w tych artykułach:

Używanie w aplikacji układów z przewijaniem

Podczas implementowania ekranów używaj domyślnie układu przewijania, jak pokazano wcześniej na tej stronie. Dzięki temu użytkownicy mogą korzystać z komponentów aplikacji niezależnie od preferencji wyświetlania czy rozmiaru ekranu urządzenia z Wear OS.

Wpływ różnych rozmiarów urządzeń i skalowania czcionki

Wpływ różnych rozmiarów urządzeń i skalowania czcionek.

Okna

Okna dialogowe powinny też mieć możliwość przewijania, chyba że istnieje bardzo dobry powód, aby tego nie robić. Komponent AlertDialog jest elastyczny i domyślnie można go przewijać, jeśli treść przekracza wysokość widocznego obszaru.

Ekrany niestandardowe mogą wymagać układów bez możliwości przewijania

Niektóre ekrany mogą nadal być odpowiednie dla układów bez przewijania. Przykłady to ekran główny odtwarzacza w aplikacji multimedialnej i ekran treningu w aplikacji fitness.

W takich przypadkach zapoznaj się z kanonicznymi wskazówkami zawartymi w zestawach projektów w Figma i wdroż projekt, który dostosowuje się do rozmiaru ekranu, z użyciem odpowiednich marginesów.

Zapewnianie zróżnicowanych doświadczeń za pomocą punktów przerwania

Na większych wyświetlaczach możesz prezentować dodatkowe treści i funkcje. Aby wdrożyć ten rodzaj zróżnicowanych wrażeń, użyj punktów przerwania rozmiaru ekranu, wyświetlając 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 znajdziesz w wytycznych dotyczących projektowania.

Testowanie kombinacji rozmiarów ekranu i czcionki za pomocą podglądów

Podglądy kompozycji pomagają tworzyć aplikacje na różne rozmiary ekranów Wear OS. Korzystając z definicji podglądu urządzeń i skalowania czcionek, możesz sprawdzić:

  • Jak wyglądają ekrany przy skrajnych rozmiarach, np. największa czcionka w połączeniu z najmniejszym ekranem.
  • Jak Twoje zróżnicowane doświadczenie zachowuje się w różnych punktach przerwania.

Zaimplementuj podglądy za pomocą funkcji WearPreviewDevices i WearPreviewFontScales na wszystkich ekranach aplikacji. Szczegółowe informacje o konfigurowaniu podglądów Wear OS, niestandardowych specyfikacji sprzętowych i podglądzie przewijanych list znajdziesz w artykule Wyświetlanie podglądu interfejsu w Compose na Wear OS.

@WearPreviewDevices
@WearPreviewFontScales
@Composable
fun ComposeListPreview() {
    ComposeList()
}

Testowanie zrzutów ekranu

Oprócz testowania podglądu testowanie zrzutów ekranu umożliwia testowanie na różnych rozmiarach sprzętu. Jest to szczególnie przydatne, gdy te urządzenia mogą nie być od razu dostępne, a problem może nie występować na ekranach o innych rozmiarach.

Testowanie zrzutów ekranu pomaga też identyfikować regresje w określonych lokalizacjach w bazie kodu.

W naszych przykładach do testowania zrzutów ekranu używamy biblioteki Roborazzi:

  1. Skonfiguruj pliki projektu i aplikacji build.gradle, aby używać Roborazzi.
  2. Utwórz test zrzutu ekranu dla każdego ekranu w aplikacji. Na przykład poniższy kod pokazuje test zrzutu ekranu dla ekranu zawierającego listę:
@RunWith(ParameterizedRobolectricTestRunner::class)
class ComposeListScreenTest(
    override val device: WearDevice
) : WearScreenshotTest() {
    override val tolerance = 0.02f

    @Test
    fun myScreenTest() =
        runTest {
            AppScaffold {
                ComposeList()
            }
        }

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

Ważne uwagi:

  • WearDevice.entries zawiera definicje większości popularnych urządzeń z Wear OS, dzięki czemu testy są przeprowadzane na reprezentatywnym zakresie rozmiarów ekranu.

Generowanie obrazów referencyjnych

Aby wygenerować obrazy ekranów, uruchom w terminalu to polecenie:

./gradlew recordRoborazziDebug

Weryfikowanie obrazów

Aby sprawdzić zmiany w porównaniu z dotychczasowymi obrazami, uruchom to polecenie w terminalu:

./gradlew verifyRoborazziDebug

Pełny przykład testowania zrzutów ekranu znajdziesz w przykładowej aplikacji ComposeStarter.