Obecnie w użyciu jest ponad 300 milionów urządzeń z Androidem i dużym ekranem, w tym tabletów, urządzeń składanych, Googlebooków, urządzeń z ChromeOS, wyświetlaczy samochodowych i telewizorów, a ich liczba stale rośnie. Aby zapewnić optymalne wrażenia użytkownikom coraz większej liczby i różnorodnych urządzeń z dużym ekranem, a także standardowych telefonów, twórz aplikacje adaptacyjne.
Czym są aplikacje adaptacyjne?
Aplikacje adaptacyjne zmieniają układy na podstawie zmian w wyświetlaniu aplikacji, przede wszystkim rozmiaru okna aplikacji. Aplikacje adaptacyjne dostosowują się też do zmian pozycji urządzeń składanych, np. do pozycji stołowej lub książkowej, oraz do zmian gęstości ekranu i rozmiaru czcionki.
Zamiast tylko rozciągać lub zmniejszać elementy interfejsu w odpowiedzi na różne rozmiary okien, aplikacje adaptacyjne zastępują komponenty układu i pokazują lub ukrywają treści. Na przykład na standardowych telefonach aplikacja adaptacyjna może wyświetlać dolny pasek nawigacyjny, ale na dużych ekranach – kolumnę nawigacji. Na dużych ekranach aplikacje adaptacyjne wyświetlają więcej treści, np. w układzie dwupanelowym ze szczegółową listą, a na małych ekranach – mniej treści, czyli listę lub szczegóły.
W przeszłości aplikacje zwykle działały na pełnym ekranie. 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 jednym typie urządzenia 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 aplikacja będzie działać bezbłędnie na wszystkich ich urządzeniach i zapewni ulepszone funkcje na dużych ekranach. Użytkownicy mogą wykonywać wiele zadań jednocześnie w trybie wielu okien, co zwiększa wrażenia użytkownika aplikacji i produktywność.
Aplikacje ograniczone do jednego zadania na standardowych telefonach tracą możliwość dotarcia do rosnącej bazy użytkowników, którzy mają różne potrzeby.
Google Play
Google Play udostępnia kolekcje i rekomendacje aplikacji na tablety i urządzenia składane, dzięki którym użytkownicy mogą odkrywać aplikacje wysokiej jakości.
W Google Play aplikacje i gry zoptymalizowane pod kątem dużych ekranów są wyświetlane wyżej niż te, które nie są zoptymalizowane. Google Play ustala ranking na podstawie wskazówek dotyczących jakości aplikacji na duże ekrany. Wyższa pozycja w rankingu zwiększa widoczność aplikacji, ponieważ użytkownicy korzystający z wielu urządzeń mogą zobaczyć na 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 z informacjami o aplikacji. Ostrzeżenie informuje użytkowników, że aplikacja może nie działać prawidłowo na urządzeniach z dużym ekranem.
Twórz aplikacje adaptacyjne, aby zwiększyć ich wykrywalność w Google Play i zmaksymalizować liczbę urządzeń, na które 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, a będzie łatwa w zarządzaniu, rozszerzalna i gotowa na przyszłe formaty i tryby okien.
Aby utworzyć aplikację adaptacyjną, która obsługuje wszystkie rozmiary i konfiguracje wyświetlaczy:
- Podejmowanie decyzji dotyczących układu na podstawie klas rozmiaru okna
- Tworzenie aplikacji za pomocą biblioteki Compose Material 3 Adaptive
- Obsługa innych metod wprowadzania danych niż dotyk
- Testowanie na wszystkich typach urządzeń
Umiejętności związane z Androidem
Wyświetl na GitHubieDostosowywanie aplikacji
adaptive, aby zaktualizować interfejs aplikacji i dostosować go do różnych urządzeń z Androidem i wyświetlaczy.android skills add adaptiveKlasy rozmiaru okna
Wymiary okna aplikacji mogą się różnić w zależności od urządzenia, a w przypadku urządzeń składanych – nawet na tym samym urządzeniu, nawet gdy aplikacja jest wyświetlana na pełnym ekranie. Różne orientacje urządzenia dają różne formaty obrazu. W trybie wielu okien rozmiar okna aplikacji, format obrazu i orientacja mogą się różnić od rozmiaru, formatu i orientacji ekranu urządzenia.
Aplikacje adaptacyjne upraszczają i uogólniają problem określania i zarządzania rozmiarem okna, formatem obrazu i orientacją, ponieważ podczas renderowania układów uwzględniają tylko okno aplikacji. Działa to również wtedy, gdy okno aplikacji jest wyświetlane na pełnym ekranie.
Klasy rozmiaru okna dzielą okna aplikacji na kompaktowe, średnie i 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, gdy klasa rozmiaru okna zmieni się:
val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
Panele treści
Układ aktywności jest czasami nazywany ekranem. Aplikacja może mieć na przykład ekran główny, ekran listy i ekran szczegółów elementu. Terminologia 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, jednocześnie może być wyświetlanych kilka ekranów aktywności. Panel to bardziej precyzyjne określenie wyświetlania treści poszczególnych aktywności.
Klasy wielkości okna pozwalają określić, ile paneli treści ma być wyświetlanych w układach wielopanelowych, zgodnie ze specyfikacją Material Design.
Panele można przeglądać. W klasach kompaktowego i średniego rozmiaru okna aplikacje wyświetlają jeden panel, więc nawigacja do dowolnego miejsca docelowego powoduje wyświetlenie jednego panelu.
W przypadku klasy rozmiaru okna rozszerzonego aplikacje mogą wyświetlać powiązane artykuły w wielu panelach, np. w układzie listy i szczegółów. Przejście do dowolnego panelu powoduje wyświetlenie układu z 2 panelami. Jeśli rozmiar okna zmieni się na kompaktowy lub średni, aplikacje adaptacyjne wyświetlają tylko 1 panel, czyli miejsce docelowe nawigacji, listę lub szczegóły.
|
|
|
Compose Material 3 Adaptive
Jetpack Compose to nowoczesne, deklaratywne podejście do tworzenia aplikacji adaptacyjnych bez konieczności powielania i utrzymywania wielu plików układu.
Biblioteka Compose Material 3 Adaptive zawiera elementy kompozycyjne, które zarządzają klasami rozmiaru okna, komponentami nawigacji, układami wielopanelowymi, pozycjami składania i lokalizacją zawiasu, na przykład:
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 panelach obok siebie w przypadku klasy rozmiaru okna Rozszerzone, ale tylko listę lub szczegóły w przypadku klas rozmiaru okna Kompaktowe i Średnie.
SupportingPaneScaffold: implementuje kanoniczny układ panelu pomocniczego.Wyświetla panel treści głównych i panel pomocniczy w przypadku rozwiniętego rozmiaru okna, ale tylko panel treści głównych w przypadku kompaktowego i średniego rozmiaru okna.
Biblioteka Compose Material 3 Adaptive jest kluczową zależnością przy tworzeniu aplikacji adaptacyjnych.
Konfiguracja i ciągłość
Aplikacje adaptacyjne zachowują ciągłość podczas zmian konfiguracji.
Zmiana konfiguracji następuje, gdy zmienia się rozmiar okna aplikacji, ułożenie urządzenia składanego, gęstość ekranu lub czcionka.
Domyślnie zmiany konfiguracji powodują ponowne utworzenie aktywności aplikacji i utratę wszystkich stanów aktywności. Aby zachować ciągłość, aplikacje adaptacyjne zapisują stan w metodzie onSaveInstanceState() aktywności lub w ViewModel.
Stan
Aplikacje adaptacyjne reagują na zmiany pozycji urządzeń składanych. Tryby obejmują tryb stołowy i tryb książki.
Interfejs WindowInfoTracker w Jetpack WindowManager umożliwia uzyskanie listy obiektów DisplayFeature dla urządzenia. Wśród funkcji wyświetlacza jest 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.
Wprowadzanie danych nie tylko dotykowo
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, możliwości wyrażania siebie 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 platforma Androida wykonuje większość pracy za Ciebie:
Jetpack Compose w wersji 1.7 lub nowszej: nawigacja za pomocą klawisza Tab oraz klikanie, zaznaczanie i przewijanie za pomocą myszy lub trackpada są domyślnie obsługiwane.
Biblioteka Jetpack
androidx.compose.material3: umożliwia użytkownikom pisanie w dowolnym komponencieTextFieldza pomocą rysika.Pomoc dotycząca skrótów klawiszowych: ułatwia użytkownikom znajdowanie skrótów klawiszowych na platformie Androida i w aplikacjach. Opublikuj skróty klawiszowe aplikacji w pomocy dotyczącej skrótów klawiszowych, zastępując wywołanie zwrotne okna
onProvideKeyboardShortcuts().
Aby w pełni obsługiwać urządzenia o różnych rozmiarach, aplikacje adaptacyjne obsługują wszystkie rodzaje danych wejściowych.
Jak testować aplikacje adaptacyjne
Przetestuj 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 Compose, aby sprawdzać 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 urządzenia z dużym ekranem
Wskazówki dotyczące jakości aplikacji na duże ekrany pomogą Ci sprawdzić, czy aplikacja adaptacyjna działa prawidłowo na tabletach, urządzeniach składanych i urządzeniach z ChromeOS. Wytyczne obejmują testy, które umożliwiają weryfikację funkcji aplikacji w przypadku głównych ścieżek użytkownika. Chociaż wytyczne koncentrują się na dużych ekranach, są zgodne ze wszystkimi rozmiarami ekranów.
Wiele konfiguracji
Interfejs DeviceConfigurationOverride w Compose w wersji 1.7 lub nowszej 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ć. Możesz na przykład przetestować wiele dowolnych rozmiarów interfejsu w ramach jednego uruchomienia zestawu testów na jednym urządzeniu lub emulatorze.
Dzięki funkcji rozszerzenia DeviceConfigurationOverride.then() możesz jednocześnie testować wiele parametrów konfiguracji, takich jak rozmiar czcionki, region, motyw i rozmiar układu.
Zrzuty ekranu po stronie hosta
Testy zrzutów ekranu po stronie hosta to szybki i skalowalny sposób na sprawdzenie 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 Compose.
Podglądy w widoku tworzenia
Podglądy Compose umożliwiają sprawdzanie interfejsu aplikacji w widoku projektu w Android Studio. Podglądy korzystają z 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ądzie 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 funkcji kompozycyjnych.
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 na bieżąco.
- Emulator Pixela Fold: emuluje telefon składany Pixel Fold z dużym ekranem.
- Emulator urządzenia Pixel Tablet: emuluje urządzenie Pixel Tablet z dużym ekranem.
- Emulator komputera: umożliwia testowanie okien o dowolnym rozmiarze, najeżdżania kursorem i skrótów klawiszowych.
Strumieniowanie danych na urządzenia zdalne
Bezpiecznie łącz się ze zdalnymi urządzeniami z Androidem znajdującymi się 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 prawidłowo na różnych urządzeniach fizycznych.
Strumieniowanie z urządzenia zdalnego jest zintegrowane z Android Studio. Więcej informacji znajdziesz w artykule Strumieniowanie urządzeń z Androidem na platformie Firebase.
Dodatkowe materiały
- Prezentacja z I/O: Tworzenie adaptacyjnych aplikacji na Androida