Programuj interfejs użytkownika z użyciem widoków

Implementacja Jetpack Compose

Edytor układu umożliwia szybkie tworzenie układów opartych na View przez przeciąganie elementów interfejsu do wizualnego edytora projektu zamiast pisania kodu XML układu. Edytor projektu umożliwia wyświetlanie podglądu układu na różnych urządzeniach z Androidem i w różnych wersjach tego systemu. Możesz też dynamicznie zmieniać rozmiar układu, aby mieć pewność, że będzie on prawidłowo działać na ekranach o różnych rozmiarach.

[narzędzie] Layout Editor jest szczególnie przydatny podczas tworzenia układu za pomocą ConstraintLayout.

Na tej stronie znajdziesz ogólne informacje o edytorze układu. Więcej informacji o podstawach układu znajdziesz w artykule Układy.

Wprowadzenie do edytora układu

[narzędzie] Layout Editor pojawi się po otwarciu pliku układu XML.

Rysunek 1. Edytor układu.

1. Paleta: zawiera różne widoki i grupy widoków, które możesz przeciągać do układu.
2. Drzewo komponentów: pokazuje hierarchię komponentów w układzie.
3. Pasek narzędzi: zawiera przyciski, które konfigurują wygląd układu w edytorze i zmieniają atrybuty układu.
4. Edytor projektu: umożliwia edytowanie układu w widoku projektu, widoku planu lub w obu tych widokach.
5. Atrybuty: zawiera ustawienia atrybutów wybranego widoku.
6. Tryb wyświetlania: umożliwia wyświetlanie układu w trybie Kod , Podzielony lub Projekt . W trybie Podziel jednocześnie wyświetlane są okna Kod i Projekt.
7. Elementy sterujące powiększaniem i przesuwaniem: umożliwiają sterowanie rozmiarem i położeniem podglądu w edytorze.

Gdy otworzysz plik układu XML, domyślnie otworzy się edytor projektu, jak pokazano na rysunku 1. Aby edytować plik XML układu w edytorze tekstu, kliknij przycisk Kod w prawym górnym rogu okna. Pamiętaj, że podczas edytowania układu w widoku Kod panele Paleta, Drzewo komponentów i Atrybuty są niedostępne.

Wskazówka: aby przełączać się między edytorem projektu a edytorem tekstu, naciśnij Alt (Control na macOS) oraz Shift i strzałkę w prawo lub w lewo.

Zmiana wyglądu podglądu

Przyciski w górnym rzędzie edytora projektu umożliwiają skonfigurowanie wyglądu układu w edytorze.

Rysunek 2. Przyciski na pasku narzędzi Edytora układu, które konfigurują wygląd układu.

1. Projekt i plan: wybierz sposób wyświetlania układu w edytorze. Możesz też nacisnąć B, aby przełączać się między tymi typami widoku.
   • Kliknij Projekt, aby wyświetlić podgląd układu.
   • Wybierz Plan, aby wyświetlić tylko kontury każdego widoku.
   • Wybierz Projekt + plan, aby wyświetlić oba widoki obok siebie.
2. Orientacja ekranu i warianty układu: wybierz orientację ekranu poziomą lub pionową albo inne tryby ekranu, w których aplikacja udostępnia alternatywne układy, np. tryb nocny. To menu zawiera też polecenia umożliwiające utworzenie nowego wariantu układu, o czym piszemy w odpowiedniej sekcji na tej stronie. Możesz też nacisnąć literę O na klawiaturze, aby zmienić orientację.

3. Tryb interfejsu systemu: jeśli w aplikacji masz włączone dynamiczne kolory, zmieniaj tapety i sprawdzaj, jak układy reagują na różne tapety wybrane przez użytkowników. Pamiętaj, że najpierw musisz zmienić motyw na motyw kolorystyczny Material Design, a potem zmienić tapetę.

4. Typ i rozmiar urządzenia: wybierz typ urządzenia (telefon/tablet, Android TV lub Wear OS) i konfigurację ekranu (rozmiar i gęstość). Możesz wybierać spośród kilku wstępnie skonfigurowanych typów urządzeń i własnych definicji AVD. Nowy AVD możesz utworzyć, wybierając z listy Add Device Definition (Dodaj definicję urządzenia), jak pokazano na rysunku 3.

   • Aby zmienić rozmiar urządzenia, przeciągnij prawy dolny róg układu.
   • Naciskaj D, aby przełączać się między urządzeniami na liście.

   Testowanie układu na urządzeniach referencyjnych w tym menu pomaga dostosować aplikację do różnych stanów układu na rzeczywistych urządzeniach.

   

   Rysunek 3. Lista urządzeń referencyjnych.

5. Wersja interfejsu API: wybierz wersję Androida, aby wyświetlić podgląd układu. Lista dostępnych wersji Androida zależy od wersji platformy SDK zainstalowanych za pomocą narzędzia SDK Manager.

6. Motyw aplikacji: wybierz motyw interfejsu, który ma być zastosowany w podglądzie. Działa to tylko w przypadku obsługiwanych stylów układu, więc wiele motywów z tej listy powoduje błąd.

7. Język: wybierz język, w którym mają być wyświetlane ciągi interfejsu. Ta lista zawiera tylko języki dostępne w zasobach ciągów znaków. Jeśli chcesz edytować tłumaczenia, w menu kliknij Edytuj tłumaczenia. Więcej informacji o pracy z tłumaczeniami znajdziesz w artykule Lokalizowanie interfejsu za pomocą edytora tłumaczeń.

Uwaga: jeśli nie dodasz nowego pliku układu z sekcji Warianty układu, te konfiguracje nie będą miały wpływu na kod ani plik manifestu aplikacji. Wpływają one tylko na podgląd układu.

Tworzenie nowego układu

Gdy dodajesz nowy układ aplikacji, najpierw utwórz domyślny plik układu w domyślnym katalogu layout/ projektu, aby był on stosowany do wszystkich konfiguracji urządzeń. Gdy masz już domyślny układ, możesz utworzyć jego warianty, jak opisano w sekcji na tej stronie, dla konkretnych konfiguracji urządzeń, np. dużych ekranów.

Nowy układ możesz utworzyć na jeden z tych sposobów:

Korzystanie z menu głównego Androida Studio

1. W oknie Projekt kliknij moduł, do którego chcesz dodać układ.
2. W menu głównym wybierz Plik > Nowy > XML > Plik XML układu.
3. W wyświetlonym oknie dialogowym podaj nazwę pliku, tag układu głównego i zbiór źródeł, do którego należy układ.
4. Kliknij Zakończ, aby utworzyć układ.

Korzystanie z widoku projektu

1. W oknie Projekt wybierz widok Projekt.
2. Kliknij prawym przyciskiem myszy katalog układów, do którego chcesz dodać układ.
3. W wyświetlonym menu kontekstowym kliknij New > Layout Resource File (Nowy > Plik zasobu układu).

Używanie widoku Androida

1. W oknie Projekt wybierz widok Android.
2. Kliknij prawym przyciskiem myszy folder layout.
3. W wyświetlonym menu kontekstowym wybierz Nowy > Plik zasobu układu.

Korzystanie z Resource Managera

1. W Resource Managerze wybierz kartę Układ.
2. Kliknij przycisk +, a potem Plik zasobu układu.

Optymalizacja pod kątem różnych ekranów za pomocą wariantów układu

Wariant układu to alternatywna wersja istniejącego układu, która jest zoptymalizowana pod kątem określonego rozmiaru ekranu lub orientacji.

Korzystanie z sugerowanego wariantu układu

Android Studio zawiera typowe warianty układu, których możesz używać w swoim projekcie. Aby użyć sugerowanego wariantu układu:

1. Otwórz domyślny plik układu.
2. W prawym górnym rogu okna kliknij ikonę Projekt .
3. Nazwa pliku układu pojawi się w menu Działanie przełączania i tworzenia kwalifikatorów dla plików układu. Kliknij menu.
4. Z listy wybierz wariant, np. Utwórz kwalifikator w orientacji poziomej lub Utwórz kwalifikator na tablety.

   

   Rysunek 4. Lista kwalifikatorów układu.

Zostanie utworzony nowy katalog układu.

Tworzenie własnego wariantu układu

Jeśli chcesz utworzyć własny wariant układu, wykonaj te czynności:

1. Otwórz domyślny plik układu.
2. W prawym górnym rogu okna kliknij ikonę Projekt .
3. Nazwa pliku układu pojawi się w menu Działanie przełączania i tworzenia kwalifikatorów dla plików układu. Kliknij menu.

4. Z menu wybierz Dodaj kwalifikator zasobu. (Patrz rysunek 4 powyżej).

   Pojawi się okno Wybierz katalog zasobów.

5. W oknie Wybierz katalog zasobów określ kwalifikatory zasobów dla wariantu:

   1. Wybierz kwalifikator z listy Dostępne kwalifikatory.
   2. Kliknij przycisk Dodaj .
   3. Wpisz wszystkie wymagane wartości.
   4. Powtórz te czynności, aby dodać inne kwalifikatory.

6. Po dodaniu wszystkich kwalifikatorów kliknij OK.

Jeśli masz kilka odmian tego samego układu, możesz się między nimi przełączać, wybierając odmianę z menu Działanie przełączania i tworzenia kwalifikatorów dla plików układu.

Więcej informacji o tworzeniu układów na różne wyświetlacze znajdziesz w artykule Obsługa różnych rozmiarów wyświetlaczy.

Konwertowanie widoku lub układu

Widok możesz przekonwertować na inny rodzaj widoku, a układ na inny rodzaj układu:

1. W prawym górnym rogu okna edytora kliknij przycisk Projekt.
2. W drzewie komponentów kliknij prawym przyciskiem myszy widok lub układ, a następnie kliknij Konwertuj widok.
3. W wyświetlonym oknie wybierz nowy typ widoku lub układ, a następnie kliknij Zastosuj.

Konwertowanie układu na ConstraintLayout

Aby zwiększyć wydajność układu, przekonwertuj starsze układy na ConstraintLayout. ConstraintLayout korzysta z systemu układów opartych na ograniczeniach, który umożliwia tworzenie większości układów bez zagnieżdżonych grup widoków.

Aby przekonwertować istniejący układ na ConstraintLayout:

1. Otwórz istniejący układ w Android Studio.
2. W prawym górnym rogu okna edytora kliknij ikonę Projekt .
3. W drzewie komponentów kliknij prawym przyciskiem myszy układ, a następnie kliknij Przekonwertuj your-layout-type na ConstraintLayout.

Więcej informacji o ConstraintLayout znajdziesz w artykule Tworzenie interfejsu użytkownika z odpowiedzią na działania użytkownika za pomocą ConstraintLayout.

Znajdowanie elementów w palecie

Aby wyszukać widok lub grupę widoków według nazwy w palecie, kliknij przycisk Wyszukaj u góry palety. Możesz też wpisać nazwę elementu, gdy okno Paleta jest aktywne.

W palecie znajdziesz często używane elementy w kategorii Typowe. Aby dodać element do tej kategorii, kliknij prawym przyciskiem myszy widok lub grupę widoków w Palecie, a następnie w menu kontekstowym kliknij Ulubione.

Otwieranie dokumentacji z palety

Aby otworzyć dokumentację referencyjną Android Developers dotyczącą widoku lub grupy widoków, wybierz element interfejsu w palecie i naciśnij Shift+F1.

Aby wyświetlić dokumentację wytycznych Material Design dotyczącą widoku lub grupy widoków, kliknij prawym przyciskiem myszy element interfejsu w Palecie i w menu kontekstowym wybierz Wytyczne Material Design. Jeśli nie ma konkretnego wpisu dotyczącego danego elementu, polecenie otwiera stronę główną dokumentacji wytycznych Material Design.

Dodawanie widoków do układu

Aby rozpocząć tworzenie układu, przeciągnij widoki i grupy widoków z palety do edytora projektu. Podczas umieszczania widoku w układzie edytor wyświetla informacje o jego relacji z pozostałą częścią układu.

Jeśli używasz ConstraintLayout, możesz automatycznie tworzyć ograniczenia za pomocą funkcji wnioskowania ograniczeń i automatycznego łączenia.

Edytowanie atrybutów widoku edycji

Rysunek 5. panel Atrybuty.

Atrybuty widoku możesz edytować w panelu Atrybuty w Edytorze układu. To okno jest dostępne tylko wtedy, gdy otwarty jest edytor projektu, więc aby z niego korzystać, wyświetl układ w trybie Projekt lub Podzielony.

Gdy wybierzesz widok, klikając go w drzewie komponentów lub w edytorze projektu, w panelu Atrybuty pojawią się te informacje (zgodnie z rysunkiem 5):

1. Zadeklarowane atrybuty: lista atrybutów określonych w pliku układu. Aby dodać atrybut, kliknij przycisk Dodaj u góry sekcji.
2. Układ: zawiera elementy sterujące szerokością i wysokością widoku. Jeśli widok jest w ConstraintLayout, ta sekcja zawiera też odchylenie związane z ograniczeniami i listę ograniczeń, których używa widok. Więcej informacji o kontrolowaniu rozmiaru widoków za pomocą ConstraintLayout znajdziesz w artykule Dostosowywanie rozmiaru widoku.
3. Często stosowane atrybuty: lista często stosowanych atrybutów w wybranym widoku. Aby zobaczyć wszystkie dostępne atrybuty, rozwiń sekcję Wszystkie atrybuty u dołu okna.
4. Szukaj: umożliwia wyszukiwanie konkretnego atrybutu widoku.

5. Ikony po prawej stronie każdej wartości atrybutu wskazują, czy wartości atrybutów są odwołaniami do zasobów. Te wskaźniki są pełne , gdy wartość jest odwołaniem do zasobu, i puste , gdy wartość jest zakodowana na stałe, co pomaga szybko rozpoznawać zakodowane na stałe wartości.

   Kliknij wskaźniki w dowolnym stanie, aby otworzyć okno Zasoby, w którym możesz wybrać odwołanie do zasobu dla odpowiedniego atrybutu.

6. Czerwone podświetlenie wartości atrybutu oznacza błąd. Na przykład błąd może wskazywać nieprawidłową wartość atrybutu definiującego układ.

   Pomarańczowe podświetlenie oznacza ostrzeżenie dotyczące wartości. Na przykład ostrzeżenie może się pojawić, gdy używasz zakodowanej na stałe wartości w miejscu, w którym oczekiwane jest odwołanie do zasobu.

Dodawanie przykładowych danych do widoku

Wiele układów Androida opiera się na danych środowiska wykonawczego, więc podczas projektowania aplikacji trudno jest wizualizować wygląd układu. W [narzędziu] Layout Editor możesz dodać przykładowe dane podglądu do elementu TextView, ImageView lub RecyclerView.

Uwaga: gdy dodasz przykładowe dane do View, Android Studio wprowadzi w projekcie zmiany tak, jakbyś używał własnych danych. W razie potrzeby możesz zmodyfikować te zmiany.

Aby wyświetlić okno Design-time View Attributes (Atrybuty widoku w czasie projektowania), kliknij prawym przyciskiem myszy jeden z tych typów widoku i wybierz Set Sample Data (Ustaw dane przykładowe), jak pokazano na rysunku 6.

Rysunek 6. Okno Atrybuty widoku w czasie projektowania.

W przypadku TextView możesz wybrać różne kategorie przykładowego tekstu. Gdy używasz przykładowego tekstu, Android Studio wypełnia atrybut text elementu TextView wybranymi przez Ciebie przykładowymi danymi. Pamiętaj, że tekst przykładowy możesz wybrać w oknie Atrybuty widoku w czasie projektowania tylko wtedy, gdy atrybut text jest pusty.

Rysunek 7. TextViewz przykładowymi danymi.

W przypadku ImageView możesz wybrać różne przykładowe obrazy. Gdy wybierzesz przykładowy obraz, Android Studio wypełni atrybut tools:src elementu ImageView (lub tools:srcCompat, jeśli używasz AndroidaX).

Rysunek 8. ImageViewz przykładowymi danymi.

W przypadku RecyclerView możesz wybrać jeden z szablonów zawierających przykładowe obrazy i teksty. Gdy używasz tych szablonów, Android Studio dodaje do katalogu res/layout plik recycler_view_item.xml, który zawiera układ danych przykładowych. Android Studio dodaje też metadane do pliku RecyclerView, aby prawidłowo wyświetlać przykładowe dane.

Rysunek 9. RecyclerViewz przykładowymi danymi.

Wyświetlanie ostrzeżeń i błędów dotyczących układu

[narzędzie] Layout Editor powiadamia o problemach z układem obok odpowiedniego widoku w drzewie komponentów, używając czerwonego okręgu z wykrzyknikiem  w przypadku błędów lub pomarańczowego trójkąta z wykrzyknikiem  w przypadku ostrzeżeń. Kliknij ikonę, aby wyświetlić szczegółowe informacje.

Aby wyświetlić wszystkie znane problemy w oknie pod edytorem, na pasku narzędzi kliknij Pokaż ostrzeżenia i błędy ( lub ).

Pobieranie czcionek i stosowanie ich do tekstu

Jeśli używasz Androida 8.0 (poziom interfejsu API 26) lub biblioteki Jetpack Core, możesz wybrać jedną z setek czcionek, wykonując te czynności:

1. W [narzędziu] Layout Editor kliknij ikonę Projekt , aby wyświetlić układ w edytorze projektu.
2. Wybierz widok tekstu.
3. W panelu Atrybuty rozwiń textAppearance, a następnie rozwiń pole fontFamily.
4. Przewiń listę do dołu i kliknij Więcej czcionek, aby otworzyć okno dialogowe Zasoby.
5. W oknie Zasoby wybierz czcionkę, przeglądając listę lub wpisując nazwę w pasku wyszukiwania u góry. Jeśli wybierzesz czcionkę w sekcji Do pobrania, możesz kliknąć Utwórz czcionkę do pobrania, aby wczytać czcionkę w czasie działania programu jako czcionkę do pobrania, lub kliknąć Dodaj czcionkę do projektu, aby spakować plik czcionki TTF w pliku APK. Czcionki wymienione w sekcji Android są udostępniane przez system Android, więc nie trzeba ich pobierać ani dołączać do pliku APK.
6. Aby zakończyć, kliknij OK.

Weryfikacja układu

Weryfikacja układu to narzędzie wizualne, które umożliwia jednoczesne wyświetlanie podglądu układów na różnych urządzeniach i w różnych konfiguracjach wyświetlania. Pomaga ono wykrywać problemy z układami na wcześniejszym etapie procesu. Aby uzyskać dostęp do tej funkcji, w prawym górnym rogu okna IDE kliknij kartę Weryfikacja układu:

Rysunek 10. kartę Weryfikacja układu.

Aby przełączać się między dostępnymi zestawami konfiguracji, w menu Urządzenia referencyjne u góry okna Weryfikacja układu wybierz jedną z tych opcji:

• Urządzenia referencyjne
• Niestandardowy
• Daltonizm
• Rozmiary czcionki

Rysunek 11. menu Urządzenia referencyjne.

Urządzenia referencyjne

Urządzenia referencyjne to zestaw urządzeń, na których zalecamy przeprowadzenie testów. Obejmują one interfejsy telefonów, urządzeń składanych, tabletów i komputerów. Sprawdź podgląd układu na tym zestawie urządzeń referencyjnych:

Rysunek 12. Wyświetl podgląd na urządzeniu referencyjnym w narzędziu do weryfikacji układu.

Niestandardowy

Aby dostosować konfigurację wyświetlania do podglądu, wybierz różne ustawienia, w tym język, urządzenie lub orientację ekranu:

Rysunek 16. Skonfiguruj niestandardową kreację displayową w narzędziu do sprawdzania układu.

Daltonizm

Aby ułatwić korzystanie z aplikacji użytkownikom z daltonizmem, sprawdź układ za pomocą symulacji typowych rodzajów daltonizmu:

Rysunek 13. Podgląd symulacji zaburzeń rozpoznawania barw w narzędziu do weryfikacji układu.

Rozmiary czcionki

Sprawdź układy przy różnych rozmiarach czcionek i zwiększ dostępność aplikacji dla użytkowników z wadami wzroku, testując układy z większymi czcionkami:

Rysunek 14. Podgląd zmiennego rozmiaru czcionki w narzędziu do sprawdzania poprawności układu.