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 po projektowaniu.

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 używaj funkcji rememberResponsiveColumnPadding z biblioteki Horologist i przekazuj je do parametrów contentPadding funkcji ScreenScaffold i TransformingLazyColumn.contentPadding

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 pokazano też znaczniki 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łowe dopełnienie.
  • Użycie ListHeader w przypadku pierwszego elementu na liście, ponieważ Text nagłówki nie powinny mieć dopełnienia.

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

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

Podczas implementowania ekranów używaj domyślnie układu przewijanego, 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 czcionek

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

Okna

Okna dialogowe powinny też mieć możliwość przewijania, chyba że istnieje bardzo ważny 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 wrażeń dzięki punktom przerwania

Dzięki większym wyświetlaczom możesz wprowadzać 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 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 we wskazówkach 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 ekranu Wear OS. Korzystając z definicji podglądu urządzeń i skalowania czcionek, możesz sprawdzić:

  • Jak wyglądają ekrany w przypadku skrajnych rozmiarów, np. największej czcionki w połączeniu z najmniejszym ekranem.
  • Jak zróżnicowane środowisko zachowuje się w różnych punktach przerwania.

W przypadku wszystkich ekranów aplikacji zaimplementuj podglądy za pomocą elementów WearPreviewDevices i WearPreviewFontScales.

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

Testowanie zrzutów ekranu

Oprócz testowania podglądu testowanie zrzutów ekranu umożliwia testowanie na urządzeniach o różnych rozmiarach. Jest to szczególnie przydatne, gdy nie masz dostępu do tych urządzeń, a problem może nie występować na ekranach o innych rozmiarach.

Testowanie zrzutów ekranu pomaga też identyfikować regresje w określonych miejscach 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 w przykładowej aplikacji ComposeStarter test dla funkcji GreetingScreen jest zaimplementowany w sposób widoczny w 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, 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ładzie ComposeStarter.