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

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Aplikacja powinna dobrze działać na urządzeniach z Wear OS o dowolnych rozmiarach, wykorzystując dodatkową przestrzeń tam, gdzie jest dostępna, i nadal dobrze wyglądać na mniejszych ekranach. W tym przewodniku znajdziesz zalecenia dotyczące tego, jak zapewnić użytkownikom takie wrażenia.

Aby dowiedzieć się więcej o zasadach projektowania układów dostosowywanych, przeczytaj wytyczne dotyczące projektowania.

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

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

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

W tym przykładzie użyto też znaczników ScreenScaffold i AppScaffold. Te elementy współdziałają z aplikacją i poszczególnymi ekranami (trasy nawigacyjne), aby zapewnić prawidłowe przewijanie i pozycjonowanie TimeText.

W przypadku wypełnienia u góry i u dołu:

• Specyfikacja pierwszego i ostatniego ItemType, aby określić prawidłowe wypełnienie.
• Użycie wartości ListHeader dla pierwszego elementu na liście, ponieważ nagłówki Text nie powinny mieć wypełnienia.

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

• Biblioteka Horologist – zawiera pomocnicze narzędzia ułatwiające tworzenie zoptymalizowanych i różnicujących się aplikacji na Wear OS.
• Plik ComposeStarter sample – przykład pokazujący zasady opisane w tym przewodniku.
• Próbka JetCaster – bardziej skomplikowany przykład tworzenia aplikacji do pracy z różnymi rozmiarami ekranu za pomocą biblioteki Horologist.

Używanie układów przewijania w aplikacji

Podczas implementowania ekranów użyj układu z przewijaniem, który został pokazany wcześniej na tej stronie, jako domyślnego wyboru. 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 zmian rozmiaru czcionki.

Okna

Dialogi powinny być przewijane, 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 zawartość przekracza wysokość widocznego obszaru.

Ekrany niestandardowe mogą wymagać układów bez przewijania.

Niektóre ekrany mogą nadal nadawać się do układów bez przewijania. Kilka przykładów to główny ekran odtwarzacza w aplikacji multimedialnej i ekran treningu w aplikacji fitness.

W takich przypadkach zapoznaj się z kanonicznymi wskazówkami zawartymi w pakietach projektowych Figma i wdróż projekt, który dostosowuje się do rozmiaru ekranu, używając odpowiednich marginesów.

Zapewnianie zróżnicowanych wrażeń za pomocą punktów przełamania

Dzięki większym wyświetlaczom możesz wprowadzać dodatkowe treści i funkcje. Aby wdrożyć takie zróżnicowane działanie, użyj punktów granicznych rozmiaru ekranu, wyświetlając inny układ, gdy rozmiar ekranu przekroczy 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.
    }
    // ...
List.kt

Więcej informacji o tych możliwościach znajdziesz w wskazówkach dotyczących projektowania.

testować kombinacje rozmiarów ekranu i czcionek za pomocą podglądów;

Komponowanie podglądów ułatwia tworzenie wersji na różne rozmiary ekranów Wear OS. Użyj definicji podglądu na urządzenia i skalowanie czcionki, aby zobaczyć:

• Jak wyglądają ekrany przy skrajnych rozmiarach, np. największy rozmiar czcionki w połączeniu z najmniejszym ekranem.
• Jak różni się działanie aplikacji w różnych punktach przecięcia.

Zaimplementuj podgląd za pomocą WearPreviewDevices i WearPreviewFontScales na wszystkich ekranach w aplikacji.

@WearPreviewDevices
@WearPreviewFontScales
@Composable
fun ComposeListPreview() {
    ComposeList()
}
List.kt

Testowanie zrzutów ekranu

Oprócz testowania podglądu testowanie ze zrzutami ekranu pozwala przetestować aplikację na różnych rozmiarach istniejącego sprzętu. Jest to szczególnie przydatne, gdy te urządzenia mogą nie być dostępne od razu, a problem może nie występować na innych rozmiarach ekranu.

Testowanie zrzutów ekranu pomaga też wykrywać regresje w określonych miejscach w Twoim kodzie źródłowym.

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

1. Skonfiguruj pliki build.gradle projektu i aplikacji, aby korzystać z Roborazzi.
2. Utwórz test zrzutu ekranu dla każdego ekranu w aplikacji. Na przykład w próbce ComposeStarter test GreetingScreen jest realizowany w taki sposób, jak pokazano na rysunku GreetingScreenTest:

@RunWith(ParameterizedRobolectricTestRunner::class)
class GreetingScreenTest(override val device: WearDevice) : WearScreenshotTest() {
    override val tolerance = 0.02f

    @Test
    fun greetingScreenTest() = runTest {
        AppScaffold {
            GreetingScreen(greetingName = "screenshot", onShowList = {})
        }
    }

    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, aby testy były przeprowadzane na reprezentatywnym zakresie rozmiarów ekranu.

Generowanie złotych obrazów

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

./gradlew recordRoborazziDebug

Weryfikacja obrazów

Aby sprawdzić zmiany w stosunku do dotychczasowych obrazów, uruchom w terminalu to polecenie:

./gradlew verifyRoborazziDebug

Pełny przykład testowania zrzutów ekranu znajdziesz w próbnym szablonie ComposeStarter.