Omówienie widżetów aplikacji

Widżety to podstawowy aspekt dostosowywania ekranu głównego. Możesz je określić jako szybki przegląd najważniejszych danych i funkcji aplikacji, dostępnych bezpośrednio na ekranie głównym. 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 opisujemy różne typy widżetów, które możesz tworzyć, oraz zasady ich projektowania. Jeśli chcesz utworzyć widżet aplikacji przy użyciu interfejsów API Delete View i układów XML, przeczytaj artykuł Tworzenie prostego widżetu. Aby utworzyć widżet za pomocą interfejsów API stylu Kotlin i Compose, zapoznaj się z sekcją Jetpack Glance.

Typy widżetów

Planując widżet, zastanów się, jaki rodzaj widżetu chcesz utworzyć. Widżety są zwykle zaliczane 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 informacji z aplikacji pogodowej.

Widżety informacyjne wyświetlają zwykle kluczowe informacje i śledzą, jak te dane zmieniają się w czasie. Przykładowymi widżetami informacji są widżety pogody, widżety zegara i 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.

Widżety kolekcji zwykle służą do:

  • Przeglądanie kolekcji.
  • Otwarcie elementu kolekcji w widoku szczegółów w powiązanej aplikacji.
  • interakcje z elementami, na przykład oznaczanie ich jako gotowych, dzięki obsłudze przycisków złożonych w Androidzie 12 (poziom interfejsu API 31);

Sterowanie widżetami

Widżet aplikacji o nazwie „Lista świateł” z przełącznikami „Sypialnia”, „Kuchnia” i „Salon” z wyłączonymi pierwszymi dwoma przełącznikami
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 sterującym może spowodować otwarcie powiązanego widoku szczegółowego w aplikacji. Zależy to od tego, czy funkcja widżetu sterującego generuje dane, np. w przypadku widżetu wyszukiwania.

Hybrydowe widżety

Ogólna aplikacja muzyczna z przyciskami „kciuk w dół”, „Wstecz”, „odtwórz/wstrzymaj”, do przodu i „kciuk w górę”. Wykonawca i utwór są wymienione odpowiednio jako „Wykonawca” i „Przykładowa muzyka”.
Rysunek 5. Przykład widżetu aplikacji muzycznej.

Niektóre widżety reprezentują jeden z typów z poprzednich sekcji – informacje, kolekcję lub elementy sterujące – wiele z nich to hybrydy, które łączą elementy różnego rodzaju. Na przykład widżet odtwarzacza muzyki jest widżetem sterującym, ale informuje też użytkownika o aktualnie odtwarzanym utworze – wygląda jak widżet informacji.

Podczas planowania widżetu zaprojektuj go wokół jednego z typów podstawowych i w razie potrzeby dodaj elementy innych typów.

Integrowanie widżetów z Asystentem Google

W odpowiedzi na polecenia głosowe użytkownika Asystent Google może wyświetlać każdy rodzaj widżetu. 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 realizacji widżetów przez Asystenta znajdziesz w artykule Integrowanie akcji w aplikacji z widżetami na Androida.

Ograniczenia widżetów

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

Gesty

Widżety znajdują się na ekranie głównym, więc muszą współistnieć z funkcjonującą tam nawigacją. Ogranicza to obsługę gestów na widżecie w porównaniu z aplikacją pełnoekranową. Aplikacje mogą umożliwiać użytkownikom przechodzenie między ekranami w poziomie, ale ten gest jest już wykonywany na ekranie głównym i służy do poruszania się między ekranami głównymi.

Jedyne gesty dostępne w przypadku widżetów to dotyk i przesuwanie w pionie.

Żywioły

Ze względu na ograniczenia gestów dostępne w przypadku widżetów niektóre elementy składowe interfejsu, które wymagają gestów ograniczonych, nie są dostępne w przypadku widżetów. Pełną listę obsługiwanych elementów składowych i więcej informacji o ograniczeniach układu znajdziesz w artykułach Tworzenie układu widżetu i Udostępnianie elastycznych układów widżetów.

Wytyczne dotyczące projektu

Zawartość widżetu

Widżety to świetny sposób na przyciągnięcie użytkowników do aplikacji poprzez „reklamę” nowych, interesujących treści, które są w niej dostępne.

Widżety (tak jak zajawki na pierwszej stronie gazety) scalają i koncentrują informacje o aplikacji i zapewniają powiązanie z bogatszymi informacjami. Można powiedzieć, że widżet to „przekąska” z informacjami, a aplikacja to „posiłek”. Upewnij się, że aplikacja pokazuje więcej szczegółów niż w widżecie.

Widżet powinien zawierać nie tylko same informacje, ale też linki nawigacyjne do często używanych obszarów aplikacji. Dzięki temu użytkownicy będą mogli szybciej wykonywać zadania, a aplikacja będzie dostępna na ekranie głównym.

Linki nawigacyjne w widżetach to:

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

  • Otwórz aplikację na najwyższym poziomie: kliknięcie elementu informacyjnego zwykle powoduje przejście do ekranu szczegółów 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 w tej funkcji może też nadać widżetowi wyraźną tożsamość, jeśli wyświetlane dane są niejednoznaczne.

Zmiana rozmiaru widżetu

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

Kliknięcie i przytrzymanie widżetu z możliwością zmiany rozmiaru powoduje przejście w tryb zmiany rozmiaru. Użytkownicy mogą ustawić preferowany rozmiar, przeciągając uchwyty lub rogi widżetu.

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ą dostosować ilość informacji, które mają być wyświetlane w każdym widżecie.
  • Mogą lepiej wpływać na układ widżetów i skrótów na panelach głównych.

Zaplanuj strategię zmiany rozmiaru widżetu zgodnie z typem tworzonego widżetu. Widżety kolekcji oparte na listach lub siatkach są zwykle proste, ponieważ zmiana rozmiaru widżetu rozwija lub zmniejsza obszar przewijania w pionie. Bez względu na rozmiar widżetu użytkownik może przewijać wszystkie elementy informacji, aby je zobaczyć.

Widżety informacyjne wymagają bardziej praktycznego zaplanowania, ponieważ nie można ich przewijać, a wszystkie treści muszą mieścić się w określonym rozmiarze. Musisz dynamicznie dostosowywać zawartość i układ widżetu do rozmiaru zdefiniowanego przez użytkownika w ramach 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ładowy widżet pogody o najmniejszym rozmiarze siatki 3 x 2 zawierający nazwę lokalizacji (Tokio), temperaturę (14°) i symbol wskazujący
 częściowo zachmurzenie
Rysunek 7. Przykładowy widżet pogody w siatce 3 x 2 „mały”.


Przykładowy widżet pogodowy o „średnim” rozmiarze 5 x 2 obejmujący cały interfejs z siatki o wymiarach 3 x 2, etykietę „większość zachmurzenie” oraz prognozowanie temperatur w godzinach 16:00–19:00
Rysunek 8. Przykładowy widżet pogody w siatce 5 x 2 o średnim rozmiarze.


Przykładowy widżet pogodowy w dużym rozmiarze 5 x 4 obejmujący wszystkie elementy interfejsu w rozmiarach siatki 3 x 2 i 5 x 2 oraz prognozę pogody od wtorku do piątku
Rysunek 9. Przykładowy widżet pogody w dużym rozmiarze siatki 5 x 4.

Określ, ile informacji o aplikacji ma być wyświetlane w przypadku każdego rozmiaru widżetu. W przypadku mniejszych rozmiarów skup się na najważniejszych informacjach, a następnie dodawaj informacje kontekstowe w miarę, jak widżet rozwija się w poziomie i w pionie.

Uwagi na temat układu

Rozmieszczanie widżetów zgodnie z wymiarami siatki miejsc docelowych na urządzeniu, na którym tworzysz, jest kuszące. Może to być wstępne przybliżenie, 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 Twój widżet musi być elastyczny i pomieszać w nim więcej lub mniej miejsca, niż oczekiwano.
  • 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.
  • Począwszy od Androida 12 możesz udostępniać bardziej dopracowane atrybuty rozmiaru i bardziej elastyczny układ. Obejmuje to m.in.:

Konfigurowanie widżetu przez użytkowników

Czasami widżet może być przydatny dopiero po skonfigurowaniu przez użytkownika. 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. Rozwiń informacje w aplikacji.
  • Wybierz odpowiedni typ widżetu do swoich potrzeb.
  • Zaplanuj, jak treść widżetu dostosowuje się do różnych rozmiarów.
  • Dopilnuj, aby układ widżetu był niezależny od orientacji i urządzenia. W tym celu upewnij się, że układ może się rozciągać i zmniejszać.
  • Zastanów się, czy widżet wymaga dodatkowej konfiguracji.