Omówienie widżetów aplikacji

Widżety są istotnym elementem dostosowywania ekranu głównego. Można je traktować jako „podgląd” najważniejszych danych i funkcji aplikacji, które są dostępne na ekranie głównym użytkownika. Użytkownicy mogą przesuwać widżety między panelami ekranu głównego i, jeśli jest to możliwe, zmieniać rozmiar widżetów, aby dostosować ilość informacji do swoich preferencji.

W tej dokumentacji znajdziesz informacje o różnych typach widżetów, które możesz tworzyć, oraz o zasadach projektowania, których należy przestrzegać. Aby utworzyć widżet aplikacji za pomocą interfejsów API Widoku zdalnego i schematów XML, zapoznaj się z artykułem Tworzenie prostego widżetu. Aby utworzyć widżet za pomocą interfejsów API w stylu Kotlin i Compose, zapoznaj się z artykułem Jetpack Glance.

Typy widżetów

Planując widżet, zastanów się, jaki ma być jego rodzaj. Widgety zwykle należą do jednej z tych kategorii:

Widżety informacyjne

Przykładowy widżet pogody pokazujący Tokio jako duże zachmurzenie, 14 stopni, a przewidywaną temperaturę od 16:00 do 19:00
Rysunek 1. Widżet z informacjami z aplikacji pogodowej.

Widżety informacyjne wyświetlają zwykle kluczowe informacje i śledzą, jak te dane zmieniają się w czasie. Przykładami widżetów informacyjnych są widżety pogody, zegara lub widżety do śledzenia wyników sportowych. Widżety informacji po kliknięciu uruchamiają zwykle powiązaną aplikację i otwierają szczegółowy widok danych widżetu.

Widżety kolekcji

Widżety kolekcji specjalizują się w wyświetlaniu wielu elementów tego samego typu, np. kolekcji zdjęć z aplikacji galerii, kolekcji artykułów z aplikacji z wiadomościami czy zbioru e-maili lub wiadomości z aplikacji do komunikacji. Widżety kolekcji mogą przewijać się w pionie.

Widgety kolekcji zwykle skupiają się na tych zastosowaniach:

  • przeglądać kolekcję.
  • otwarcie elementu kolekcji w widoku szczegółowym w powiązanej aplikacji;
  • Interakcje z elementami, np. oznaczanie ich jako zakończonych, z obsługą przycisków złożonych w Androidzie 12 (poziom API 31).

Sterowanie widżetami

Widżet aplikacji „Lista świateł” z przełącznikami z nazwami „Sypialnia”, „Kuchnia” i „Salon”, z których pierwsze 2 są wyłączone
Rysunek 4. Przykład widżetu sterującego.

Głównym przeznaczeniem widżetu sterowania jest wyświetlanie często używanych funkcji, aby użytkownik mógł je uruchamiać na ekranie głównym bez konieczności otwierania aplikacji. Są to na przykład piloty do aplikacji. Przykładem widżetu sterowania jest widżet sterowania domem, który pozwala użytkownikom włączać i wyłączać światło w domu.

Interakcja z widżetem może spowodować otwarcie powiązanego widoku szczegółowego w aplikacji. Zależy to od tego, czy funkcja widżetu wygeneruje jakieś dane, na przykład w przypadku widżetu wyszukiwania.

Widgety hybrydowe

Ogólna aplikacja muzyczna z przyciskami „nie”, „wstecz”, „odtwórz/wstrzymaj”, „do przodu” i „tak”. Wykonawca i utwór są odpowiednio oznaczeni jako „Wykonawca” i „Muzyka przykładowa”.
Rysunek 5. Przykład widżetu aplikacji muzycznej.

Chociaż niektóre widżety odpowiadają typom opisanym w poprzednich sekcjach (informacje, kolekcja lub kontrola), wiele z nich to widżety hybrydowe, które łączą elementy różnych typów. Na przykład widżet odtwarzacza muzycznego jest przede wszystkim widżetem sterującym, ale pokazuje też użytkownikowi, jaki utwór jest aktualnie odtwarzany, jak widżet informacyjny.

Podczas planowania widżetu zaprojektuj jeden z podstawowych typów i w razie potrzeby dodaj elementy innych typów.

Integracja widżetów z Asystentem Google

Asystent Google może wyświetlać dowolny typ widżetu w odpowiedzi na polecenia głosowe użytkownika. Możesz skonfigurować widżety tak, aby wykonywały akcje w aplikacji, umożliwiając użytkownikom otrzymywanie szybkich odpowiedzi i interaktywnych aplikacji na platformach Asystenta takich jak Android czy Android Auto. Więcej informacji o wypełnianiu widżetów przez Asystenta znajdziesz w artykule Integracja działań aplikacji z widżetami na Androidzie.

Ograniczenia dotyczące widżetów

Widżety są nazywane „miniaplikacjami”, jednak przed ich zaprojektowaniem warto poznać pewne ograniczenia.

Gesty

Widżety są widoczne na ekranie głównym, więc muszą współistnieć z dostępną na nim nawigacją. Ogranicza to obsługę gestów w widżetach w porównaniu z aplikacjami pełnoekranowymi. Aplikacje mogą umożliwiać użytkownikom nawigowanie między ekranami w poziomie, ale gest ten jest już używany na ekranie głównym do nawigowania między ekranami głównymi.

Jedynymi gestami dostępnymi dla widżetów są dotknięcieprzesunięcie w dół.

Żywioły

Ze względu na ograniczenia dotyczące gestów dostępnych w przypadku widżetów niektóre elementy interfejsu użytkownika, które korzystają z gestu ograniczonego, są niedostępne w przypadku widżetów. Pełną listę obsługiwanych elementów konstrukcyjnych oraz więcej informacji o ograniczeniach układu znajdziesz w artykułach Tworzenie układu widżetuTworzenie elastycznych układów widżetów.

Wskazówki dotyczące projektu

Treść widżetu

Widgety to świetny sposób na przyciągnięcie użytkowników do aplikacji przez „reklamowanie” nowych i ciekawych treści dostępnych w aplikacji.

Podobnie jak teasery na pierwszej stronie gazety, widżety konsolidują i koncentrują informacje z aplikacji oraz zapewniają dostęp do bardziej szczegółowych informacji w aplikacji. Można powiedzieć, że widżet to „przekąska”, a aplikacja to „posiłek”. Upewnij się, że aplikacja wyświetla więcej szczegółów dotyczących elementu informacji niż widżet.

Oprócz treści informacyjnych rozważ dodanie do widgeta linków do często używanych obszarów aplikacji. Dzięki temu użytkownicy będą mogli szybciej wykonywać zadania, a aplikacja będzie bardziej funkcjonalna na ekranie głównym.

Dobre miejsca na linki nawigacyjne w widżetach to:

  • Funkcje generatywne: to funkcje, które umożliwiają użytkownikowi tworzenie nowych treści w aplikacji, np. tworzenie nowego dokumentu lub nowej wiadomości.

  • Otwórz aplikację na najwyższym poziomie: kliknięcie elementu z informacjami zwykle przenosi użytkownika na ekran z szczegółami niższego poziomu. Zapewnianie dostępu do najwyższego poziomu aplikacji zapewnia większą elastyczność nawigacji i może zastąpić specjalny skrót aplikacji, za pomocą którego użytkownicy przechodzą do aplikacji z ekranu głównego. Użycie ikony aplikacji do wyświetlania tej funkcji może też wyraźnie identyfikować widżet, jeśli wyświetlane dane są niejednoznaczne.

Zmienianie rozmiaru widżetu

Standardowy widżet Zegara Google
Rysunek 6. Standardowy widżet Zegar Google.

Naciśnięcie i przytrzymanie widżetu, który można zmieniać rozmiar, a następnie puszczenie go powoduje przejście do trybu zmiany rozmiaru. Użytkownicy mogą ustawić preferowany rozmiar za pomocą uchwytów przeciągania lub rogów widżetów.

Zmiana rozmiaru umożliwia użytkownikom dostosowanie wysokości i szerokości widżetu w ramach ograniczeń siatki rozmieszczenia ekranu głównego. Możesz zdecydować, czy chcesz swobodnie zmieniać rozmiar widżetu, czy też ograniczać go do zmian rozmiaru w poziomie lub pionie. Nie musisz obsługiwać zmiany rozmiaru, jeśli widżet ma stały rozmiar.

Umożliwienie użytkownikom zmiany rozmiaru widżetów ma ważne zalety:

  • Mogą one dostosować ilość informacji wyświetlanych na poszczególnych widżetach.
  • Mogą lepiej wpływać na układ widżetów i skrótów na swoich panelach głównych.

Zaplanuj strategię zmiany rozmiaru widżetu w zależności od jego typu. Widgety kolekcji oparte na listach lub siatkach są zwykle proste, ponieważ zmiana rozmiaru widgeta powoduje powiększenie lub zwężenie obszaru przewijania w pionie. Niezależnie od rozmiaru widgetu użytkownik może przewinąć wszystkie elementy informacji.

Widgety informacyjne wymagają bardziej szczegółowego zaplanowania, ponieważ nie można ich przewijać, a wszystkie treści muszą mieścić się w danym rozmiarze. Musisz dynamicznie dostosowywać zawartość i układ widżetu do rozmiaru zdefiniowanego przez użytkownika podczas operacji zmiany rozmiaru.

W poniższym przykładzie użytkownik może zmienić rozmiar widżetu pogodowego w 3 krokach, wyświetlając coraz bogatsze informacje o pogodzie w bieżącej lokalizacji w miarę jego powiększania się.

Przykład widżetu pogody w najmniejszym rozmiarze siatki 3 x 2, który zawiera nazwę lokalizacji (Tokio), temperaturę (14°) i symbol częściowo zachmurzonego nieba
Rysunek 7. Przykład widżetu pogody w siatce 3 x 2 w rozmiarze „mały”.


Przykład widżetu pogody w rozmiarze „średni” 5 x 2, który zawiera wszystkie elementy interfejsu z rozmiaru siatki 3 x 2 oraz etykietę „przeważnie pochmurno” i prognozy temperatury od 16:00 do 19:00
Rysunek 8. Przykład widżetu pogody w siatce 5 x 2 o „średnim” rozmiarze.


Przykład widżetu pogody w rozmiarze „duży” 5 x 4, który zawiera wszystkie elementy interfejsu z rozmiarów siatki 3 x 2 i 5 x 2 oraz prognozę pogody na okres od wtorku do piątku
Rysunek 9. Przykład widżetu pogody w siatce 5 x 4 o „dużym” rozmiarze.

W przypadku każdego rozmiaru widżetu określ, ile informacji o aplikacji ma być wyświetlanych. W przypadku mniejszych rozmiarów skup się na najważniejszych informacjach, a potem dodaj informacje kontekstowe, gdy widżet będzie się powiększał w poziomie i w pionie.

Uwagi na temat układu

Kuszące jest rozmieszczanie widżetów zgodnie z wymiarami siatki do umieszczania elementów na urządzeniu, na którym pracujesz. Może to być dobre wstępne oszacowanie, ale pamiętaj o tych kwestiach:

  • Planowanie strategii zmiany rozmiaru widżetów w „zasobnikach o różnej wielkości” zamiast w zmiennych wymiarach siatki daje najbardziej wiarygodne wyniki.
  • Liczba, rozmiar i odstępy komórek mogą się znacznie różnić w zależności od urządzenia. Dlatego ważne jest, aby widget był elastyczny i mógł pomieścić więcej lub mniej miejsca niż przewidywano.
  • Gdy użytkownik zmienia rozmiar widżetu, system zareaguje, określając zakres rozmiaru dp, w którym widżet może ponownie samodzielnie zaznaczać swoje dane.
  • Od Androida 12 możesz podawać bardziej dokładne atrybuty rozmiarów i bardziej elastyczne układy. Dotyczy to m.in.:

Konfigurowanie widżetów przez użytkowników

Czasami użytkownik musi skonfigurować widżet, zanim będzie można z niego korzystać. Weź pod uwagę widżet poczty e-mail, w którym użytkownik musi wybrać folder poczty, aby wyświetlić skrzynkę odbiorczą, lub widżet ze statycznym zdjęciem, do którego użytkownik musi przypisać zdjęcie z galerii. Widżety Androida wyświetlają opcje konfiguracji zaraz po tym, gdy użytkownik umieścisz go na ekranie głównym.

Lista kontrolna projektowania widżetów

  • Skup się na niewielkich fragmentach widocznych w widżecie informacji. rozszerzyć informacje w aplikacji;
  • Wybierz odpowiedni typ widżetu do swoich potrzeb.
  • Zaplanuj, jak treść widżetu będzie dostosowywana do różnych rozmiarów.
  • Upewnij się, że układ widżetu jest niezależny od orientacji i urządzenia, dzięki czemu może się rozszerzać i kurczyć.
  • Zastanów się, czy widżet wymaga dodatkowej konfiguracji.