Widżety są kluczowym elementem dostosowywania ekranu głównego. Można je traktować jako „szybki podgląd” najważniejszych danych i funkcji aplikacji, który jest dostępny bezpośrednio na ekranie głównym użytkownika. Użytkownicy mogą przenosić widżety między panelami ekranu głównego i, jeśli jest to obsługiwane, zmieniać ich rozmiar, aby dostosować ilość informacji w widżecie do swoich preferencji.
W tej dokumentacji opisujemy różne typy widżetów, które możesz utworzyć, oraz zasady projektowania, których należy przestrzegać. Aby dowiedzieć się, jak utworzyć widżet aplikacji za pomocą interfejsów API Remote View i układów XML, przeczytaj artykuł Tworzenie podstawowego widżetu. Aby utworzyć widżet za pomocą interfejsów API w stylu Kotlina i Compose, zapoznaj się z informacjami o Jetpack Glance.
Typy widżetów
Planując widżet, zastanów się, jaki rodzaj widżetu chcesz utworzyć. Widżety zwykle należą do jednej z tych kategorii:
Widżety informacyjne
Widżety informacyjne zwykle wyświetlają kluczowe elementy informacji i śledzą, jak te informacje zmieniają się w czasie. Przykłady widżetów informacyjnych to widżety pogodowe, zegarowe lub śledzące wyniki sportowe. Kliknięcie widżetów informacyjnych zwykle powoduje uruchomienie powiązanej aplikacji i otwarcie szczegółowego widoku informacji z widżetu.
Widżety kolekcji
Widżety kolekcji służą do wyświetlania wielu elementów tego samego typu, takich jak kolekcja zdjęć z aplikacji galerii, kolekcja artykułów z aplikacji z wiadomościami czy kolekcja e-maili lub wiadomości z aplikacji do komunikacji. Widżety kolekcji można przewijać w pionie.
Widżety kolekcji zwykle koncentrują się na tych przypadkach użycia:
- Przeglądanie kolekcji.
- otwieranie elementu kolekcji w widoku szczegółowym w powiązanej aplikacji;
- interakcje z elementami, np. oznaczanie ich jako ukończone – z obsługą przycisków złożonych w Androidzie 12 (poziom API 31).
Widżety sterujące
Głównym celem widżetu sterującego jest wyświetlanie często używanych funkcji, aby użytkownik mógł je uruchamiać z ekranu głównego bez konieczności otwierania aplikacji. Można je traktować jako piloty do aplikacji. Przykładem widżetu sterującego jest widżet sterowania domem, który umożliwia użytkownikom włączanie i wyłączanie świateł w domu.
Interakcja z widżetem sterującym może otworzyć powiązany widok szczegółowy w aplikacji. Zależy to od tego, czy funkcja widżetu sterującego generuje jakieś dane, jak w przypadku widżetu wyszukiwania.
Widżety hybrydowe
Niektóre widżety reprezentują jeden z typów opisanych w poprzednich sekcjach (informacyjny, kolekcji lub sterujący), ale wiele z nich to widżety hybrydowe, które łączą elementy różnych typów. Na przykład widżet odtwarzacza muzyki jest głównie widżetem sterującym, ale pokazuje też użytkownikowi, który utwór jest obecnie odtwarzany, podobnie jak widżet informacyjny.
Planując widżet, zaprojektuj go na podstawie jednego 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 realizowały akcje w aplikacji, dzięki czemu użytkownicy będą mogli otrzymywać szybkie odpowiedzi i korzystać z wrażeń użytkownika aplikacji na platformach Asystenta, takich jak Android i Android Auto. Więcej informacji o obsłudze widżetów przez Asystenta znajdziesz w artykule Integracja akcji w aplikacjach z widżetami na Androida.
Ograniczenia dotyczące widżetów
Widżety można traktować jako „miniaplikacje”, ale przed zaprojektowaniem widżetu warto poznać pewne ograniczenia.
Gesty
Widżety znajdują się na ekranie głównym, więc muszą współistnieć z ustawioną tam nawigacją. Ogranicza to obsługę gestów dostępną w 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ż używany na ekranie głównym do przechodzenia między ekranami głównymi.
W przypadku widżetów dostępne są tylko gesty dotknięcia i przesunięcia w pionie.
Elementy
Ze względu na ograniczenia dotyczące gestów dostępnych w przypadku widżetów niektóre elementy interfejsu, które opierają się na ograniczonych gestach, są niedostępne w przypadku widżetów. Pełną listę obsługiwanych elementów i więcej informacji o ograniczeniach układu znajdziesz w artykułach Tworzenie układu widżetu i Zapewnianie elastycznych układów widżetów.
Wskazówki dotyczące projektowania
Postępuj zgodnie z tymi wytycznymi, aby utworzyć atrakcyjny, elastyczny i spójny widżet na ekranie głównym.
Treść widżetu
Widżety to świetny sposób na przyciągnięcie użytkownika do aplikacji przez „reklamowanie” nowych i ciekawych treści, które są w niej dostępne.
Podobnie jak zajawki na pierwszej stronie gazety, widżety konsolidują i koncentrują informacje z aplikacji oraz zapewniają połączenie z bardziej szczegółowymi informacjami w aplikacji. Można powiedzieć, że widżet to „przekąska” informacyjna, a aplikacja to „posiłek”. Upewnij się, że aplikacja wyświetla więcej szczegółów na temat elementu informacyjnego niż widżet.
Nawigacja po widżecie
Oprócz czysto informacyjnych treści warto rozważyć dodanie do widżetu linków nawigacyjnych do często używanych obszarów aplikacji. Dzięki temu użytkownicy mogą szybciej wykonywać zadania, a funkcjonalny zasięg aplikacji rozszerza się na ekran główny.
Dobrymi kandydatami na linki nawigacyjne w widżetach są:
Funkcje generatywne: to funkcje, które umożliwiają użytkownikowi tworzenie nowych treści w aplikacji, np. nowego dokumentu lub nowej wiadomości.
Otwieranie aplikacji na najwyższym poziomie: kliknięcie elementu informacyjnego zwykle powoduje przejście do ekranu szczegółów na niższym poziomie. Zapewnienie dostępu do najwyższego poziomu aplikacji zwiększa elastyczność nawigacji i może zastąpić dedykowany skrót do aplikacji, którego użytkownicy używają do przechodzenia do aplikacji z ekranu głównego. Użycie ikony aplikacji w tej funkcji może też zapewnić widżetowi wyraźną tożsamość, jeśli wyświetlane dane są niejednoznaczne.
Zmiana rozmiaru widżetu
Naciśnięcie i przytrzymanie widżetu, którego rozmiar można zmienić, a następnie zwolnienie go, powoduje przejście widżetu w tryb zmiany rozmiaru. Użytkownicy mogą ustawić preferowany rozmiar za pomocą uchwytów do przeciągania lub rogów widżetu.
Zmiana rozmiaru umożliwia użytkownikom dostosowanie wysokości i szerokości widżetu w ramach ograniczeń siatki umieszczania na ekranie głównym. Możesz zdecydować, czy rozmiar widżetu można zmieniać dowolnie, czy tylko w pionie lub poziomie. Nie musisz obsługiwać zmiany rozmiaru, jeśli widżet ma z natury stały rozmiar.
Umożliwienie użytkownikom zmiany rozmiaru widżetów ma ważne zalety:
- Mogą dostosować ilość informacji, które chcą widzieć na 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 w zależności od typu tworzonego widżetu. Widżety kolekcji oparte na listach lub siatkach są zwykle proste, ponieważ zmiana rozmiaru widżetu powoduje rozszerzenie lub zmniejszenie obszaru przewijania w pionie. Niezależnie od rozmiaru widżetu użytkownik może przewijać wszystkie elementy informacyjne, aby je wyświetlić.
Widżety informacyjne wymagają bardziej precyzyjnego planowania, ponieważ nie można ich przewijać, a cała treść musi mieścić się w określonym rozmiarze. Musisz dynamicznie dostosowywać zawartość i układ widżetu do rozmiaru określonego przez użytkownika podczas zmiany rozmiaru.
W poniższym przykładzie użytkownik może zmienić rozmiar widżetu pogodowego w 3 krokach, dzięki czemu w miarę powiększania widżetu wyświetla się więcej informacji o pogodzie w bieżącej lokalizacji.
W przypadku każdego rozmiaru widżetu określ, ile informacji z aplikacji ma być wyświetlanych. W przypadku mniejszych rozmiarów skup się na najważniejszych informacjach, a następnie dodawaj informacje kontekstowe, gdy widżet będzie się powiększał w poziomie i w pionie.
Uwagi dotyczące układu
Może Cię kusić, aby rozmieścić widżety zgodnie z wymiarami siatki miejsca docelowego na urządzeniu, na którym pracujesz. Może to być przydatne przybliżenie początkowe, ale pamiętaj o tych kwestiach:
- Planowanie strategii zmiany rozmiaru widżetu na podstawie „grup rozmiarów”, a nie zmiennych wymiarów siatki, daje najbardziej wiarygodne wyniki.
- Liczba, rozmiar i odstępy między komórkami mogą się znacznie różnić w zależności od urządzenia. Dlatego bardzo ważne jest, aby widżet był elastyczny i mógł zajmować więcej lub mniej miejsca, niż przewidywano.
- Gdy użytkownik zmienia rozmiar widżetu, system odpowiada zakresem rozmiarów w dp, w którym widżet może się ponownie narysować.
- Od Androida 12 możesz podawać bardziej precyzyjne atrybuty rozmiaru i stosować bardziej elastyczne układy. Obejmuje to:
- Określanie ograniczeń rozmiaru widżetu Możesz na przykład określić docelowy rozmiar widżetu w komórkach siatki, a także maksymalny możliwy rozmiar.
- elastyczne układy, które zmieniają się w zależności od rozmiaru widżetu;
- Udostępnianie układów o dokładnym rozmiarze, które pozwalają launcherowi reagować na opcje rozmiaru w trybie pionowym i poziomym na telefonach lub na 4 rozmiary na urządzeniach składanych.
- Używanie zaktualizowanych wskazówek i nowych interfejsów API do określania odpowiednich rozmiarów widżetu.
Konfiguracja widżetów przez użytkowników
Czasami użytkownik musi skonfigurować widżet, zanim będzie mógł z niego korzystać. Przykładem może być widżet poczty e-mail, w którym użytkownik musi wybrać folder poczty, zanim będzie można wyświetlić skrzynkę odbiorczą, lub widżet ze zdjęciem, w którym użytkownik musi przypisać zdjęcie z galerii, które ma być wyświetlane. Widżety na Androida wyświetlają opcje konfiguracji, gdy tylko użytkownik upuści widżet na ekranie głównym.
Lista kontrolna dotycząca projektowania widżetów
- Skup się na niewielkich ilościach informacji, które można szybko sprawdzić w widżecie. Zamieść w aplikacji wyjaśnienie lub odpowiednie informacje.
- Wybierz odpowiedni typ widżetu do swoich celów.
- Zaplanuj, jak zawartość widżetu ma się dostosowywać do różnych rozmiarów.
- Układ widżetu powinien być niezależny od orientacji i urządzenia, dlatego upewnij się, że można go rozciągać i zmniejszać.
- Zastanów się, czy widżet wymaga dodatkowej konfiguracji.