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

Aplikacja powinna dobrze działać na wszystkich urządzeniach z Wear OS o różnych rozmiarach. w miarę możliwości i świetnie wygląda również na mniejszych ekranach. Ten przewodnik zawiera zalecenia, które pomogą Ci poprawić wrażenia użytkowników.

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

Tworzenie układów elastycznych za pomocą aplikacji Horologist

Układy powinny mieć marże wyrażone w procentach. Ponieważ funkcja tworzenia wiadomości działa domyślnych w wartościach bezwzględnych, użyj komponentów z metody Biblioteka Horologistów, która zawiera te funkcje:

  • Poziome marginesy są prawidłowo ustawiane na podstawie odsetka ekranu urządzenia rozmiaru.
  • Odstępy u góry i u dołu są ustawione prawidłowo. Wiąże się to z pewnymi wyzwaniami ponieważ zalecane odstępy u góry i u dołu mogą zależeć od komponentów . Na przykład w elemencie Chip powinny występować inne odstępy niż w elemencie Text. podczas stosowania na liście.
  • Marginesy (TimeText) są ustawione prawidłowo.

Poniższy fragment kodu korzysta z wersji funkcji Horologist ScalingLazyColumn do tworzenia treści, które będą świetnie wyglądać na różnych urządzeniach. rozmiarów ekranu Wear OS:

val columnState = rememberResponsiveColumnState(
    contentPadding = ScalingLazyColumnDefaults.padding(
        first = ScalingLazyColumnDefaults.ItemType.Text,
        last = ScalingLazyColumnDefaults.ItemType.SingleButton
    )
)
ScreenScaffold(scrollState = columnState) {
    ScalingLazyColumn(
        columnState = columnState
    ) {
        item {
            ResponsiveListHeader(contentPadding = firstItemPadding()) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                imageVector = Icons.Default.Build,
                contentDescription = "Example Button",
                onClick = { }
            )
        }
    }
}
List.kt

Ten przykład przedstawia również ScreenScaffold i AppScaffold. Są one koordynowane między aplikacją a poszczególnymi ekranami (trasy nawigacji), by zapewnić prawidłowe przewijanie Pozycjonowanie: TimeText.

Pamiętaj o tych kwestiach dotyczących dopełnienia u góry i na dole:

  • Specyfikacja pierwszego i ostatniego elementu ItemType w celu określenia poprawności dopełnienie.
  • Użycie właściwości ResponsiveListHeader w przypadku pierwszego elementu na liście, ponieważ Nagłówki Text nie powinny zawierać dopełnienia.

Pełną specyfikację znajdziesz w zestawach projektowych Figma. Więcej szczegóły i przykłady można znaleźć w materiałach na temat:

  • Biblioteka Horologist zawiera komponenty, które pomagają tworzyć zoptymalizowane i zróżnicowane aplikacje na Wear OS.
  • Przykład ComposeStarter to przykład omówionych w tym przewodniku zasad.
  • Przykład z JetCaster to bardziej skomplikowany przykład tworzenia obsługuje różne rozmiary ekranów, korzystając z biblioteki Horologist.

Używanie układów przewijania w aplikacji

Jako opcję domyślną użyj układu przewijania, jak pokazano wcześniej na tej stronie. podczas wdrażania ekranów. Umożliwi to użytkownikom dotarcie do komponentów aplikacji niezależnie od ustawień wyświetlania czy rozmiaru ekranu urządzenia z Wear OS.

Efekt różnego rozmiaru urządzenia i skalowania czcionek.

Wpływ urządzeń o różnych rozmiarach i skalowanie czcionek.

Okna

Okna również powinny dać się przewijać, chyba że jest jakiś ważny powód. Komponent ResponsiveDialog udostępniony przez Horologist dodaje makro :

  • Domyślnie przewijanie.
  • Popraw marże wyrażone w procentach.
  • Przyciski, które dostosowują swoją szerokość do dostępnego miejsca, zapewniają elementy dotykowe.
Adaptacyjne zachowanie okna dialogowego w aplikacji Horologist

Elastyczne okna z domyślnie przewijaniem i przyciskami dopasowującymi się ilość dostępnego miejsca.

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

Niektóre ekrany mimo to nadają się do układów bez przewijania. Kilka przykładów umieść główny ekran odtwarzacza w aplikacji do multimediów, a ekran treningu w aplikacja do fitnessu.

W takich przypadkach zapoznaj się z wytycznymi kanonicznymi zawartymi w zestawy projektowe Figma i zaprojektuj projekt dopasowany do rozmiaru. ekranu, z zachowaniem prawidłowych marginesów.

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

Dzięki większym wyświetlaczom możesz udostępniać dodatkowe treści i funkcje. Do zastosuj tego rodzaju zróżnicowane środowisko, użyj punktów przerwania rozmiaru ekranu, pokazywać 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 przedstawiamy we wskazówkach dotyczących projektowania.

Testuj kombinacje rozmiarów ekranu i czcionek za pomocą podglądów

Podglądy tworzenia wiadomości ułatwiają tworzenie treści na ekranach o różnych rozmiarach ekranu z Wear OS. Użyj zarówno definicji urządzeń, jak i definicji podglądu skalowania czcionki, aby uzyskać te informacje:

  • Największe rozmiary, na przykład największe czcionki wyświetlane na ekranach. sparowany z najmniejszym ekranem.
  • Jak zróżnicowane środowisko działa w punktach przerwania.

Pamiętaj, aby zaimplementować podglądy za pomocą narzędzi WearPreviewDevices i WearPreviewFontScales na wszystkich ekranach aplikacji.

@WearPreviewDevices
@WearPreviewFontScales
@Composable
fun ListScreenPreview() {
    ListScreen()
}

Testowanie zrzutu ekranu

Oprócz testowania w wersji testowej zrzuty ekranu pozwalają na dotychczasowych urządzeniach. Jest to szczególnie przydatne, gdy te urządzenia mogą nie będą od razu dostępne, a problem może nie pojawić się innych rozmiarów ekranu.

Testowanie zrzutów ekranu pomaga określić regresje w określonych lokalizacjach w bazie kodu.

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

  1. Skonfiguruj pliki build.gradle projektu i aplikacji, których chcesz używać Roborazzi.
  2. Utwórz test zrzutu ekranu dla każdego ekranu aplikacji. Przykład: w przykładzie ComposeStarter test interfejsu GreetingScreen jest zaimplementowane tak jak w GreetingScreenTest:
@RunWith(ParameterizedRobolectricTestRunner::class)
class GreetingScreenTest(override val device: WearDevice) : WearScreenshotTest() {
    override val tolerance = 0.02f

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

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

Ważne uwagi:

  • FixedTimeSource umożliwia generowanie zrzutów ekranu, w przypadku których nie można wykonać czynności TimeText mogą ulegać zmianom i w sposób niezamierzony spowodować niepowodzenie testów.
  • WearDevice.entries zawiera definicje najpopularniejszych urządzeń z Wear OS, więc aby testy zostały przeprowadzone na ekranach o reprezentatywnych rozmiarach.

Wygeneruj złote obrazy

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

./gradlew recordRoborazziDebug

Zweryfikuj obrazy

Aby sprawdzić zmiany w istniejących obrazach, uruchom następujące polecenie w pliku terminal:

./gradlew verifyRoborazziDebug

Pełen przykład testowania zrzutu ekranu znajdziesz w przykładowym narzędziu ComposeStarter.