Elastyczne/adaptacyjne projektowanie z widokami danych

Układy elastyczne/adaptacyjne zapewniają optymalizowanie wrażeń użytkownika niezależnie od rozmiaru ekranu. Zaimplementuj układy elastyczne/adaptacyjne, aby aplikacji w widoku, która obsługuje wszystkie rozmiary, orientacje konfiguracje, w tym konfiguracje z możliwością zmiany rozmiaru, takie jak widok wielu okien .

Elastyczne projektowanie stron

Pierwszym krokiem przy obsłudze różnych formatów urządzeń jest utworzenie elastyczny układ, który reaguje na różnice w ilości dostępnego miejsca do wyświetlania reklam. do Twojej aplikacji.

Układ ograniczenia

Najlepszym sposobem utworzenia układu elastycznego jest użycie ConstraintLayout jako podstawowy układ interfejsu. ConstraintLayout umożliwia określenie położenie i rozmiar każdego widoku zgodnie z relacją przestrzenną z innymi, i widoku w układzie. Wszystkie widoki można następnie przesuwać i zmieniać rozmiar, zmian przestrzeni wyświetlania.

Najprostszym sposobem utworzenia układu za pomocą ConstraintLayout jest użycie szablonu Edytor w Android Studio. Edytor układu umożliwia przeciąganie nowych widoków do układ, stosowanie ograniczeń dotyczących widoków nadrzędnych i równorzędnych oraz właściwości—a wszystko to bez ręcznego edytowania kodu XML.

Rysunek 3. Edytor szablonów w Android Studio pokazuje ConstraintLayout

Więcej informacji znajdziesz w artykule Tworzenie elastycznych interfejsów użytkownika z ConstraintLayout (Układ ograniczenia).

Szerokość i wysokość elastycznej

Aby układ był elastycznie dostosowywany do różnych rozmiarów reklam, zastosuj wrap_content, match_parent lub 0dp (match constraint) dla szerokości i wysokość komponentów widoku zamiast wartości zakodowanych na stałe:

  • wrap_content: widok ustala swój rozmiar, by pasował do zawartych w nim treści.
  • match_parent: widok nadrzędny można maksymalnie rozwinąć.
  • 0dp (match constraint): ConstraintLayout, podobny do: match_parent Widok zajmuje całą dostępną przestrzeń w .

Na przykład:

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="@string/lorem_ipsum" />

Na rys. 4 widać, jak szerokość i wysokość TextView są dostosowywane podczas wyświetlania szerokość zmienia się w zależności od orientacji urządzenia.

Rysunek 4. Elastyczna TextView.

TextView ustawia swoją szerokość tak, aby wypełnić całą dostępną przestrzeń (match_parent) i jego wysokość do dokładnie takiej ilości miejsca jest wymagana przez wysokość konstrukcji tekst (wrap_content), dzięki czemu widok może dostosowywać się do różnych wyświetlaczy. z wymiarami i ilością tekstu.

Jeśli używasz LinearLayout, Można również rozszerzyć widoki podrzędne na podstawie układu wagowy, aby proporcjonalnie z jakiegoś miejsca. Jednak użycie wag w zagnieżdżonym obiekcie LinearLayout wymaga w celu określenia rozmiaru każdego z nich co spowalnia działanie interfejsu.

ConstraintLayout może utworzyć prawie wszystkie możliwe układy za pomocą LinearLayout bez wpływu na wydajność, więc przekonwertuj zagnieżdżone LinearLayout do ConstraintLayout Potem może definiować układy ważone z ograniczeniem .

.

Adaptacyjne projektowanie

Układ aplikacji powinien zawsze reagować na różne rozmiary wyświetlacza. Jednak nawet układ elastyczny nie zapewni użytkownikom najlepszych wrażeń na na każdym urządzeniu lub wyświetlaczu w trybie wielu okien. Na przykład interfejs, przeznaczony dla telefonów komórkowych, prawdopodobnie nie zapewnia optymalnych wrażeń użytkownika tablecie. Układ adaptacyjny zapewnia alternatywne układy zoptymalizowane pod kątem różnych wymiarów wyświetlania.

SlidingPaneLayout w przypadku interfejsów ze szczegółami listy

Interfejs ze szczegółami listy zwykle wygląda inaczej w przypadku z ekranami o różnych rozmiarach. Na dużych ekranach panele z listą i szczegółami są zwykle obok siebie. Po zaznaczeniu pozycji na liście informacje o nim są w panelu szczegółów bez wprowadzania zmian w UI obok siebie. Jednak na małych ekranach oba panele są wyświetlane oddzielnie, zajmuje cały obszar wyświetlania. Gdy element na panelu listy jest panel szczegółów (zawierający informacje o wybranym elemencie) zastąpi w panelu listy. Nawigacja wstecz zastępuje panel szczegółów listą.

SlidingPaneLayout zarządza logiką określania, które z tych 2 sposobów działania aplikacji są odpowiednie dla bieżącego rozmiaru okna:

<?xml version="1.0" encoding="utf-8"?>
<androidx.slidingpanelayout.widget.SlidingPaneLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="280dp"
        android:layout_height="match_parent"
        android:layout_gravity="start" />

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="300dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        app:defaultNavHost="true"
        app:navGraph="@navigation/item_navigation" />

</androidx.slidingpanelayout.widget.SlidingPaneLayout>

Atrybuty layout_width i layout_weight dwóch widoków zawartych w Działanie SlidingPaneLayout jest określone przez SlidingPaneLayout. W tym przykładzie Jeśli okno jest wystarczająco duże (co najmniej 580 dp), by można było wyświetlić oba widoki, panele są wyświetlane obok siebie. Jeśli jednak szerokość okna jest mniejsza niż 580 dp – panele przesuwają się na siebie, zajmując pojedynczo całą aplikację okno.

Jeśli szerokość okna jest większa niż określona minimalna szerokość (580 dp), Wartości layout_weight mogą służyć do proporcjonalnego określania rozmiaru 2 paneli. W Na przykład panel z listą ma zawsze szerokość 280 dp, ponieważ nie ma wagi. Panel szczegółów zawsze wypełnia całą przestrzeń poziomą powyżej 580 dp, ponieważ ustawienia layout_weight widoku.

Zasoby dotyczące układu alternatywnego

Aby dostosować interfejs użytkownika do bardzo różnych rozmiarów wyświetlaczy, użyj układów alternatywnych identyfikowane przez zasób kwalifikatory.

Rysunek 5. Ta sama aplikacja z różnymi układami dla różnych rozmiarów wyświetlaczy.

Możesz zapewnić elastyczne układy dostosowane do różnych urządzeń, tworząc dodatkowe res/layout/ katalogi w kodzie źródłowym aplikacji. Utwórz katalog dla każdej z nich. konfiguracji ekranu, która wymaga innego układu. Następnie dołącz ekran kwalifikator konfiguracji do nazwy katalogu layout (na przykład layout-w600dp w przypadku ekranów o dostępnej szerokości 600 dp).

Kwalifikatory konfiguracji reprezentują widoczną przestrzeń wyświetlania dostępną dla UI aplikacji. System uwzględnia wszelkie dekoracje systemowe (takie jak paska nawigacyjnego) i zmian konfiguracji okien (np. wiele okien) ).

Informacje o tworzeniu alternatywnych układów w Android Studio znajdziesz w sekcji Używanie wariantów układu do: na różnych ekranach Tworzenie interfejsu użytkownika za pomocą widoków.

Kwalifikator o najmniejszej szerokości

Kwalifikator rozmiaru ekranu o najmniejszej szerokości umożliwia podanie alternatywnych układy ekranów o minimalnej szerokości mierzonej niezależnej od gęstości piks. (dp).

Opisując rozmiar ekranu w miary dp, Android umożliwia tworzenie zaprojektowane z myślą o określonych wymiarach wyświetlania, różne gęstości pikseli.

Możesz na przykład utworzyć układ o nazwie main_activity, który jest zoptymalizowany pod kątem na telefonach i tabletach, tworząc różne wersje pliku w różnych formatach katalogi:

res/layout/main_activity.xml           # For phones (smaller than 600dp smallest width)
res/layout-sw600dp/main_activity.xml   # For 7" tablets (600dp wide or wider)

Kwalifikator o najmniejszej szerokości określa najmniejszą z dwóch stron wyświetlacza – niezależnie od aktualnej orientacji urządzenia. Jest to więc sposób określania ogólny rozmiar wyświetlacza dostępnego dla danego układu.

Tak inne najmniejsze wartości szerokości odpowiadają typowym rozmiarom ekranu:

  • 320dp: mały ekran telefonu (240 x 320 ldpi, 320 x 480 mdpi, 480 x 800 hdpi itp.)
  • 480dp: duży ekran telefonu (ok. 5 cali) (480x800 mdpi)
  • 600 dp: 7 cali tablet (600x1024 mdpi)
  • 720dp: 10" tablet (720 x 1280 mdpi, 800 x 1280 mdpi itp.)

Na rysunku poniżej znajdziesz bardziej szczegółowe informacje o tym, jak różne wartości dp na ekranie odpowiadają różnym rozmiarom i orientacjom ekranu.

Rysunek 6. Zalecane punkty przerwania szerokości do obsługi różnych rozmiarów ekranu.

Wartościami kwalifikatora najmniejszej szerokości są dp, bo znaczenie ma ilość miejsca dostępnego po uwzględnieniu gęstości pikseli przez system (nie rozdzielczości nieprzetworzonej w pikselach).

Rozmiary określane za pomocą kwalifikatorów zasobów, takie jak najmniejsza szerokość, to a nie rzeczywistej wielkości ekranu. Rozmiary określają szerokość lub wysokość w jednostek dp dostępnych w oknie aplikacji. System Android może użyć część ekranu interfejsu systemowego (np. pasek systemowy u dołu okna ekranu lub paska stanu u góry), przez co część ekranu może który będzie dostępny dla Twojego układu. Jeśli aplikacja działa w trybie wielu okien, aplikacja ma dostęp tylko do rozmiaru okna, w którym się ona znajduje. Gdy zmiana rozmiaru okna powoduje konfigurację, zmień rozmiar okna, umożliwia systemowi wybranie odpowiedniego pliku układu. Zasób zadeklarowane rozmiary kwalifikatorów powinny określać tylko ilość miejsca wymaganej przez aplikację. System uwzględnia przestrzeń używaną przez interfejs systemu, gdy zapewnia miejsce na układ.

Kwalifikator dostępnej szerokości

Zamiast zmieniać układ na podstawie jak najmniejszej szerokości wyświetlacza, warto zmienić układ w zależności od dostępnej szerokości lub wysokości. Możesz na przykład używać układu z 2 panelami zawsze, gdy ekran co najmniej 600 dp, które może się zmienić w zależności od tego, czy jest w orientacji poziomej lub pionowej. W takim przypadku użyj metody kwalifikator dostępnej szerokości w następujący sposób:

res/layout/main_activity.xml         # For phones (smaller than 600dp available width)
res/layout-w600dp/main_activity.xml  # For 7" tablets or any screen with 600dp available width
                                     # (possibly landscape phones)

Jeśli dostępność wysokości jest dla Twojej aplikacji problemem, możesz użyć atrybutu dostępna wysokość. Na przykład layout-h600dp w przypadku ekranów z wartością co najmniej 600 dp wysokości ekranu.

Kwalifikatory orientacji

Mimo że możesz mieć możliwość obsługi wszystkich odmian rozmiaru, stosując tylko kombinacji kwalifikatorów najmniejszej szerokości i dostępnej szerokości, możesz chcesz też zmienić wygodę korzystania z trybu, gdy użytkownik przełącza się między pionową lub orientacji poziomej.

Aby to zrobić, możesz dodać kwalifikatory port lub land do katalogu układu. nazw. Pamiętaj, by kwalifikatory orientacji pojawiają się po kwalifikatorach rozmiaru. Na przykład:

res/layout/main_activity.xml                # For phones
res/layout-land/main_activity.xml           # For phones in landscape
res/layout-sw600dp/main_activity.xml        # For 7" tablets
res/layout-sw600dp-land/main_activity.xml   # For 7" tablets in landscape

Więcej informacji o wszystkich kwalifikatorach konfiguracji ekranu znajdziesz w sekcji Aplikacja omówienie zasobów.

Klasy rozmiaru okna

Klasy rozmiaru okna to punkty przerwania widocznego obszaru, które pomagają tworzyć układy. Punkty przerwania określają obszar wyświetlania dostępny dla aplikacji jako compact, medium lub expanded (rozwinięty). Szerokość i wysokość określa się osobno, więc aplikacja ma zawsze klasę rozmiaru okna dla szerokości i rozmiaru okna wysokość.

Aby automatycznie stosować układy adaptacyjne:

  • Utwórz zasoby układu na podstawie punktów przerwania klasy rozmiaru okna
  • Oblicz klasy szerokości i wysokości okna aplikacji za pomocą WindowSizeClass#compute() z interfejsu Jetpack WindowManager. biblioteka
  • Zwiększ rozmiar zasobu układu dla bieżących klas rozmiaru okna
.

Więcej informacji znajdziesz w sekcji Rozmiar okna zajęcia.

Modułowe komponenty interfejsu wykorzystujące fragmenty

Podczas projektowania aplikacji na potrzeby różnych rozmiarów wyświetlania użyj fragmentów, aby wyodrębnić dane logikę UI na potrzeby osobnych komponentów, aby niepotrzebnie duplikowanie zachowań interfejsu w ramach różnych działań. Następnie można połączyć fragmenty, aby tworzyć układy z kilkoma panelami na dużych ekranach lub umieszczać w nich fragmenty na małych ekranach.

Na przykład wzorzec szczegółów listy (patrz SlidingPaneLayout powyżej) można zaimplementować za pomocą jednego fragment zawierający listę i inny fragment zawierający element listy . Na dużych ekranach fragmenty mogą być wyświetlane obok siebie. włączono na małych ekranach, które wypełniają ekran.

Aby dowiedzieć się więcej, przeczytaj omówienie Fragmentów.

Umieszczanie aktywności

Jeśli Twoja aplikacja składa się z wielu aktywności, umieszczanie aktywności umożliwia łatwo tworzyć adaptacyjny interfejs użytkownika.

Umieszczanie aktywności pokazuje wiele aktywności lub wiele wystąpień wykonywać tę samą czynność jednocześnie w oknie zadań aplikacji. Na dużych ekranach mogą być wyświetlane obok siebie. na małych ekranach, układane jeden u góry z drugiej strony.

Sposób wyświetlania aktywności w aplikacji określasz za pomocą pliku XML. plik konfiguracji, za pomocą którego system określa odpowiednie do rozmiaru interfejsu. Możesz też utworzyć Jetpack Interfejs API WindowManager połączeń.

Umieszczanie aktywności obsługuje zmianę orientacji urządzeń oraz urządzenia składane, czynności związane z obracaniem, składaniem i rozkładaniem.

Więcej informacji znajdziesz w sekcji Aktywność

Rozmiary ekranu i formaty obrazu

Przetestuj aplikację na ekranach o różnych rozmiarach i formatach obrazu, aby zadbać o właściwy interfejs skaluje się prawidłowo.

Android 10 (poziom interfejsu API 29) i nowsze obsługują szeroki zakres formatów obrazu. Urządzenia składane mogą mieć różne formaty – od wysokich i wąskich ekranów (np. 21:9, złożony do kwadratowego formatu 1:1.

Aby zapewnić zgodność z jak największą liczbą urządzeń, przetestuj swoje aplikacje przez skorzystaj z jednego z tych formatów obrazu:

Rysunek 7. Różne formaty obrazu ekranu.

Jeśli nie masz dostępu do urządzeń o różnych rozmiarach ekranu, z których chcesz korzystać Aby przeprowadzić test, możesz użyć emulatora Androida do emulacji funkcji na prawie każdym rozmiarze ekranu.

Jeśli wolisz przeprowadzić test na prawdziwym urządzeniu, ale nie masz go, możesz użyć Laboratorium Firebase, aby uzyskać dostęp urządzenia w centrum danych Google.

Dodatkowe materiały