Tworzenie aplikacji adaptacyjnych

Ponad 300 milionów urządzeń z Androidem z dużym ekranem, w tym tabletów, urządzeń składanych, urządzeń z ChromeOS, wyświetlaczy samochodowych i telewizorów są dziś używane są dostarczane na bieżąco. Aby zapewnić optymalną wygodę użytkownikom coraz większej liczby i różnorodność urządzeń z dużym ekranem, jak również na standardowych telefonach – kompiluj aplikacji adaptacyjnych.

Czym są aplikacje adaptacyjne?

Uaktualnianie układów aplikacji adaptacyjnych w zależności od zmian w wyświetlaczu aplikacji. Głównie zmiany rozmiaru okna aplikacji. Jednak aplikacje adaptacyjne również obsługują zmiany stanu urządzeń składanych, np. stołu lub książki; oraz zmiany gęstości ekranu i rozmiaru czcionki.

Zamiast tylko rozciągać lub kurczyć elementy interfejsu w odpowiedzi na różne rozmiarów okien, aplikacje adaptacyjne zastępują komponenty układu i wyświetlają lub ukrywają treści. Na przykład na standardowych telefonach w aplikacji adaptacyjnej może wyświetlać się na pasku nawigacyjnym, a na dużych ekranach – z kolumny nawigacyjnej. Na dużych ekranach aplikacje adaptacyjne wyświetlają więcej treści, na przykład dwupanelowy układ z szczegółami listy; włączono na małych ekranach, mniej treści, listy lub szczegółów.

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

W przeszłości szybko zanikającej, skupionej wokół telefonów aplikacje działały na pełnym ekranie. Dziś aplikacje działają w tryb wielu okien w oknach o dowolnej wielkości niezależnie od ekranu urządzenia rozmiaru. Użytkownicy mogą w każdej chwili zmienić rozmiar okna. 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żytkownicy oczekują, że aplikacja będzie działać bez problemów na wszystkich urządzeniach na duże ekrany. Użytkownicy muszą wykonywać wiele zadań jednocześnie w trybie wielu okien przez zwiększyć wygodę korzystania z aplikacji i zwiększyć produktywność.

Aplikacje ograniczone do jednozadaniowości na standardowych telefonach nie mają większej liczby użytkowników bazują na zróżnicowanych możliwościach.

Google Play

W Google Play znajdziesz kolekcje aplikacji na tablety i składane oraz rekomendacje, które pozwalają użytkownikom odkrywać aplikacje wysokiej jakości.

Google Play umieszcza aplikacje i gry zoptymalizowane pod kątem dużych ekranów wyżej niż niezoptymalizowane aplikacji. Ranking jest oparty na wskazówkach dotyczących jakości aplikacji z dużym ekranem. Wyższa ranking zwiększa wykrywalność, ponieważ użytkownicy, którzy korzystają z różnych urządzeń, mogą zobaczyć oceny i opinie wyświetlane na dużych ekranach.

W przypadku aplikacji, które nie spełniają wymagań Sklepu Play dotyczących jakości dużego ekranu, na stronie z informacjami o aplikacji. Ostrzeżenie zawiera informację dla użytkowników, że aplikacja może nie są zbyt skuteczne na urządzeniach z dużym ekranem.

Rysunek 2. Ostrzeżenie dotyczące jakości technicznej na stronie z informacjami o aplikacji.

Twórz aplikacje adaptacyjne, które zwiększają wykrywalność w Google Play i maksymalizują liczba urządzeń, na których można pobrać Twoją aplikację.

Od czego zacząć

Pomyśl o adaptacyjnym projektowaniu na wszystkich etapach tworzenia aplikacji – od planowania lub wdrożenia. Informuj grafików o adaptacyjnym projekcie. Zaprojektuj aplikację tak, a przy tym tworzyć aplikacje, które są łatwe do opanowania, elastyczne i gotowe dla przyszłych formatów i trybów okien.

Aby utworzyć aplikację adaptacyjną, która obsługuje wszystkie rozmiary i konfiguracje wyświetlaczy: następujące:

  • Używanie klas rozmiarów okna do podejmowania decyzji dotyczących układu
  • Utwórz za pomocą biblioteki Compose Material 3 Adaptive
  • Obsługa wprowadzania danych poza trybem dotykowym
  • Testowanie 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 będzie działać na pełnym ekranie. Różne orientacje urządzeń pozwalają uzyskać różne formaty obrazu. W tryb wielu okien, rozmiar okna aplikacji, format obrazu i orientacja różnią się od ekranu urządzenia.

Aplikacje adaptacyjne upraszczają i uogólniają problem określania i zarządzania rozmiar okna, format obrazu i orientację, uwzględniając tylko okno aplikacji. podczas renderowania układów, co działa również wtedy, gdy okno aplikacji jest ustawione na pełny ekran.

Klasy rozmiaru okna klasyfikują okna aplikacji jako kompaktowe, średnie lub rozwinięty na podstawie szerokości lub wysokości okna.

Klasy rozmiaru okna kompaktowego, średniej i rozwiniętej szerokości.
Rysunek 3. Klasy rozmiaru okna oparte na szerokości wyświetlania.
.

Oblicz WindowSizeClass swojej aplikacji za pomocą currentWindowAdaptiveInfo() funkcja najwyższego poziomu Utwórz wiadomość Biblioteka adaptacyjna Material 3 Funkcja zwraca instancję WindowAdaptiveInfo, który zawiera windowSizeClass. Twoja aplikacja otrzymuje aktualizacje po każdej zmianie klasy rozmiaru okna:

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass

Panele treści

Układ aktywności jest czasami określany jako ekran. Na przykład plik może mieć ekran główny, ekran z listą i ekran z informacjami o elemencie. oznacza, że każde działanie wypełnia ekran urządzenia.

jednak na ekranach urządzeń, które są wystarczająco duże, aby po rozwinięciu szerokość okna była możliwa klasy rozmiaru okna, na ekranie może być widocznych jednocześnie kilka ekranów związanych z aktywnością. Panel to bardziej precyzyjne określenie, które oznacza wyświetlanie treści poszczególnych działań.

Klasy rozmiaru okna pozwalają określić, w ilu panelach treści chcesz wyświetlać układy z kilkoma panelami zgodnie z zasadami Material Design.

Ekrany urządzenia są podzielone na panele: 1 w klasie rozmiaru okna kompaktowego i średniego, 2 panele w klasie rozmiaru okna rozwiniętego.
Rysunek 4. Liczba paneli treści na klasę rozmiaru okna.

Można poruszać się w panelach. W przypadku klas o małym i średnim rozmiarze okna aplikacje wyświetlają pojedynczy panel; więc po przejściu do dowolnego miejsca docelowego wyświetli się jedno okienko.

W klasie rozmiaru rozwiniętego okna aplikacje mogą wyświetlać powiązane treści w wielu panele, takie jak układ z listą szczegółów. Wyświetli się dowolny panel układ z 2 panelami. Jeśli okno zmieni się na kompaktowe lub średnie, aplikacje adaptacyjne wyświetlają tylko jeden panel, miejsce docelowe nawigacji – listę lub szczegóły.

.
Rysunek 5. Układ ze szczegółami listy z panelem listy jako miejscem docelowym nawigacji.
.
Rysunek 6. Układ z informacjami o liście z panelem szczegółów jako miejscem docelowym nawigacji.

Compose Material 3 – adaptacyjny

Jetpack Compose to nowoczesne, deklaratywne podejście do tworzenia aplikacji adaptacyjnych bez duplikowania i obsługi wielu plików układu.

Biblioteka adaptacyjna Compose Material 3 zawiera kompozycje, którymi można zarządzać klasy rozmiaru okien, komponenty nawigacyjne, układy z kilkoma panelami; stan składanego i zawiasu, na przykład:

  • NavigationSuiteScaffold: automatyczne przełączanie się między paskiem nawigacyjnym; i kolejkę nawigacji w zależności od klasy rozmiaru okna aplikacji i stanu urządzenia.

  • ListDetailPaneScaffold: implementuje wersję kanoniczną szczegółów listy .

    Dostosowuje układ do rozmiaru okna aplikacji. Przedstawia listę i szczegóły element listy w panelach obok siebie w rozwiniętym oknie lecz tylko listę lub szczegóły o małym i średnim rozmiarze okna zajęcia.

  • SupportingPaneScaffold: implementuje kanoniczny panel obsługi. .

    Wyświetla główne panele z treścią i panel pomocniczy w rozwiniętym oknie klasa rozmiaru, ale tylko panel treści głównej w przypadku okna o niewielkim i średnim rozmiarze. zajęcia.

Biblioteka adaptacyjna Compose Material 3 jest niezbędny tworzenia aplikacji adaptacyjnych.

Konfiguracja i ciągłość

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

Zmiana konfiguracji następuje przy zmianie rozmiaru okna aplikacji, stanie składanego elementu, gęstości ekranu lub czcionki.

Domyślnie zmiany w konfiguracji odtwarzają aktywność w aplikacji i całą aktywność lub województwa. Aby zachować ciągłość, aplikacje adaptacyjne zapisują stan w w metodzie onSaveInstanceState() aktywności lub w ViewModel.

Stan

Aplikacje adaptacyjne reagują na zmiany stanu urządzeń składanych. Stany uwzględnić stan stołu i książki.

Rysunek 7. Składane urządzenie w stanie stołu.

Interfejs WindowInfoTracker w programie Jetpack WindowManager umożliwia: uzyskać listę obiektów DisplayFeature dla urządzenia. Na ekranie funkcje to FoldingFeature.State, który wskazuje, czy urządzenie jest otworzyć je całkowicie lub do połowy.

Biblioteka adaptacyjna Compose Material 3 zapewnia currentWindowAdaptiveInfo() Funkcja najwyższego poziomu, która zwraca instancja WindowAdaptiveInfo zawierająca windowPosture.

Wprowadzanie tekstu inne niż dotykowe

Użytkownicy często podłączają zewnętrzne klawiatury, trackpady, myszy i rysiki do dużych rozmiarów urządzenia ekranów. Urządzenia peryferyjne zwiększają produktywność użytkowników, precyzję wprowadzania wyrażania osobistego charakteru i ułatwienia dostępu. Większość urządzeń z ChromeOS ma z wbudowanymi klawiaturami i trackpadami.

Aplikacje adaptacyjne obsługują zewnętrzne urządzenia wejściowe, ale większość pracy jest wykonywana przez platformę Androida:

  • Jetpack Compose w wersji 1.7 lub nowszej: nawigacja po kartach z klawiaturą i mysz lub domyślnie obsługiwane są klikanie, wybieranie i przewijanie na trackpadzie.

  • Biblioteka Jetpack androidx.compose.material3: umożliwia użytkownikom pisanie do dowolnego komponentu TextField za pomocą rysika.

  • Asystent skrótów klawiszowych: tworzy platformę Androida i klawiaturę aplikacji skrótów wykrywalnych przez użytkowników. Opublikuj skróty klawiszowe aplikacji w języku: Asystent skrótów klawiszowych, zastępując onProvideKeyboardShortcuts() – wywołanie zwrotne okna.

Aby w pełni obsługiwać wszystkie formaty, aplikacje adaptacyjne obsługują dane w każdym .

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 po stronie hosta i podglądów tworzenia wiadomości. Uruchamianie aplikacji w emulatorach Android Studio i zdalnych urządzeniach z Androidem hostowanych w Centra danych Google.

Wskazówki dotyczące jakości aplikacji na duży ekran

Aby Twoja aplikacja adaptacyjna dobrze działała, postępuj zgodnie ze wskazówkami dotyczącymi jakości aplikacji na duży ekran. na tabletach, urządzeniach składanych i urządzeniach z ChromeOS. Wytyczne obejmują testy, które umożliwiają weryfikację działania aplikacji w przypadku krytycznych ścieżek użytkownika. Mimo że wytyczne dotyczą dużych ekranów, są zgodne ze wszystkimi rozmiarami ekranów.

Wiele konfiguracji

Interfejs DeviceConfigurationOverride w Compose w wersji 1.7 i nowszych pozwala zastąpić różne aspekty konfiguracji urządzenia. Interfejs API symuluje różne konfiguracje urządzeń w dowolny sposób. które chcesz przetestować. Możesz na przykład testować wiele, dowolnych rozmiarów interfejsu podczas 1 testu pakietu na jednym urządzeniu; za pomocą emulatora.

Dzięki funkcji rozszerzenia DeviceConfigurationOverride.then() możesz: Testuj wiele parametrów konfiguracyjnych, takich jak rozmiar czcionki, język, motyw, i rozmiaru układu.

Zrzuty ekranu po stronie hosta

Testy zrzutu ekranu po stronie hosta to szybki i skalowalny sposób weryfikacji do wyglądu układów aplikacji. Użyj zrzutów ekranu po stronie hosta, aby przetestować interfejs różne rozmiary wyświetlaczy.

Więcej informacji znajdziesz w artykule Testowanie zrzutu ekranu w wersji przedpremierowej w narzędziu Compose.

Podglądy tworzenia wiadomości

Podglądy tworzenia wiadomości umożliwiają sprawdzenie interfejsu aplikacji w widoku projektu Androida. Studio. Podgląd korzysta z adnotacji, takich jak @PreviewScreenSizes, @PreviewFontScale i @PreviewLightDark, aby wyświetlić funkcję kompozycyjnej w różnych konfiguracjach. Możesz nawet wchodzić w interakcje z podglądami.

Android Studio podkreśla też typowe problemy z obsługą, takie jak: zbyt szerokich przycisków lub pól tekstowych.

Więcej informacji znajdziesz w artykule Podgląd interfejsu użytkownika za pomocą funkcji kompozycyjnych podglądów.

Emulatory

W Android Studio znajdziesz różne emulatory do testowania różnych rozmiarów układów:

  • Emulator z możliwością zmiany rozmiaru: emuluje telefon, tablet lub urządzenie składane i pozwala możesz na bieżąco przełączać się między nimi
  • Emulator Pixela Fold: emuluje składany telefon Pixel Fold z dużym ekranem
  • Emulator urządzenia Pixel Tablet: emuluje urządzenie z dużym ekranem urządzenia Pixel Tablet
  • Emulator pulpitu: umożliwia testowanie swobodnego wyświetlania okien, najechania kursorem myszy i skróty klawiszowe

Strumieniowe przesyłanie danych z urządzenia zdalnego

Bezpiecznie łącz się ze zdalnymi urządzeniami z Androidem hostowanymi w centrach danych Google i uruchamiaj w Twojej aplikacji na najnowszych urządzeniach Pixel i Samsung. Instaluj i debuguj aplikacje, uruchamiaj poleceń ADB oraz obracać i zwijać urządzenia, by aplikacja działała prawidłowo z wielu prawdziwych urządzeń.

Zdalne strumieniowanie z urządzenia jest zintegrowane z Android Studio. Aby dowiedzieć się więcej, Więcej informacji: Przesyłanie strumieniowe danych z urządzenia z Androidem w oparciu o Firebase.

Dodatkowe materiały