Twórz skuteczne układy widżetów, najpierw określając podstawowe treści. Układ określa, jak informacje i elementy interaktywne są zorganizowane w widżecie. Aby uprościć ten proces, Android oferuje kilka gotowych układów pasków narzędzi, tekstu, list i widżetów typu siatka.
Tekst
Układy tekstowe idealnie nadają się do wyświetlania zwięzłych informacji. Możesz opcjonalnie dodać obraz obok tekstu, aby zwiększyć atrakcyjność wizualną widżetu.
Idealne rozwiązanie w przypadku tytułów, aktualizacji stanu, krótkich opisów lub w każdej sytuacji w której pojedyncza linia tekstu skutecznie przekazuje wiadomość.
Dodaj obraz, aby zwiększyć efekt wizualny. Więcej informacji znajdziesz w sekcji Punkty przerwania , gdzie dowiesz się, jak dostosować ten układ do różnych rozmiarów ekranu.
Paski narzędzi
Używaj układów pasków narzędzi, aby zapewnić użytkownikom szybki dostęp do często używanych zadań w aplikacji w elastycznym układzie, który dostosowuje się do rozmiarów widżetów.
Układ paska narzędzi wyszukiwania został celowo zaprojektowany tak, aby skupić uwagę na wyszukiwaniu jako podstawowym działaniu na pasku narzędzi. Dodatkowe przydatne przyciski mogą zapewnić szybki dostęp do często używanych funkcji.
Paski narzędzi prezentują branding aplikacji, a następnie 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 minimalnym rozmiarze 48 dp, gdy jest na niego miejsce.
Listy
Używaj układów list, aby uporządkować wiele elementów w przejrzystym, łatwym do skanowania formacie. Idealne rozwiązanie w przypadku nagłówków wiadomości, list zadań do wykonania lub wiadomości. Uporządkuj treści w strukturalną, łatwą do skanowania listę. W zależności od potrzeb dotyczących treści wybierz prezentację w kontenerze lub bez kontenera.
Listy tekstu i obrazów, które można łatwo skanować, doskonale nadają się do prezentowania wielu 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ń, zapewniając użytkownikom wyraźne obszary kliknięcia dzięki którym 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 natychmiast informują o stanie elementów.
Siatka
Prezentuj obrazy w kompaktowej, elastycznej, bogatej wizualnie siatce z opcjonalnymi etykietami. Używaj kolumn i wierszy, które dostosowują się do różnych rozmiarów ekranu.
Twórz atrakcyjne wizualnie, przewijane galerie obrazów za pomocą 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, wzbogacając siatkę obrazów o dodatkowy kontekst i informacje.
Przykładowe fragmenty kodu
W tabeli poniżej znajdziesz mapowanie każdego układu kanonicznego na odpowiadającą mu implementację Jetpack Glance w repozytorium Android Platform Samples na GitHubie.
| Układ kanoniczny | Kategoria układu | Przykładowy plik implementacji |
|---|---|---|
| Tylko tekst | Tekst | LongTextAppWidget.kt |
| Tekst i obraz | Tekst | TextWithImageAppWidget.kt |
| Pasek narzędzi wyszukiwania | Paski narzędzi | SearchToolBarAppWidget.kt |
| Pasek narzędzi (standardowy) | Paski narzędzi | ToolBarAppWidget.kt |
| Lista tekstu i obrazów | Listy | ImageTextListAppWidget.kt |
| Lista kontrolna | Listy | CheckListAppWidget.kt |
| Lista działań | Listy | ActionListAppWidget.kt |
| Tylko obraz | Siatka | ImageGridAppWidget.kt |
| Obraz i tekst | Siatka | ImageGridAppWidget.kt |