Omówienie widżetów aplikacji

Wypróbuj Compose
Jetpack Compose to zalecany zestaw narzędzi do tworzenia interfejsu na Androidzie. Dowiedz się, jak tworzyć widżety za pomocą interfejsów API w stylu Compose.

Widżety są ważnym elementem dostosowywania ekranu głównego. Można je traktować jako „szybki podgląd” najważniejszych danych i funkcji aplikacji, które są dostępne bezpośrednio na ekranie głównym użytkownika. Użytkownicy mogą przenosić widżety między panelami ekranu głównego, a jeśli jest to obsługiwane, zmieniać ich rozmiar, aby dostosować ilość informacji wyświetlanych w widżecie do swoich preferencji.

Z tego dokumentu dowiesz się, jakie typy widżetów możesz tworzyć i jakich zasad projektowania należy przestrzegać. Aby utworzyć widżet za pomocą interfejsów API zdalnego widoku i układów XML, przeczytaj artykuł Tworzenie prostego widżetu. Aby utworzyć widżet za pomocą Kotlina i interfejsów API w stylu Compose, przeczytaj artykuł Jetpack Glance.

Typy widżetów

Planując widżet, zastanów się, jaki typ widżetu chcesz utworzyć. Widżety zwykle należą do jednej z tych kategorii:

Widżety informacyjne

Przykład widżetu pogodowego pokazującego, że w Tokio jest duże zachmurzenie, temperatura wynosi 14 stopni, a prognozowana temperatura od 16:00 do 19:00
Rysunek 1. Widżet informacyjny z aplikacji pogodowej.

Widżety informacyjne zwykle wyświetlają najważniejsze informacje i śledzą, jak zmieniają się one w czasie. Przykłady widżetów informacyjnych to widżety pogodowe, zegary i widżety śledzące wyniki sportowe. Kliknięcie widżetu informacyjnego 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, np. kolekcji zdjęć z aplikacji galerii, kolekcji artykułów z aplikacji informacyjnej lub kolekcji 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 powiązanej aplikacji w widoku szczegółów.
  • Interakcja z elementami, np. oznaczanie ich jako wykonanych – z obsługą przycisków złożonych w Androidzie 12 (poziom API 31).

Widżety sterujące

Widżet aplikacji „Lista świateł” z przełącznikami oznaczonymi jako „Sypialnia”, „Kuchnia” i „Salon”. Dwa pierwsze przełączniki są wyłączone.
Rysunek 4. Przykład widżetu sterującego.

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 spowodować otwarcie powiązanego widoku szczegółów w aplikacji. Zależy to od tego, czy funkcja widżetu sterującego generuje jakieś dane, np. w przypadku widżetu wyszukiwania.

Widżety hybrydowe

Ogólna aplikacja do odtwarzania muzyki z przyciskami „Nie lubię”, „Wstecz”, „Odtwórz/Wstrzymaj”, „Do przodu” i „Lubię”. 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 opisanych w poprzednich sekcjach – informacyjny, kolekcji lub sterujący – ale wiele widżetów to hybrydy, które łączą elementy różnych typów. Na przykład widżet odtwarzacza muzyki jest przede wszystkim widżetem sterującym, ale pokazuje też użytkownikowi, jaki utwór jest aktualnie 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 obsługiwały działania w aplikacji, co umożliwi użytkownikom otrzymywanie szybkich odpowiedzi i interaktywnych funkcji aplikacji na powierzchniach Asystenta, takich jak Android i Android Auto. Więcej informacji o obsłudze widżetów w Asystencie znajdziesz w artykule Integracja działań w aplikacji z widżetami Androida .

Ograniczenia dotyczące widżetów

Widżety można traktować jako „miniaplikacje”, ale przed zaprojektowaniem widżetu warto poznać pewne ograniczenia.

Gesty

Ponieważ widżety znajdują się na ekranie głównym, muszą współistnieć z nawigacją, która jest tam ustalona. Ogranicza to obsługę gestów dostępną w widżecie w porównaniu z aplikacją pełnoekranową. Aplikacje mogą umożliwiać użytkownikom nawigowanie między ekranami w poziomie, ale ten gest jest już używany na ekranie głównym do nawigowania między ekranami głównymi.

Jedynymi gestami dostępnymi w widżetach są dotknięcie i przesunięcie w pionie.

Elementy

Ze względu na ograniczenia dotyczące gestów dostępnych w widżetach niektóre bloki interfejsu użytkownika, które opierają się na ograniczonych gestach, nie są dostępne w widżetach. Pełną listę obsługiwanych bloków 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 projektowania

Treść widżetu

Widżety to świetny sposób na przyciągnięcie użytkownika do aplikacji przez „reklamowanie” nowych i interesujących treści dostępnych w aplikacji.

Podobnie jak zajawki 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” informacyjna, a aplikacja to „posiłek”. Upewnij się, że aplikacja zawiera więcej szczegółów na temat informacji niż widżet.

Oprócz czystych informacji rozważ dodanie do widżetu linków nawigacyjnych do często używanych obszarów aplikacji. Umożliwi to użytkownikom szybsze wykonywanie zadań i rozszerzy funkcjonalność aplikacji na ekran główny.

Dobrymi kandydatami na linki nawigacyjne w widżetach są:

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

  • Otwieranie aplikacji na najwyższym poziomie: kliknięcie elementu informacyjnego zwykle powoduje przejście użytkownika do ekranu szczegółów niższego poziomu. Udostępnienie dostępu do najwyższego poziomu aplikacji zapewnia większą elastyczność nawigacji i może zastąpić skrót do aplikacji, którego użytkownicy używają do nawigowania 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.

Zmienianie rozmiaru widżetu

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

Dotknię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 narożnikó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 ma być dowolnie zmieniany, czy też ograniczony do zmian poziomych lub pionowych. Jeśli widżet ma stały rozmiar, nie musisz obsługiwać zmiany rozmiaru.

Umożliwienie użytkownikom zmiany rozmiaru widżetów ma ważne korzyści:

  • Mogą oni precyzyjnie dostosować ilość informacji, które chcą widzieć w każdym widżecie.
  • Mogą lepiej wpływać na układ widżetów i skrótów na panelach ekranu głównego.

Zaplanuj strategię zmiany rozmiaru widżetu zgodnie z typem tworzonego widżetu. Widżety kolekcji oparte na liście lub siatce są zwykle proste, ponieważ zmiana rozmiaru widżetu powoduje rozszerzenie lub zwężenie obszaru przewijania w pionie. Niezależnie od rozmiaru widżetu użytkownik może przewijać wszystkie elementy informacyjne.

Widżety informacyjne wymagają bardziej praktycznego planowania, ponieważ nie można ich przewijać, a cała treść musi się zmieścić w danym rozmiarze. Musisz dynamicznie dostosowywać treść 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, co spowoduje wyświetlenie bardziej szczegółowych informacji o pogodzie w bieżącej lokalizacji.

Przykładowy widżet pogodowy w najmniejszym rozmiarze siatki 3x2, z nazwą lokalizacji (Tokio), temperaturą (14°C) i symbolem oznaczającym częściowe zachmurzenie.
Rysunek 7. Przykład widżetu pogodowego w rozmiarze „małym” (siatka 3x2).


Przykład widżetu pogodowego w rozmiarze „średnim” 5x2, który zawiera wszystkie elementy interfejsu użytkownika z rozmiaru siatki 3x2 oraz etykietę „pochmurno” i prognozę temperatury od 16:00 do 19:00.
Rysunek 8. Przykład widżetu pogodowego w rozmiarze „średnim” (siatka 5x2).


Przykładowy widżet pogodowy w rozmiarze 5x4 (duży), zawierający wszystkie elementy interfejsu z rozmiarów 3x2 i 5x2 oraz prognozę pogody od wtorku do piątku.
Rysunek 9. Przykład widżetu pogodowego w rozmiarze „dużym” (siatka 5x4).

Określ, ile informacji z aplikacji ma być wyświetlanych w każdym rozmiarze widżetu. 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.

Wskazówki dotyczące układu

Możesz mieć ochotę na ułożenie widżetów zgodnie z wymiarami siatki umieszczania na urządzeniu, na którym tworzysz aplikację. Może to być przydatne przybliżenie, ale pamiętaj o tych kwestiach:

  • Najbardziej wiarygodne wyniki uzyskasz, planując strategię zmiany rozmiaru widżetu w „przedziałach rozmiarów”, a nie w zmiennych wymiarach siatki.
  • 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ł pomieścić więcej lub mniej miejsca niż oczekiwano.
  • Gdy użytkownik zmienia rozmiar widżetu, system odpowiada zakresem rozmiarów dp, w którym widżet może się ponownie narysować.
  • Od Androida 12 możesz podawać bardziej precyzyjne atrybuty rozmiaru i bardziej elastyczne układy. Obejmuje to:

Konfiguracja widżetu przez użytkowników

Czasami użytkownik musi skonfigurować widżet, zanim będzie mógł z niego korzystać. Może to być widżet e-maila, w którym użytkownik musi wybrać folder poczty, zanim będzie można wyświetlić skrzynkę odbiorczą, lub statyczny widżet zdjęć, w którym użytkownik musi przypisać obraz z galerii do wyświetlenia. Widżety Androida wyświetlają opcje konfiguracji zaraz po tym, jak użytkownik upuści widżet na ekranie głównym.

Lista kontrolna projektowania widżetów

  • Skup się na małych fragmentach informacji, które można szybko przejrzeć. Rozwiń informacje w aplikacji.
  • Wybierz odpowiedni typ widżetu.
  • Zaplanuj, jak treść widżetu ma się dostosowywać do różnych rozmiarów.
  • Zadbaj o to, aby układ widżetu był niezależny od orientacji i urządzenia, poprzez zapewnienie, że układ może się rozciągać i kurczyć.
  • Zastanów się, czy widżet wymaga dodatkowej konfiguracji.