Twórz skuteczne układy widżetów, zaczynając od określenia podstawowych treści. Układ określa sposób rozmieszczenia informacji i elementów interaktywnych w widżecie. Android oferuje kilka gotowych układów pasków narzędzi, tekstu, list oraz widżetów typu siatka, aby usprawnić ten proces.
Tekst
Układy tekstowe idealnie nadają się do wyświetlania zwięzłych informacji. Zwiększ atrakcyjność wizualną widżetu, dodając opcjonalnie obraz obok tekstu.
Idealny do tytułów, aktualizacji statusu, krótkich opisów lub w każdej sytuacji, w której jeden wiersz tekstu skutecznie przekazuje wiadomość.
Dodaj obraz, aby zwiększyć efekt wizualny. Więcej informacji o dostosowywaniu tego układu do różnych rozmiarów ekranu znajdziesz w rozdziale Punkty przerwania.
Paski narzędzi
Używaj układów paska narzędzi, aby zapewnić użytkownikom szybki dostęp do często używanych funkcji aplikacji w elastycznym układzie, który dostosowuje się do różnych rozmiarów widżetów.
Układ paska narzędzi wyszukiwania jest celowo zaprojektowany tak, aby zwracać uwagę na wyszukiwanie jako podstawową czynność na pasku narzędzi. Dodatkowe przydatne przyciski mogą zapewniać szybki dostęp do często używanych funkcji.
Paski narzędzi zawierają logo aplikacji, a także przyciski do najczęściej używanych zadań, które idealnie nadają się do ustawień przełączanych lub linków do zadań. Podczas zmiany rozmiaru mniej popularne opcje można ukryć na rzecz częściej używanych działań. Użyj punktów przerwania, aby dodać nowy przycisk o minimalnej wielkości 48 dp, gdy jest na niego miejsce.
Listy
Używaj układów list, aby uporządkować wiele elementów w przejrzystym formacie, który można łatwo przejrzeć. To idealne rozwiązanie w przypadku nagłówków wiadomości, list zadań do wykonania lub wiadomości. Uporządkuj treści w postaci listy, którą można łatwo przejrzeć. Wybierz prezentację w kontenerze lub bez kontenera w zależności od potrzeb.
Listy z tekstem i obrazami, które można szybko przejrzeć, doskonale nadają się do prezentowania różnych typów treści, takich jak nagłówki wiadomości, playlisty z okładkami albumów czy wiadomości.
Układ listy kontrolnej doskonale nadaje się do wyświetlania zadań, ponieważ zapewnia użytkownikom wyraźne obszary kliknięcia, dzięki czemu mogą szybko oznaczać elementy jako wykonane.
Zapewnij intuicyjne grupowanie elementów sterujących za pomocą list działań, na których wizualne stany włączenia/wyłączenia dostarczają natychmiastowych informacji o stanach elementów.
Ten układ idealnie nadaje się do wyświetlania wciągających obrazów na pełnej szerokości ekranu na urządzeniach z Androidem 17 i nowszym. Wykorzystuje przewijanie z przyciąganiem, aby każdy element podrzędny był idealnie dopasowany do wysokości kontenera widżetu.
Siatka
Wyświetlaj obrazy w kompaktowej, elastycznej i atrakcyjnej wizualnie siatce z opcjonalnymi etykietami. Używaj kolumn i wierszy, które dostosowują się do różnych rozmiarów ekranu.
Twórz atrakcyjne wizualnie galerie obrazów z możliwością przewijania, korzystając z siatek zawierających tylko obrazy. Wiersze i kolumny automatycznie dostosowują się do różnych rozmiarów ekranu, aby zapewnić optymalną prezentację.
Możesz też dodawać etykiety tekstowe i opisy, aby wzbogacić zawartość siatki obrazów o dodatkowy kontekst i informacje.
Przykładowe fragmenty kodu
W tabeli poniżej znajdziesz mapowanie każdego układu kanonicznego na jego implementację w Jetpack Glance w repozytorium GitHub z przykładowymi aplikacjami na platformę Android.
| Układ kanoniczny | Kategoria układu | Przykładowy plik implementacji |
|---|---|---|
| Tylko tekst | Tekst | LongTextAppWidget.kt |
| Tekst i obraz | Tekst | TextWithImageAppWidget.kt |
| Pasek wyszukiwania | Paski narzędzi | SearchToolBarAppWidget.kt |
| Pasek narzędzi (Standard) | Paski narzędzi | ToolBarAppWidget.kt |
| Lista tekstowa i graficzna | Listy | ImageTextListAppWidget.kt |
| Lista kontrolna | Listy | CheckListAppWidget.kt |
| Lista działań | Listy | ActionListAppWidget.kt |
| Przewijanie z pełnym spadem | Listy | FullBleedImageAppWidget.kt |
| Tylko obraz | Siatka | ImageGridAppWidget.kt |
| Obraz i tekst | Siatka | ImageGridAppWidget.kt |