Migracja interfejsu do układów elastycznych

Aplikacje na Androida muszą obsługiwać stale rozwijający się ekosystem urządzeń czynników. Interfejs aplikacji powinien być elastyczny, aby pasować do różnych rozmiarów ekranów a także różne orientacje i stany urządzenia.

Elastyczny interfejs bazuje na zasadach elastyczności i ciągłości.

Elastyczność oznacza układy, które optymalnie wykorzystują dostępną przestrzeń i a także gdy zmienia się ilość dostępnego miejsca. Korekty mogą przyjmować różne formy: zwiększenie rozmiaru pojedynczego wyświetlenia, zmianę pozycji wyświetleń w bardziej dostępnych miejscach, pokazywania lub ukrywania dodatkowych widoków. ich kombinacji.

Ciągłość oznacza płynną obsługę użytkowników podczas przechodzenia z jednej na drugą. z jednego rozmiaru okna do drugiego. Niezależnie od tego, z jaką stroną korzysta użytkownik nie powinno być przerywane. Ponieważ zmiana rozmiaru mogłaby wraz z zniszczeniem i odtworzeniem całej hierarchii widoków, jest ważne, aby użytkownik nie utracił swojego miejsca ani danych.

Czego warto unikać

Unikaj używania fizycznych wartości sprzętowych przy podejmowaniu decyzji dotyczących układu. it podejmowanie decyzji na podstawie ustalonej wartości może być kuszące, w sytuacjach, w których wartości te nie są przydatne do określania miejsca, z jakąś pracą.

W aplikacjach w trybie wielu okien rozmiar okien może się zmieniać. obraz w obrazie lub w oknach dowolnych, takich jak ChromeOS. Jest ich jeszcze więcej na jednym fizycznym ekranie, np. na urządzeniu składanym lub urządzeniu na wielu wyświetlaczach. We wszystkich tych przypadkach rozmiar fizycznego ekranu nie jest mają znaczenie przy wyborze sposobu wyświetlania treści.

Rysunek 1. Rozmiary okien mogą różnić się od rozmiarów urządzenia fizycznego lub rozmiar interfejsu.

Z tego samego powodu unikaj blokowania aplikacji w określonej orientacji lub format obrazu. Urządzenie może być w określonej orientacji, Aplikacja może mieć inną orientację w zależności od rozmiaru okno. Na przykład na tablecie w orientacji poziomej w trybie wielu okien Aplikacja może być pionowa, bo jest wyższa niż szersza.

Unikaj też sprawdzania, czy urządzenie to telefon czy tablet. To, co zalicza się do tabletów, jest dość subiektywne: o określonym rozmiarze lub współczynniku proporcji albo o określonej kombinacji rozmiaru i współczynnika proporcji współczynnik proporcji? W miarę pojawiania się nowych formatów te założenia mogą się zmieniać. rozróżnienie staje się ważne.

Zamiast wypróbować którąkolwiek z poprzednich strategii, użyj punktów przerwania i okna klas rozmiarów.

Punkty przerwania i klasy rozmiaru okna

Część ekranu przydzielone aplikacji to jej adres okno. Może zająć cały ekran lub jego część, dlatego rozmiaru okna podczas podejmowania ogólnych decyzji dotyczących układu aplikacji.

Podczas projektowania pod kątem wielu formatów znajdź wartości progowe, w których decyzji wysokiego szczebla rozchodzą w różnych kierunkach. W tym celu Material Zaprojektuj siatkę z układem elastycznym. udostępnia punkty przerwania dla szerokości i wysokości, co pozwala mapować rozmiary nieprzetworzone w dyskretne, ustandaryzowane grupy nazywane klasami rozmiaru okna. Z powodu Wszechstronność przewijania w pionie sprawia, że większość aplikacji zwraca uwagę przede wszystkim klasy rozmiarów. Większość aplikacji można więc zoptymalizować pod kątem każdego rozmiaru ekranu wystarczy kilka punktów przerwania. Więcej informacji o klasach rozmiaru okna znajdziesz w artykule klas rozmiaru okna).

Stałe elementy interfejsu użytkownika

Material Design wytycznymi dotyczącymi układu określić regiony pasków aplikacji, nawigacji i zawartości. Zwykle pierwsza dwa to trwałe elementy interfejsu użytkownika (lub bardzo blisko) w głównym widoku w hierarchii. Pamiętaj, że „trwały” nie musi oznaczać, że wyświetlenie jest zawsze jest widoczny, ale pozostaje na swoim miejscu, podczas gdy inne wyświetlenia treści przenieść lub zmienić. Na przykład element nawigacji może znajdować się jest poza ekranem, ale zawsze jest widoczny.

Elementy trwałe mogą być elastyczne i zwykle zajmują do całej szerokości lub pełnej wysokości okna, więc lepiej użyć klas rozmiaru, i zdecydować, gdzie je umieścić. Określa miejsce pozostawione na treści. W poniższym fragmencie kodu aktywność używa dolnego paska na kompaktowych ekranach oraz górny pasek aplikacji na większe ekrany. Zakwalifikowany układ używa punktów przerwania szerokości jak opisano wcześniej.

<!-- res/layout/main_activity.xml -->

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- content view(s) -->

    <com.google.android.material.bottomappbar.BottomAppBar
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        ... />
</androidx.constraintlayout.widget.ConstraintLayout>


<!-- res/layout-w600dp/main_activity.xml -->
<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        ... />

    <!-- content view(s) -->
</androidx.constraintlayout.widget.ConstraintLayout>

Treść

Po ustawieniu stałych elementów interfejsu przeznacz pozostałe miejsce dla treści, np. gdy używasz panelu nawigacyjnego w aplikacji NavHostFragment wykres. Zobacz Nawigacja po elastycznych interfejsach .

Sprawdź, czy wszystkie dane są dostępne dla różnych rozmiarów

Obecnie większość platform aplikacji korzysta z modelu danych oddzielonego od modelu komponenty Androida, które składają się na interfejs użytkownika (aktywności, fragmenty i fragmenty) Wyświetlenia). W Jetpack tę rolę zwykle pełnią firmy ViewModels, dodatkową korzyść wynikającą z tego, że nie wymagają zmiany konfiguracji (zobacz ViewModel Overview (Przegląd modeli widoku danych), aby dowiedzieć się więcej ).

Implementacja układu, który dostosowuje się do różnych rozmiarów, może użyć innego modelu danych w zależności od aktualnego rozmiaru. Pamiętaj jednak: jest to sprzeczne z zasadą jednokierunkowego przepływu danych. Dane powinny przepływać w dół do wyświetleń, a zdarzenia takie jak interakcje użytkowników powinny rosnąć. Utworzenie zależności w drugim kierunku, w której model danych jest zależny od tego, do konfiguracji warstwy UI, co znacznie komplikuje sprawę. Gdy rozmiar aplikacji zmienia się, musisz następnie uwzględnić konwersję z jednego modelu danych innego użytkownika.

Zamiast tego pozwól modelowi danych dostosować się do największej klasy rozmiaru, wybiórczo pokazywać, ukrywać lub zmieniać położenie treści w interfejsie, by dostosować bieżącej klasy rozmiaru. Poniżej przedstawiamy kilka strategii, których warto użyć przy podejmowaniu decyzji, układ powinien zachowywać się przy przechodzeniu między klasami rozmiaru.

Rozwiń treść

Układy kanoniczne: kanał

Większa przestrzeń może ułatwiać powiększanie treści i zmianę formatu aby były bardziej dostępne.

Powiększanie kolekcji. Wiele aplikacji wyświetla kolekcję elementów kontener przewijania, np. RecyclerView lub ScrollView. Włączenie automatycznie powiększy się automatycznie, by wyświetliło się więcej treści. Uważaj jednak, aby zawartość kontenera nie znalazła się w zbyt rozciągnięte lub zniekształcone. Na przykład w polu RecyclerView rozważ za pomocą innego menedżera układu, GridLayoutManager, StaggeredGridLayoutManager, lub FlexboxLayout, gdy ale szerokość nie jest zwarta.

Rysunek 2. Różni menedżerowie układu dla różnych rozmiarów okien zajęcia.

Pojedyncze elementy mogą też mieć inny rozmiar lub kształt, aby wyświetlić więcej treści i łatwiej rozróżniać granice elementów.

Wyróżnij główny element. Jeśli układ ma określony punkt centralny, (obraz lub film) należy rozwinąć, gdy okno aplikacji zwiększy się, uwagę. Inne elementy pomocnicze można umieścić wokół lub pod baner powitalny.

Istnieje wiele sposobów tworzenia takiego układu, ale ConstraintLayout jest idealnie nadaje się do tego celu, ponieważ zapewnia wiele sposobów ograniczania rozmiaru widoku podrzędnego, w tym procentowo lub wymuszania określonego aspektu, współczynnika, oraz pozycjonowania jego elementów podrzędnych względem siebie lub innych dzieci. Więcej informacji o wszystkich tych funkcjach znajdziesz w artykule Tworzenie elastycznego interfejsu użytkownika z użyciem ConstraintLayout.

Domyślnie pokazuj zawartość zwijaną. Jeśli jest dość miejsca, pokaż które w innym przypadku byłyby dostępne tylko dla dodatkowych użytkowników takie jak klikanie, przewijanie czy gesty. Na przykład treści, które pojawia się w interfejsie z kartami, gdy można zamiast tego zmienić układ kompaktowy lub listę, gdy jest więcej miejsca.

Zwiększ marże. Jeśli pokój jest tak duży, że nie da się znaleźć atrakcyjnej gdy już obejrzą wszystkie treści, a potem poszerzą dzięki czemu treści są wyśrodkowane, a poszczególne widoki rozmiarów i odstępów między nimi.

Komponent pełnoekranowy może też przekształcić się w pływające okno. Interfejs. Jest to szczególnie przydatne, gdy ten komponent wymaga wyłączności aby wykonywać bezpośrednie zadania użytkownika, takie jak napisanie e-maila lub podczas tworzenia wydarzenia w kalendarzu.

Rysunek 3. Pełnoekranowe okno dialogowe przekształcone w standardowe okno przy średniej szerokości po rozwinięciu.

Dodaj treść

Układy kanoniczne: dodatkowy panel, widok szczegółów listy

Skorzystaj z panelu uzupełniającego. W panelu pomocniczym znajdują się dodatkowe treści lub działań kontekstowych związanych z główną treścią, takich jak komentarze w dokumenty lub elementy na playliście. Zazwyczaj wykorzystuje się w tym dolną jedną trzecią ekranu w przypadku wysokości podłużnej, a końcowa – w przypadku szerokości po rozwinięciu.

Warto zastanowić się, gdzie te treści umieścić, jeśli nie są wystarczająco dużo miejsca, aby wyświetlić panel. Oto kilka innych możliwości:

• Boczna szuflada na końcowej krawędzi za pomocą funkcji DrawerLayout
• Dolna szuflada używa funkcji BottomSheetBehavior
• Menu lub wyskakujące okienko można otworzyć po kliknięciu ikony menu

.

.

Rysunek 4. Alternatywne sposoby prezentowania dodatkowych treści w panel pomocniczy.

Tworzenie układu z 2 panelami. Na dużych ekranach mogą wyświetlać się: funkcje, które zwykle wyświetlają się niezależnie na mniejszych ekranach. Częstym w wielu aplikacjach jest często wyświetlana lista elementów, takich jak kontakty czy w wynikach wyszukiwania i przełącz do szczegółów elementu po jego wybraniu. Zamiast powiększać listę na większe ekrany, użyj widoku szczegółowego aby wyświetlić obie funkcje obok siebie w układzie z 2 panelami. Usuń polubienie panelu szczegółowego widoku listy który może się wyświetlać niezależnie na mniejszych ekranach.

Użyj SlidingPaneLayout specjalny widżet do implementacji widoku szczegółów listy. Ten automatycznie oblicza, czy wystarczy miejsca na wyświetlenie na podstawie wartości layout_width określonej dla 2 paneli, a pozostałe miejsce można rozdzielić przy użyciu layout_weight. Gdy występuje za mało miejsca, każdy panel wykorzystuje pełną szerokość układu, a panel szczegółów znika z ekranu lub u góry okienka listy.

Rysunek 5. SlidingPaneLayout z 2 panelami w rozwiniętym widoku i 1 panel przy małej szerokości.

Utwórz układ z 2 panelami zawiera więcej Dowiedz się więcej o korzystaniu z SlidingPaneLayout. Pamiętaj też, że ten wzór może wpływać na strukturę wykresu nawigacyjnego (zobacz Nawigacja po elastycznych interfejsach).

Dodatkowe materiały

• Material Design – Stosowanie układu

.