Obecnie na świecie jest ponad 300 milionów urządzeń z Androidem o dużym ekranie, w tym tablety, składane, urządzenia z ChromeOS, wyświetlacze samochodowe i telewizory. Liczba ta stale rośnie. Aby zapewnić użytkownikom optymalną wygodę 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łady na podstawie zmian w wyświetlaniu aplikacji, głównie rozmiaru okna aplikacji. Aplikacje adaptacyjne uwzględniają też zmiany w kształcie urządzeń składanych (np. położenie stołu lub książki) oraz zmiany gęstości ekranu i rozmiaru czcionki.
Zamiast rozciągania lub zmniejszania elementów interfejsu w reakcji na różne rozmiary okna aplikacje adaptacyjne zastępują elementy układu i wyświetlają lub ukrywają treści. Na przykład na standardowych telefonach aplikacja adaptacyjna może wyświetlać dolny pasek nawigacyjny, a na większych ekranach – ramkę. Na dużych ekranach aplikacje adaptacyjne wyświetlają więcej treści, np. układ z dwoma panelami lub listę z szczegółami. Na małych ekranach wyświetlają mniej treści, np. tylko listę lub tylko szczegóły.
W przeszłości szybko zanikającej, skupionej wokół telefonów aplikacje działały na pełnym ekranie. Obecnie aplikacje działają w trybie wielu okien w oknach o dowolnej wielkości niezależnie od rozmiaru ekranu urządzenia. Użytkownicy mogą w dowolnym momencie zmienić rozmiar okna. Dlatego nawet na jednym urządzeniu aplikacje muszą być elastyczne.
Aplikacje adaptacyjne wyglądają świetnie i działają dobrze na każdym urządzeniu w każdej konfiguracji.
Dlaczego warto tworzyć adaptacyjne interfejsy użytkownika?
Użytkownicy oczekują, że aplikacja będzie działać bez zarzutu na wszystkich ich urządzeniach i zapewni dodatkowe funkcje na dużych ekranach. W trybie wielu okien użytkownicy wykonują wiele zadań jednocześnie, co zwiększa wygodę korzystania z aplikacji i zwiększa produktywność.
Aplikacje ograniczone do jednoczesnego wykonywania tylko jednej czynności na standardowych telefonach nie wykorzystują potencjału rosnącej bazy użytkowników i różnorodnych możliwości.
Google Play
Google Play udostępnia kolekcje oraz rekomendacje aplikacji na tablety i składane, dzięki którym użytkownicy mogą odkrywać aplikacje wysokiej jakości.
Google Play wyżej ceni aplikacje i gry zoptymalizowane pod kątem dużych ekranów niż te bez optymalizacji. Ranking jest ustalany na podstawie wskazówek dotyczących jakości aplikacji na duże ekrany. Wyższa pozycja zwiększa widoczność aplikacji, ponieważ umożliwia użytkownikom korzystającym z wielu urządzeń wyświetlanie na telefonach ocen i opinii dotyczących dużych ekranów.
Jeśli aplikacja nie spełnia standardów jakości dużego ekranu Sklepu Play, na stronie z informacjami o niej będzie wyświetlane ostrzeżenie. Ostrzeżenie informuje użytkowników, że aplikacja może nie działać prawidłowo na urządzeniach z dużym ekranem.
Utwórz aplikacje adaptacyjne, aby zwiększyć wykrywalność w Google Play i zmaksymalizować liczbę urządzeń, na które można pobrać Twoją aplikację.
Od czego zacząć
Pamiętaj o projektowaniu adaptacyjnych w wszystkich fazach tworzenia aplikacji, od planowania do wdrażania. Poinformuj grafików o projektowaniu adaptacyjnym. Zaprojektuj aplikację tak, aby była dostosowywana do różnych urządzeń. Dzięki temu będzie ona łatwa w zarządzaniu, rozszerzalna i przygotowana na przyszłe formaty oraz tryby okna.
Aby utworzyć aplikację adaptacyjną, która obsługuje wszystkie rozmiary i konfiguracje wyświetlaczy, wykonaj te czynności:
- Używanie klas rozmiaru okna do podejmowania decyzji dotyczących układu
- Tworzenie aplikacji z użyciem biblioteki Compose Material 3 Adaptive
- Obsługa wprowadzania danych poza trybem dotykowym
- Testowanie na wszystkich typach urządzeń
Klasy rozmiarów okna
Wymiary okna aplikacji mogą się różnić na różnych urządzeniach (lub na tym samym urządzeniu w przypadku składanych urządzeń), nawet gdy aplikacja jest wyświetlana na pełnym ekranie. Różne orientacje urządzeń pozwalają uzyskać różne formaty obrazu. W trybie wielookiennym rozmiar, proporcje i orientacja okna aplikacji mogą różnić się od ekranu urządzenia.
Aplikacje adaptacyjne upraszczają i uogólniają problem określania rozmiaru okna, proporcji i orientacji, biorąc pod uwagę tylko okno aplikacji podczas renderowania układów. Działa to również wtedy, gdy okno aplikacji jest pełnoekranowe.
Klasy rozmiarów okna dzielą okna aplikacji na kompaktowe, średnie i rozwinięte w zależności od ich szerokości lub wysokości.
Oblicz WindowSizeClass aplikacji za pomocą funkcji najwyższego poziomu currentWindowAdaptiveInfo() biblioteki Compose Material 3 Adaptive. Funkcja zwraca wystąpienie obiektu WindowAdaptiveInfo, który zawiera element windowSizeClass. Aplikacja będzie otrzymywać aktualizacje za każdym razem, gdy zmieni się klasa rozmiaru okna:
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 produktu. 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ć rozszerzoną szerokość klasy rozmiaru okna, jednocześnie może być wyświetlanych kilka ekranów aktywności. Panel to dokładniejsze określenie wyświetlania treści w przypadku poszczególnych działań.
Klasy rozmiarów okna umożliwiają określenie liczby paneli treści wyświetlanych w układach wielopanelowych zgodnie z Material Design.
Panele można przewijać. W przypadku okien o małym i średnim rozmiarze aplikacje wyświetlają jeden panel, więc nawigacja do dowolnego miejsca wyświetla jeden panel.
W przypadku klasy rozmiaru okna „Rozwinięte” aplikacje mogą wyświetlać powiązane treści w kilku panelach, np. w układzie lista–szczegóły. Przejście do dowolnego panelu powoduje wyświetlenie układu z dwoma panelami. Jeśli rozmiar okna zmieni się na kompaktowy lub średni, aplikacje adaptacyjne pokażą tylko 1 panel – miejsce docelowe nawigacji – listę lub szczegóły.
|
|
|
Tworzenie materiału 3 z adaptacją
Jetpack Compose to nowoczesne, deklaratywne podejście do tworzenia aplikacji dostosowujących się do potrzeb użytkownika bez konieczności powielania i utrzymywania wielu plików układu.
Biblioteka Compose Material 3 Adaptive zawiera komponenty, które zarządzają klasami rozmiarów okien, komponentami nawigacji, układami wielopanelowymi oraz składanymi postawami i lokalizacją zawiasów, na przykład:
NavigationSuiteScaffold: automatycznie przełącza się między paskiem nawigacyjnym a szybką nawigacji w zależności od klasy rozmiaru okna aplikacji i stanu urządzenia.ListDetailPaneScaffold: implementuje kanoniczny układ listy i szczegółów.dostosowuje układ do rozmiaru okna aplikacji. W przypadku rozmiaru okna „Więcej” lista i szczegóły elementu na liście są wyświetlane w panelach obok siebie, ale w przypadku rozmiarów „Kompaktowy” i „Średni” są widoczne tylko lista lub szczegóły.
SupportingPaneScaffold: implementuje kanoniczny układ panelu pomocniczego.W przypadku okna o rozmiarach większych niż średnie wyświetla panel głównej treści i panel pomocniczy, a w przypadku okna o rozmiarach mniejszych niż średnie – tylko panel głównej treści.
Biblioteka Compose Material 3 Adaptive jest niezbędną zależnością w przypadku tworzenia aplikacji dostosowanych.
Konfiguracja i ciągłość
Aplikacje adaptacyjne zachowują ciągłość podczas zmian konfiguracji.
Zmiana konfiguracji następuje w przypadku zmiany rozmiaru okna aplikacji, stanu urządzenia składanego lub gęstości ekranu bądź czcionki.
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.
Posture
Aplikacje adaptacyjne reagują na zmiany w pozycji urządzeń składanych. Postawy obejmują pozycję na stole i w ksiądze.
Interfejs WindowInfoTracker w menedżerze okien Jetpack WindowManager umożliwia uzyskanie listy obiektów DisplayFeature dla urządzenia. Jedną z 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 wystąpienie obiektu WindowAdaptiveInfo zawierającego 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, personalizację i ułatwienia dostępu. Większość urządzeń z ChromeOS ma wbudowaną klawiaturę i touchpad.
Aplikacje adaptacyjne obsługują zewnętrzne urządzenia wejściowe, ale większość pracy wykonuje za Ciebie platforma Android:
Jetpack Compose w wersji 1.7 lub nowszej: domyślnie obsługiwane są nawigacja za pomocą klawiszy tabulacji oraz klikanie, wybieranie i przewijanie myszką lub trackpadem.
Biblioteka Jetpacka
androidx.compose.material3: umożliwia użytkownikom pisanie za pomocą rysika w dowolnym komponencieTextField.Informacje o skrótach klawiszowych: sprawiają, że skróty klawiszowe na platformie Android i w aplikacjach są widoczne dla użytkowników. Opublikuj skróty klawiszowe aplikacji w ramach aplikacji Keyboard Shortcuts Helper, zastępując wywołanie okna
onProvideKeyboardShortcuts().
Aby w pełni obsługiwać formaty wszystkich rozmiarów, aplikacje adaptacyjne obsługują wprowadzanie wszystkich typów.
Jak testować aplikacje adaptacyjne
Przetestuj różne rozmiary ekranów i okien oraz różne konfiguracje urządzeń. Aby sprawdzić układy aplikacji, użyj zrzutów ekranu hosta i podglądów w edytorze. Uruchom aplikację na emulatorach Android Studio i zdalnych urządzeniach z Androidem hostowanych w centrach danych Google.
Wytyczne dotyczące jakości aplikacji na duży ekran
Kierując się wskazówkami dotyczącymi jakości aplikacji na duży ekran, masz pewność, że Twoja aplikacja adaptacyjna dobrze działa na tabletach, urządzeniach składanych i urządzeniach z ChromeOS. Wytyczne obejmują testy, które umożliwiają weryfikację funkcjonalności aplikacji na kluczowych ścieżkach użytkownika. Chociaż te wskazówki dotyczą głównie dużych ekranów, są one zgodne ze wszystkimi rozmiarami ekranów.
Wiele konfiguracji
Interfejs DeviceConfigurationOverride w wersji Compose 1.7 i wyższych umożliwia zastąpienie różnych aspektów konfiguracji urządzenia. Interfejs API symuluje różne konfiguracje urządzeń w sposób zlokalizowany w przypadku każdego typu treści, które chcesz przetestować. Możesz na przykład przetestować wiele dowolnych rozmiarów interfejsu podczas jednego uruchomienia zestawu testów na jednym urządzeniu lub emulatorze.
Dzięki funkcji rozszerzenia DeviceConfigurationOverride.then() możesz testować jednocześnie wiele parametrów konfiguracji, takich jak rozmiar czcionki, lokalizacja, motyw i rozmiar układu.
Zrzuty ekranu po stronie hosta
Testy zrzutów ekranu po stronie hosta to szybki i elastyczny sposób na sprawdzenie wizualnego wyglądu układów aplikacji. Używaj zrzutów ekranu po stronie hosta, aby testować interfejs użytkownika na różnych rozmiarach ekranu.
Więcej informacji znajdziesz w artykule Testowanie zrzutów ekranu w komponie wyświetlania podglądu.
Podglądy tworzenia wiadomości
Podgląd tworzenia pozwala sprawdzić interfejs aplikacji w widoku projektu w Android Studio. Podgląd korzysta z adnotacji, takich jak @PreviewScreenSizes, @PreviewFontScale i @PreviewLightDark, aby umożliwić wyświetlanie treści kompozycyjnej w różnych konfiguracjach. Możesz nawet wchodzić w interakcję z podglądami.
Android Studio wyróżnia też typowe problemy z obsługą podglądów, na przykład zbyt szerokie przyciski czy pola tekstowe.
Więcej informacji znajdziesz w artykule Przeglądanie interfejsu za pomocą składanych podglądów.
Emulatory
Android Studio oferuje różne emulatory do testowania różnych rozmiarów układu:
- Emulator o zmiennym rozmiarze: emuluje telefon, tablet lub składane urządzenie i pozwala przełączać się między nimi w locie.
- Emulator Pixel Fold: emuluje składany telefon Pixel Fold z dużym ekranem.
- Emulator Pixel Tablet: emuluje urządzenie Pixel Tablet z dużym ekranem.
- Emulator pulpitu: umożliwia testowanie dowolnego rozmiaru okien, nawigacji kursorem i skrótów klawiszowych.
Strumieniowanie na urządzeniu zdalnym
Bezpieczne łączenie z odległymi urządzeniami z Androidem hostowanymi w centrach danych Google oraz uruchamianie aplikacji na najnowszych urządzeniach Pixel i Samsung. Instaluj i debuguj aplikacje, uruchamiaj polecenia ADB oraz obracaj i składaj urządzenia, aby mieć pewność, że aplikacja działa prawidłowo na różnych prawdziwych urządzeniach.
Zdalne strumieniowanie z urządzenia jest zintegrowane z Android Studio. Więcej informacji znajdziesz w artykule Strumieniowanie z urządzeń z Androidem za pomocą Firebase.
Dodatkowe materiały
- Prezentacja na konferencji I/O: Tworzenie aplikacji na Androida z funkcją adaptacji