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.
![](https://developer.android.google.cn/static/images/screens_support/layout-editor_2x.png?authuser=19&hl=pl)
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.
![](https://developer.android.google.cn/static/images/screens_support/layout-match-parent_2x.png?authuser=19&hl=pl)
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.
![](https://developer.android.google.cn/static/images/screens_support/sizes-phone-tablet_2x.png?authuser=19&hl=pl)
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.
![](https://developer.android.google.cn/static/images/screens_support/layout-adaptive-breakpoints_2x.png?authuser=19&hl=pl)
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:
![](https://developer.android.google.cn/static/images/guide/topics/ui/foldables/fold-screen-ratios.png?authuser=19&hl=pl)
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
- Material Design – Interpretowanie układu