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

Aplikacja powinna działać dobrze na urządzeniach z Wear OS o różnych rozmiarach, wykorzystując dodatkową przestrzeń, jeśli jest dostępna, i wyglądać świetnie na mniejszych ekranach. W tym przewodniku znajdziesz zalecenia, które pomogą Ci osiągnąć ten cel.

Aby dowiedzieć się więcej o zasadach projektowania układów adaptacyjnych, zapoznaj się ze wskazówkami dotyczącymi projektowania.

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

Układy powinny mieć marginesy wyrażone w procentach. W Wear Compose Material 3 ScreenScaffold automatycznie oblicza dopełnienie procentowe i dostarcza contentPadding do funkcji lambda treści. Przekaż ten parametr contentPadding do TransformingLazyColumn.

Poniższy fragment kodu używa komponentu TransformingLazyColumn do tworzenia treści, które wyglądają świetnie 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ć ScreenScaffold i AppScaffold. Koordynują one działanie aplikacji i poszczególnych ekranów (trasy nawigacji), aby zapewnić prawidłowe przewijanie i pozycjonowanie elementu TimeText.

W przypadku dopełnienia górnego i dolnego pamiętaj też o tych kwestiach:

  • Użycie Modifier.minimumVerticalContentPadding (np. ListHeaderDefaults.minimumTopListContentPadding i ButtonDefaults.minimumVerticalListContentPadding), aby TransformingLazyColumn używał co najmniej zalecanego dopełnienia górnego i dolnego, gdy te elementy pojawiają się na krawędzi listy.
  • Użycie elementu ListHeader w przypadku pierwszego elementu na liście zamiast zwykłego elementu kompozycyjnego Text.

Pełne specyfikacje znajdziesz w zestawach projektowych Figma. Więcej informacji i przykładów znajdziesz w tych artykułach:

Używanie układów przewijanych w aplikacji

Podczas wdrażania ekranów używaj układu przewijanego (pokazanego wcześniej na tej stronie) jako domyślnego wyboru. Dzięki temu użytkownicy mogą korzystać z komponentów aplikacji niezależnie od preferencji wyświetlania i rozmiaru ekranu urządzenia z Wear OS.

wpływ różnych rozmiarów urządzeń i skalowania czcionek;

efekt różnych rozmiarów urządzeń i skalowania czcionek.

Okna

Okna dialogowe powinny być też przewijalne, chyba że istnieje bardzo dobry powód, aby tak nie było. 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 przewijania.

Niektóre ekrany mogą nadal być odpowiednie dla układów bez przewijania. Przykłady to ekran głównego odtwarzacza w aplikacji do multimediów i ekran treningu w aplikacji treningowej.

W takich przypadkach zapoznaj się ze wskazówkami dotyczącymi wersji kanonicznej w zestawach projektowych Figma i wdróż projekt, który dostosowuje się do rozmiaru ekranu, używając odpowiednich marginesów.

Zapewnianie zróżnicowanych doświadczeń dzięki punktom przerwania

Na większych ekranach możesz wyświetlać dodatkowe treści i funkcje. Aby wdrożyć tego rodzaju zróżnicowane działanie, użyj punktów przerwania rozmiaru ekranu, które wyświetlają 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 we wskazówkach dotyczących projektowania.

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

Podglądy w Compose pomagają tworzyć aplikacje na różne rozmiary ekranów Wear OS. Użyj definicji podglądu urządzeń i skalowania czcionek, aby zobaczyć:

  • Jak wyglądają ekrany w skrajnych rozmiarach, np. największa czcionka na najmniejszym ekranie.
  • jak zróżnicowane środowisko zachowuje się w różnych punktach przerwania.

Upewnij się, że podglądy są implementowane za pomocą WearPreviewDevices i WearPreviewFontScales na wszystkich ekranach aplikacji. Szczegółowe informacje o konfigurowaniu podglądów na Wear OS, niestandardowych specyfikacjach sprzętu i podglądzie przewijanych list znajdziesz w artykule Podgląd 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 nie masz dostępu do tych urządzeń, a problem może nie występować na innych rozmiarach ekranu.

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

Nasze przykłady używają narzędzia Roborazzi do testowania zrzutów ekranu:

  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 ten 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 najpopularniejszych urządzeń z Wear OS, dzięki czemu testy są przeprowadzane na reprezentatywnym zakresie rozmiarów ekranu.

Generowanie obrazów wzorcowych

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

./gradlew recordRoborazziDebug

Weryfikowanie obrazów

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

./gradlew verifyRoborazziDebug

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