Pierwsze kroki z aplikacjami adaptacyjnymi

Obecnie używanych jest ponad 300 milionów urządzeń z Androidem z dużym ekranem, w tym tablety, urządzenia składane, urządzenia z ChromeOS, wyświetlacze samochodowe i telewizory, a liczba ta stale rośnie. Aby zapewnić optymalne wrażenia użytkownikom na coraz większej liczbie i różnorodności urządzeń z dużym ekranem —a także na standardowych telefonach—twórz aplikacje adaptacyjne.

Czym są aplikacje adaptacyjne?

Aplikacje adaptacyjne zmieniają układ w zależności od zmian w wyświetlaniu aplikacji, przede wszystkim od rozmiaru okna aplikacji. Aplikacje adaptacyjne dostosowują się też do zmian w pozycji urządzeń składanych, np. do pozycji na stole lub pozycji książki, oraz do zmian w gęstości ekranu i rozmiarze czcionki.

Zamiast tylko rozciągać lub zmniejszać elementy interfejsu w odpowiedzi na różne rozmiary okien, aplikacje adaptacyjne zastępują komponenty układu oraz pokazują lub ukrywają treści. Na przykład na standardowych telefonach aplikacja adaptacyjna może wyświetlać dolny pasek nawigacyjny, a na dużych ekranach – panel nawigacyjny. Na dużych ekranach aplikacje adaptacyjne wyświetlają więcej treści, np. układ z 2 panelami, szczegółową listą i szczegółami. Na małych ekranach wyświetlają mniej treści – listę lub szczegóły.

Rysunek 1. Aplikacja adaptacyjna optymalizuje układ pod kątem różnych rozmiarów okien.

W przeszłości aplikacje zwykle działały w trybie pełnoekranowym. Obecnie aplikacje działają w trybie wielu okien w oknach o dowolnym rozmiarze, niezależnie od rozmiaru ekranu urządzenia. Użytkownicy mogą w każdej chwili zmienić rozmiar okna. Dlatego aplikacje muszą być adaptacyjne nawet na urządzeniach tego samego typu.

Aplikacje adaptacyjne wyglądają świetnie i działają dobrze na każdym urządzeniu w dowolnej konfiguracji.

Dlaczego warto tworzyć adaptacyjne interfejsy?

Użytkownicy oczekują, że Twoja aplikacja będzie działać bez zarzutu na wszystkich ich urządzeniach i że będzie oferować rozszerzone funkcje na dużych ekranach. Użytkownicy wykonują wiele zadań jednocześnie w trybie wielu okien, aby zwiększyć wygodę korzystania z aplikacji i produktywność.

Aplikacje, które na standardowych telefonach ograniczają się do wykonywania jednego zadania, tracą dostęp do rosnącej bazy użytkowników i różnorodnych możliwości.

Google Play

Google Play udostępnia kolekcje i rekomendacje aplikacji przeznaczone na tablety i urządzenia składane, dzięki którym użytkownicy mogą odkrywać aplikacje wysokiej jakości.

Google Play umieszcza aplikacje i gry zoptymalizowane pod kątem dużych ekranów wyżej niż aplikacje niezoptymalizowane. Ranking jest oparty na wskazówkach dotyczących jakości aplikacji na dużych ekranach. Wyższa pozycja w rankingu zwiększa widoczność, ponieważ użytkownicy korzystający z wielu urządzeń mogą zobaczyć na swoich telefonach oceny i opinie dotyczące dużych ekranów.

Aplikacje, które nie spełniają standardów jakości Sklepu Play dotyczących dużych ekranów, wyświetlają ostrzeżenie na stronie ze szczegółami aplikacji. Ostrzeżenie informuje użytkowników, że aplikacja może nie działać dobrze na urządzeniach z dużym ekranem.

Strona aplikacji w Google Play z ostrzeżeniem „Może nie być zoptymalizowana pod kątem Twojego urządzenia”.
Rysunek 2. Ostrzeżenie o jakości technicznej na stronie ze szczegółami aplikacji.

Twórz aplikacje adaptacyjne, aby zwiększyć ich widoczność w Google Play i zmaksymalizować liczbę urządzeń, na których można je pobrać.

Od czego zacząć

Pamiętaj o projektowaniu adaptacyjnym na wszystkich etapach tworzenia aplikacji – od planowania po wdrożenie. Poinformuj grafików o projektowaniu adaptacyjnym. Zaprojektuj aplikację tak, aby była adaptacyjna. Dzięki temu będzie łatwa w zarządzaniu, rozszerzaniu i przygotowana na przyszłe formaty oraz tryby okien.

Aby utworzyć aplikację adaptacyjną, która obsługuje wszystkie rozmiary i konfiguracje wyświetlaczy, wykonaj te czynności:

  • Używaj klas rozmiaru okna do podejmowania decyzji dotyczących układu.
  • Twórz aplikacje za pomocą biblioteki Compose Material 3 Adaptive.
  • Obsługuj dane wejściowe inne niż dotykowe.
  • Testuj na wszystkich typach urządzeń.

Klasy rozmiaru okna

Wymiary okna aplikacji mogą się różnić na różnych urządzeniach lub na tym samym urządzeniu w przypadku urządzeń składanych, nawet gdy aplikacja jest wyświetlana na pełnym ekranie. Różne orientacje urządzenia powodują różne proporcje. W trybie wielu okien rozmiar okna aplikacji, format obrazu i orientacja mogą się różnić od rozmiaru ekranu urządzenia.

Aplikacje adaptacyjne upraszczają i uogólniają problem określania i zarządzania rozmiarem okna, proporcjami i orientacją, ponieważ podczas renderowania układów uwzględniają tylko okno aplikacji, co działa również wtedy, gdy okno aplikacji jest wyświetlane na pełnym ekranie.

Klasy rozmiaru okna dzielą okna aplikacji na kompaktowe, średnie lub rozszerzone na podstawie szerokości lub wysokości okna.

Ilustracja klas rozmiaru okna: kompaktowa, średnia i szerokość po rozwinięciu.
Rysunek 3. Klasy rozmiaru okna na podstawie szerokości wyświetlacza.

Oblicz WindowSizeClass aplikacji za pomocą funkcji najwyższego poziomu currentWindowAdaptiveInfo() z biblioteki Compose Material 3 Adaptive. Funkcja zwraca instancję WindowAdaptiveInfo, która zawiera windowSizeClass. Aplikacja otrzymuje aktualizacje, gdy zmienia się klasa rozmiaru okna:

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass

Panele treści

Układ aktywności jest czasami nazywany ekranem. Na przykład aplikacja może mieć ekran główny, ekran listy i ekran szczegółów elementu. Terminologia ta sugeruje, że każda aktywność wypełnia ekran urządzenia.

Jednak na ekranach urządzeń, które są wystarczająco duże, aby obsługiwać klasę rozmiaru okna o szerokości po rozwinięciu, na ekranie może być jednocześnie kilka ekranów aktywności. Panel to bardziej precyzyjne określenie wyświetlania treści poszczególnych aktywności.

Klasy rozmiaru okna umożliwiają określenie, ile paneli treści ma być wyświetlanych w układach wielopanelowych, zgodnie z Material Design.

Ekrany urządzeń są podzielone na panele: jeden panel w przypadku kompaktowych i średnich klas rozmiaru okna, dwa panele w przypadku rozszerzonej klasy rozmiaru okna.
Rysunek 4. Liczba paneli treści w zależności od klasy rozmiaru okna.

Panele są nawigacyjne. W przypadku klas rozmiaru okna kompaktowego i średniego aplikacje wyświetlają jeden panel, więc nawigacja do dowolnego miejsca docelowego wyświetla jeden panel.

W przypadku klasy rozmiaru okna rozszerzonego aplikacje mogą wyświetlać powiązane treści w kilku panelach, np. w układzie lista-szczegóły. Nawigacja do dowolnego panelu wyświetla układ z 2 panelami. Jeśli rozmiar okna zmieni się na kompaktowy lub średni, aplikacje adaptacyjne wyświetlą tylko jeden panel – miejsce docelowe nawigacji, czyli listę lub szczegóły.

Rysunek 5. Układ szczegółowej listy z panelem listy jako miejscem docelowym nawigacji.
Rysunek 6. Układ szczegółowej listy z panelem szczegółów jako miejscem docelowym nawigacji.

Compose Material 3 Adaptive

Jetpack Compose to nowoczesne, deklaratywne podejście do tworzenia aplikacji adaptacyjnych bez powielania i obciążenia związanego z utrzymaniem wielu plików układu.

Biblioteka Compose Material 3 Adaptive zawiera komponenty kompozycyjne, które zarządzają klasami rozmiaru okna, komponentami nawigacji, układami wielopanelowymi oraz pozycjami urządzeń składanych i położeniem zawiasu, np.:

  • NavigationSuiteScaffold: automatycznie przełącza się między paskiem nawigacyjnym a panelem nawigacyjnym w zależności od klasy rozmiaru okna aplikacji i pozycji urządzenia.

  • ListDetailPaneScaffold: implementuje kanoniczny układ szczegółowej listy.

    Dostosowuje układ do rozmiaru okna aplikacji. Wyświetla listę i szczegóły elementu listy w sąsiadujących panelach w przypadku klasy rozmiaru okna rozszerzonego, ale tylko listę lub szczegóły w przypadku klas rozmiaru okna kompaktowego i średniego.

  • SupportingPaneScaffold: implementuje kanoniczny układ panelu pomocniczego.

    Wyświetla główny panel treści i panel pomocniczy w przypadku klasy rozmiaru okna rozszerzonego, ale tylko główny panel treści w przypadku klas rozmiaru okna kompaktowego i średniego.

Biblioteka Compose Material 3 Adaptive jest kluczową zależnością podczas tworzenia aplikacji adaptacyjnych.

Konfiguracja i ciągłość

Aplikacje adaptacyjne zachowują ciągłość podczas zmian konfiguracji.

Zmiana konfiguracji następuje, gdy rozmiar okna aplikacji zostanie zmieniony, zmieni się pozycja urządzenia składanego lub zmieni się gęstość ekranu albo czcionka.

Domyślnie zmiany konfiguracji powodują ponowne utworzenie aktywności aplikacji, a cały stan aktywności zostaje utracony. Aby zachować ciągłość, aplikacje adaptacyjne zapisują stan w metodzie onSaveInstanceState() aktywności lub w ViewModel.

Stan

Aplikacje adaptacyjne reagują na zmiany w pozycji urządzeń składanych. Pozycje obejmują pozycję na stole i pozycję książki.

Telefon składany w trybie Na stole, z dolną połową ekranu opartą na powierzchni i górną połową ustawioną pionowo.
Rysunek 7. Urządzenie składane w pozycji na stole.

Interfejs WindowInfoTracker w Jetpack WindowManager umożliwia uzyskanie listy obiektów DisplayFeature dla urządzenia. Wśród funkcji wyświetlania znajduje się FoldingFeature.State, która wskazuje, czy urządzenie jest całkowicie czy częściowo otwarte.

Biblioteka Compose Material 3 Adaptive udostępnia funkcję najwyższego poziomu currentWindowAdaptiveInfo(), która zwraca instancję WindowAdaptiveInfo zawierającąwindowPosture.

Dane wejściowe inne niż dotykowe

Użytkownicy często podłączają do urządzeń z dużym ekranem zewnętrzne klawiatury, trackpady, myszy i rysiki. Urządzenia peryferyjne zwiększają produktywność użytkowników, precyzję wprowadzania danych, ekspresję osobistą i ułatwienia dostępu. Większość urządzeń z ChromeOS ma wbudowane klawiatury i trackpady.

Aplikacje adaptacyjne obsługują zewnętrzne urządzenia wejściowe, ale większość pracy wykonuje za Ciebie platforma Android:

  • Jetpack Compose 1.7 i nowsze: domyślnie obsługiwane są nawigacja za pomocą klawisza Tab oraz klikanie, zaznaczanie i przewijanie za pomocą myszy lub trackpada.

  • Biblioteka Jetpack androidx.compose.material3: umożliwia użytkownikom pisanie w dowolnym komponencie TextField za pomocą rysika.

  • Keyboard Shortcuts Helper: umożliwia użytkownikom odkrywanie skrótów klawiszowych platformy Android i aplikacji. Opublikuj skróty klawiszowe aplikacji w Keyboard Shortcuts Helper, zastępując onProvideKeyboardShortcuts() wywołanie zwrotne okna.

Aby w pełni obsługiwać formaty wszystkich rozmiarów, aplikacje adaptacyjne obsługują wszystkie typy danych wejściowych.

Testowanie aplikacji adaptacyjnych

Testuj różne rozmiary ekranu i okna oraz różne konfiguracje urządzeń. Używaj zrzutów ekranu po stronie hosta i podglądów w widoku tworzenia, aby sprawdzić układy aplikacji. Uruchamiaj aplikację na emulatorach Android Studio i zdalnych urządzeniach z Androidem hostowanych w centrach danych Google.

Wskazówki dotyczące jakości aplikacji na dużych ekranach

Wskazówki dotyczące jakości aplikacji na dużych ekranach pomagają sprawdzić, czy aplikacja adaptacyjna działa dobrze na tabletach, urządzeniach składanych i urządzeniach z ChromeOS. Wskazówki obejmują testy, które umożliwiają sprawdzenie funkcji aplikacji w przypadku głównych ścieżek użytkownika. Chociaż wskazówki dotyczą głównie dużych ekranów, są zgodne ze wszystkimi rozmiarami ekranu.

Wiele konfiguracji

Interfejs DeviceConfigurationOverride w Compose 1.7 i nowszych umożliwia zastępowanie różnych aspektów konfiguracji urządzenia. Interfejs API symuluje różne konfiguracje urządzeń w sposób zlokalizowany dla dowolnych treści kompozycyjnych, które chcesz przetestować. Na przykład możesz przetestować wiele dowolnych rozmiarów interfejsu podczas jednego uruchomienia pakietu testów na jednym urządzeniu lub emulatorze.

Za pomocą funkcji rozszerzenia DeviceConfigurationOverride.then() możesz jednocześnie testować wiele parametrów konfiguracji, takich jak rozmiar czcionki, ustawienia regionalne, motyw i rozmiar układu.

Zrzuty ekranu po stronie hosta

Testy zrzutów ekranu po stronie hosta to szybki i skalowalny sposób sprawdzania wyglądu układów aplikacji. Używaj zrzutów ekranu po stronie hosta, aby testować interfejs na różnych rozmiarach wyświetlacza.

Więcej informacji znajdziesz w artykule Testowanie zrzutów ekranu w podglądzie w widoku tworzenia.

Podglądy w widoku tworzenia

Podglądy w widoku tworzenia umożliwiają sprawdzenie interfejsu aplikacji w widoku projektowania w Android Studio. Podglądy używają adnotacji, takich jak @PreviewScreenSizes, @PreviewFontScale i @PreviewLightDark, aby umożliwić wyświetlanie treści kompozycyjnych w różnych konfiguracjach. Możesz nawet wchodzić w interakcje z podglądami.

Android Studio wyróżnia też w podglądach typowe problemy z użytecznością, takie jak zbyt szerokie przyciski lub pola tekstowe.

Więcej informacji znajdziesz w artykule Wyświetlanie podglądu interfejsu za pomocą podglądów w widoku tworzenia.

Emulatory

Android Studio oferuje różne emulatory do testowania różnych rozmiarów układu:

  • Emulator z możliwością zmiany rozmiaru: emuluje telefon, tablet lub urządzenie składane i umożliwia przełączanie się między nimi w locie.
  • Emulator Pixel Fold: emuluje telefon składany Pixel Fold z dużym ekranem.
  • Emulator Pixel Tablet: emuluje tablet Pixel z dużym ekranem.
  • Emulator komputera: umożliwia testowanie okien o dowolnym rozmiarze, najeżdżania myszą i skrótów klawiszowych.

Strumieniowanie na urządzenie zdalne

Bezpiecznie łącz się ze zdalnymi urządzeniami z Androidem hostowanymi w centrach danych Google i uruchamiaj aplikację na najnowszych urządzeniach Pixel i Samsung. Instaluj i debuguj aplikacje, uruchamiaj polecenia ADB oraz obracaj i składaj urządzenia, aby sprawdzić, czy aplikacja działa dobrze na różnych rzeczywistych urządzeniach.

Strumieniowanie na urządzenie zdalne jest zintegrowane z Android Studio. Więcej informacji znajdziesz w artykule Strumieniowanie urządzeń z Androidem oparte na Firebase.

Dodatkowe materiały