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 położeniu urządzeń składanych, np. do położenia na stole lub w formie 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ółowa lista); a na małych ekranach – mniej treści (tylko listę lub tylko szczegóły).
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 nawet na urządzeniach tego samego typu aplikacje muszą być adaptacyjne.
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 korzystają z trybu wielu okien, aby zwiększyć wygodę korzystania z aplikacji i produktywność.
Aplikacje, które na standardowych telefonach ograniczają się do wykonywania tylko 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. Google Play opiera ranking na wskazówkach dotyczących jakości aplikacji na dużych ekranach. Wyższy ranking 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 Google Play dotyczących dużych ekranów, wyświetlają ostrzeżenie na stronie z informacjami o aplikacji. Ostrzeżenie informuje użytkowników, że aplikacja może nie działać dobrze na urządzeniach z dużym ekranem.
Twórz aplikacje adaptacyjne, aby zwiększyć widoczność w Google Play i zmaksymalizować liczbę urządzeń, na których można pobrać Twoją aplikację.
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 stworzysz aplikację, którą można zarządzać, rozszerzać i która jest gotowa na przyszłe formaty i 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, proporcje i orientacja mogą się różnić od rozmiaru ekranu urządzenia, proporcji i orientacji.
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.
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 za każdym razem, gdy zmienia się klasa rozmiaru okna:
val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
Panele treści
Układ aktywności jest czasami nazywany ekranem. Na przykład Twoja 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.
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.
|
|
|
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 położeniem urządzeń składanych i położeniem zawiasu, np.:
NavigationSuiteScaffold: automatycznie przełącza się między paskiem nawigacji a panelem nawigacji w zależności od klasy rozmiaru okna aplikacji i położenia 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 tylko 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ę położenie 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.
Położenie
Aplikacje adaptacyjne reagują na zmiany w położeniu urządzeń składanych. Położenia obejmują położenie na stole i położenie w formie książki.
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 dostępność. 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 framework Androida:
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 komponencieTextFieldza pomocą rysika.Keyboard Shortcuts Helper: umożliwia użytkownikom odkrywanie skrótów klawiszowych na platformie Android i w aplikacjach. 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ń. Aby sprawdzić układy aplikacji, użyj zrzutów ekranu po stronie hosta i podglądów w Compose. Uruchom 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 aplikacyjna 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żyj zrzutów ekranu po stronie hosta, aby przetestować interfejs pod kątem różnych rozmiarów wyświetlacza.
Więcej informacji znajdziesz w artykule Testowanie zrzutów ekranu w podglądzie w Compose.
Podglądy w Compose
Podglądy w Compose 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 Compose.
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
- Prezentacja na I/O: Tworzenie adaptacyjnych aplikacji na Androida