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

Twoja aplikacja powinna dobrze działać na urządzeniach Wear OS wszystkich rozmiarów, wykorzystując dodatkową przestrzeń, gdy jest dostępna, a jednocześnie dobrze wyglądać na mniejszych ekranach. W tym przewodniku znajdziesz zalecenia dotyczące osiągnięcia takiego interfejsu.

Więcej informacji o zasadach projektowania układów adaptacyjnych znajdziesz w wytycznych dotyczących 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 ekranu Wear OS:

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,
                )
            }
        }
    }
}
List.kt

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

W przypadku dopełnienia u góry i u dołu zwróć też uwagę na te kwestie:

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

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

• Biblioteka Horologist – zawiera pomocników, którzy pomagają tworzyć zoptymalizowane i wyróżniające się aplikacje na Wear OS.
• Próbka ComposeStarter – przykład pokazujący zasady opisane w tym przewodniku.
• Próbka JetCaster – bardziej złożony przykład tworzenia aplikacji, która działa na różnych rozmiarach ekranu, z użyciem biblioteki Horologist.

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

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

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

Okna

Okna też powinny być przewijalne, chyba że istnieje bardzo dobry powód, aby tak nie było. Komponent AlertDialog jest elastyczny i domyślnie przewijalny 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. 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 w zestawach projektowych Figma i zaimplementuj projekt, który będzie elastycznie dostosowywał się do rozmiaru ekranu, używając prawidłowych marginesów.

Zapewnianie zróżnicowanych wrażeń dzięki punktom przerwania

Na większych wyświetlaczach możesz wprowadzić dodatkowe treści i funkcje. Aby zaimplementować tego rodzaju zróżnicowane wrażenia, 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.
    }
    // ...
List.kt

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

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

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

• Jak wyglądają ekrany w skrajnych przypadkach rozmiarów, np. największa czcionka w połączeniu z najmniejszym ekranem.
• Jak działa zróżnicowany interfejs w punktach przerwania.

Upewnij się, że implementujesz podglądy za pomocą WearPreviewDevices i WearPreviewFontScales na wszystkich ekranach aplikacji.

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

Testowanie zrzutów ekranu

Oprócz testowania podglądów 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 innych rozmiarach ekranu.

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

W naszych próbkach do testowania zrzutów ekranu używamy 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 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
    }
}
ListTest.kt

Kilka ważnych kwestii:

• WearDevice.entries zawiera definicje najpopularniejszych urządzeń Wear OS, dzięki czemu testy są przeprowadzane na reprezentatywnym zakresie rozmiarów ekranu.

Generowanie złotych obrazów

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

./gradlew recordRoborazziDebug

Weryfikowanie obrazów

Aby zweryfikować zmiany na podstawie istniejących obrazów, uruchom to polecenie w terminalu:

./gradlew verifyRoborazziDebug

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