Google używa technologii AI do tłumaczenia treści na Twój preferowany język. Tłumaczenia wygenerowane przez AI mogą zawierać błędy.

Kanoniczne układy widżetów

Twórz skuteczne układy widżetów, zaczynając od określenia podstawowych treści. Układ określa, jak informacje i elementy interaktywne są rozmieszczone w widżecie. Aby uprościć ten proces, Android oferuje kilka gotowych układów pasków narzędzi, tekstu, list oraz widżetów typu siatka.

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.

Tylko tekst

Idealny do tytułów, aktualizacji statusu, krótkich opisów lub w każdej sytuacji, w której jeden wiersz tekstu skutecznie przekazuje wiadomość.

Tekst i obraz

Dodaj obraz, aby zwiększyć efekt wizualny. Więcej informacji o dostosowywaniu tego układu do różnych rozmiarów ekranu znajdziesz w sekcji 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.

Pasek narzędzi wyszukiwania

Układ paska narzędzi wyszukiwania jest celowo zaprojektowany tak, aby skupiać uwagę na wyszukiwaniu jako głównym działaniu na pasku narzędzi. Dodatkowe przydatne przyciski mogą zapewniać szybki dostęp do często używanych funkcji.

Pasek narzędzi

Paski narzędzi zawierają logo aplikacji, a także przyciski do najczęściej używanych zadań, które idealnie nadają się do przełączanych ustawień lub linków do zadań. Podczas zmiany rozmiaru mniej popularne opcje mogą być ukrywane 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 czytelny, łatwy do przejrzenia sposób. 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.

Lista tekstów i obrazów

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.

Lista kontrolna

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.

Lista działań

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 stanie elementów.

Obraz z pełnym spadem

Ten układ idealnie nadaje się do wyświetlania wciągających obrazów bez marginesów 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.

Tylko obraz

Twórz atrakcyjne wizualnie galerie obrazów z możliwością przewijania za pomocą siatek zawierających tylko obrazy. Wiersze i kolumny automatycznie dostosowują się do różnych rozmiarów ekranu, aby zapewnić optymalną prezentację.

Obraz i tekst

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	Pliki referencyjne	Wskazówki
Układ listy działań	ActionListAppWidget.kt ActionListLayout.kt ListItem.kt RoundedScrollingLazyColumn.kt RoundedScrollingLazyVerticalGrid.kt EmptyListContent.kt NoDataContent.kt FakeActionListDataRepository.kt sample_action_list_widget_info.xml dimens.xml strings.xml sample_home_icon.xml sample_power_settings_icon.xml sample_bulb_icon.xml sample_thermostat_icon.xml sample_ac_icon.xml sample_door_icon.xml sample_arrow_right_icon.xml sample_no_data_icon.xml sample_add_icon.xml	Obsługuj działania na elementach listy za pomocą wywołań zwrotnych działań Glance i zapewnij prawidłowe aktualizacje stanu.
Układ listy kontrolnej	CheckListAppWidget.kt CheckListLayout.kt ListItem.kt RoundedScrollingLazyColumn.kt EmptyListContent.kt NoDataContent.kt FakeCheckListDataRepository.kt sample_check_list_widget_info.xml dimens.xml strings.xml sample_pin_icon.xml sample_checked_circle_icon.xml sample_circle_icon.xml sample_delete_icon.xml sample_edit_icon.xml sample_snooze_icon.xml sample_no_data_icon.xml sample_add_icon.xml	Zaimplementuj przełączanie stanu pola wyboru za pomocą parametrów działania lub wywołań zwrotnych, aby aktualizować elementy kolekcji. Używaj wywołań zwrotnych działań Glance, takich jak `actionRunCallback`, `ActionCallback(actionParametersOf(...))` lub `actionStartActivity(...)`, w przypadku parametrów `onClick` widżetu, aby obsługiwać zdarzenia kliknięcia, takie jak kliknięcie pola wyboru.
Ekspresyjny układ paska narzędzi	ExpressiveToolbarAppWidget.kt ExpressiveToolbarLayout.kt sample_expressive_toolbar_widget_info.xml Buttons.kt LayoutComponents.kt dimens.xml strings.xml four_side_cookie_background.xml sample_edit_icon.xml sample_share_icon.xml sample_delete_icon.xml sample_info_icon.xml sample_add_icon.xml sample_file_upload_icon.xml sample_mic_icon.xml sample_camera_icon.xml	Unikaj błędów importowania `ColorProvider`: zaimportuj `androidx.glance.unit.ColorProvider` i użyj `androidx.glance.color.ColorProvider(dayColor, nightColor)`. W przypadku jednolitych kolorów tła używaj bezpośrednio funkcji `GlanceModifier.background(Color)`, a nie funkcji `ColorProvider`.
Układ siatki obrazów	ImageGridAppWidget.kt ImageGridLayout.kt RoundedScrollingLazyVerticalGrid.kt EmptyListContent.kt NoDataContent.kt FakeImageGridDataRepository.kt sample_image_grid_widget_info.xml ImageUtils.kt dimens.xml strings.xml sample_placeholder_image.png sample_grid_icon.xml sample_refresh_icon.xml sample_no_data_icon.xml sample_add_icon.xml	W przypadku elementów obrazu używaj jednolitych kolorów (`GlanceModifier.background`) lub lokalnych elementów rysowalnych, chyba że skonfigurowano lub zażądano biblioteki wczytywania obrazów.
Układ listy tekstowej z obrazem	ImageTextListAppWidget.kt ImageTextListLayout.kt ListItem.kt RoundedScrollingLazyColumn.kt EmptyListContent.kt NoDataContent.kt FakeImageTextListDataRepository.kt sample_image_text_list_widget_info.xml ImageUtils.kt dimens.xml strings.xml sample_placeholder_image.png sample_image_icon.xml sample_heart_icon.xml sample_refresh_icon.xml sample_no_data_icon.xml sample_add_icon.xml	Częste przypadki użycia: kanały informacyjne, listy artykułów, historie treningów, kanały wiadomości i listy miniatur w układzie pionowym. Równoważenie wysokości wiersza listy i obcinania tekstu podczas łączenia miniatur z tekstem podstawowym lub dodatkowym.
Układ długiego tekstu	LongTextAppWidget.kt LongTextLayout.kt FakeLongTextRepository.kt sample_long_text_widget_info.xml FontUtils.kt dimens.xml strings.xml sample_text_icon.xml sample_refresh_icon.xml	Jeśli mnożysz wartości `Dp`, np. `2 * padding`, zaimportuj `androidx.compose.ui.unit.times`. Przestrzegaj reguł rozmiaru: upewnij się, że wymiary z pliku `dimens.xml` są używane do określania dopełnienia i skalowania typografii.
Układ paska narzędzi wyszukiwania	SearchToolBarAppWidget.kt SearchToolBarLayout.kt sample_search_toolbar_widget_info.xml Buttons.kt LayoutComponents.kt dimens.xml strings.xml sample_search_icon.xml sample_mic_icon.xml sample_camera_icon.xml sample_videocam_icon.xml sample_share_icon.xml	Unikaj błędów importowania `ColorProvider`: zaimportuj `androidx.glance.unit.ColorProvider` i użyj `androidx.glance.color.ColorProvider(dayColor, nightColor)`. W przypadku jednolitych kolorów tła używaj bezpośrednio funkcji `GlanceModifier.background(Color)`, a nie ColorProvider.
Układ obrazu bez marginesów / przewijanie z przyciąganiem	FullBleedImageAppWidget.kt FullBleedImageLayout.kt sample_full_bleed_image_widget_info.xml FontUtils.kt dimens.xml strings.xml sample_scrim_gradient.xml sample_placeholder_image.png sample_app_logo.xml sample_info_icon.xml sample_no_data_icon.xml	Ustaw wartość `verticalScrollMode = VerticalScrollMode.SnapScrollMatchHeight(size.height)` w przypadku elementu LazyColumn, aby włączyć przewijanie z przyciąganiem. Jeśli wdrażasz przewijanie z przyciąganiem, wymagane są Glance w wersji 1.3.0-alpha02 lub nowszej, pakiet SDK do kompilacji w wersji 37 (Baklava) lub nowszej oraz wtyczka Androida do obsługi Gradle (AGP) w wersji 9.1.0 lub nowszej. W klasie dostawcy widżetu ustaw wartość `override val sizeMode: SizeMode = SizeMode.Exact`.
Standardowy układ paska narzędzi	ToolBarAppWidget.kt ToolBarLayout.kt sample_toolbar_widget_info.xml Buttons.kt LayoutComponents.kt dimens.xml strings.xml sample_app_logo.xml sample_search_icon.xml sample_add_icon.xml sample_edit_icon.xml sample_share_icon.xml sample_mic_icon.xml sample_camera_icon.xml sample_videocam_icon.xml	Aby uniknąć błędów importowania elementu „ColorProvider”, zapoznaj się z sekcją Rozwiązywanie problemów: użyj elementu „androidx.glance.color.ColorProvider(dayColor, nightColor)”. W przypadku jednolitych kolorów tła używaj bezpośrednio funkcji `GlanceModifier.background(Color)`, a nie `ColorProvider`.
Tekst z obrazem	TextWithImageAppWidget.kt TextWithImageLayout.kt FakeTextWithImageRepository.kt sample_text_with_image_widget_info.xml FontUtils.kt dimens.xml strings.xml sample_text_icon.xml sample_refresh_icon.xml sample_placeholder_image.png sample_info_icon.xml sample_no_data_icon.xml	Przestrzegaj reguł rozmiaru elastycznego układu, aby umieścić tekst i obraz obok siebie lub jeden nad drugim w zależności od dostępnych wymiarów widżetu.