Widżety aplikacji (czasami tylko „widżety”) to funkcja wprowadzona w Androidzie 1.5 i znacznie ulepszona w wersjach 3.0 i 3.1. Widżet może wyświetlać aktualne lub istotne informacje z aplikacji na ekranie głównym, gdy tylko spojrzysz na aplikację. Standardowy obraz systemu Android zawiera kilka widżetów, w tym widżet zegara analogowego, muzyki i innych aplikacji.
Rysunek 1. Przykładowe widżety aplikacji na Androida 4.0
W tym dokumencie opisujemy, jak zaprojektować widżet tak, aby pasował graficznie do innych widżetów oraz do innych elementów ekranu głównego Androida, takich jak ikony i skróty programu uruchamiającego. Opisano w nim również standardy dotyczące grafiki widżetów oraz porady i wskazówki dotyczące grafiki widżetów.
Informacje na temat tworzenia widżetów znajdziesz w sekcji Widżety aplikacji w Przewodniku dla programistów.
Standardowa anatomia widżetu
Typowe widżety aplikacji na Androida mają 3 główne komponenty: ramkę ograniczającą, ramkę oraz graficzne elementy sterujące i inne elementy widżetu. Widżety aplikacji mogą zawierać podzbiór widżetów wyświetlania na Androidzie i dostępne elementy sterujące, takie jak etykiety tekstowe, przyciski i obrazy. Pełną listę dostępnych widoków znajdziesz w sekcji Tworzenie układu widżetu aplikacji w Przewodniku dla programistów. Dobrze zaprojektowane widżety pozostawią niektóre marginesy między krawędziami ramki ograniczającej a ramką oraz dopełnienie między wewnętrznymi krawędziami ramki a elementami sterującymi widżetu.
Rysunek 2. Widżety mają zazwyczaj marginesy między ramką ograniczającą a ramką oraz dopełnienie między ramką a elementami sterującymi widżetu.
Uwaga: od Androida 4.0 widżety aplikacji mają automatycznie marginesy między ramką widżetu a jego ramką, co zapewnia lepsze dopasowanie do innych widżetów i ikon na ekranie głównym użytkownika. Aby skorzystać z tego zdecydowanie zalecanego działania, ustaw parametr targetSdkVersion aplikacji na wartość 14 lub większą.
Widżety zaprojektowane tak, aby pasowały do innych widżetów na ekranie głównym, dostosowują się do innych elementów na ekranie głównym. Wykorzystują też standardowe efekty cieniowania. Wszystkie te szczegóły są opisane na tej stronie.
Określanie rozmiaru widżetu
Każdy widżet musi definiować atrybuty minWidth i minHeight, które wskazują minimalną ilość miejsca, jaką powinien domyślnie zajmować. Gdy użytkownicy dodają widżet do ekranu głównego, zajmuje on zazwyczaj więcej niż minimalna szerokość i wysokość określoną przez Ciebie. Ekrany główne Androida to siatka dostępnych miejsc, w których można umieścić widżety i ikony. Ta siatka może się różnić w zależności od urządzenia, np. wiele telefonów ma siatkę 4 x 4, a tablety – większą siatkę o wymiarach 8 x 7. Po dodaniu widżetu zostanie on rozciągnięty, aby zajmował minimalną liczbę komórek (w poziomie i w pionie), która jest wymagana do spełnienia ograniczeń minWidth i minHeight. Jak pisaliśmy w sekcji Projektowanie układów widżetów i grafiki w tle poniżej, zastosowanie dziewięciu poprawek tła i elastycznych układów widżetów aplikacji pozwala płynnie dostosować widżet do siatki na ekranie głównym urządzenia, a jednocześnie pozostaje niezawodny i wygląda niesamowicie estetycznie.
Chociaż szerokość i wysokość komórki (oraz liczba automatycznych marginesów zastosowanych do widżetów) różnią się w zależności od urządzenia, możesz skorzystać z poniższej tabeli, aby oszacować minimalne wymiary widżetu z uwzględnieniem żądanej liczby zajętych komórek siatki:
| Liczba komórek (kolumny lub wiersze) |
Dostępny rozmiar (dp) ( minWidth lub minHeight) |
|---|---|
| 1 | 40dp |
| 2 | 110dp |
| 3 | 180dp |
| 4 | 250dp |
| … | … |
| n | 70 × n − 30 |
Zalecamy zachowanie ostrożności w przypadku elementów minWidth i minHeight i określenie minimalnego rozmiaru, który zapewni, że widżet będzie działać w dobrym stanie domyślnym. Przykładowo załóżmy, że masz widżet odtwarzacza muzyki, który wyświetla wykonawcę i tytuł odtwarzanego aktualnie utworu (ustawiony pionowo), przyciski Odtwórz i Dalej:minWidthminHeight
Rysunek 3. Przykładowy widżet odtwarzacza muzyki.
Minimalna wysokość powinna być równa wysokości dwóch widoków TextView dla wykonawcy i tytułu oraz zróżnicować marginesy tekstu. Minimalna szerokość musi być równa minimalnej szerokości przycisków Odtwórz i Dalej oraz minimalnej szerokości tekstu (np. 10 znaków) i wszystkich poziomych marginesów tekstu.
Rysunek 4. Przykładowe rozmiary i marże do obliczeń minWidth/minHeight. Jako przykładową
dobrą minimalną szerokość dla etykiet tekstowych wybraliśmy 144 dp.
Poniżej podajemy przykładowe obliczenia:
minWidth= 144dp + (2 × 8dp) + (2 × 56dp) = 272dpminHeight= 48dp + (2 × 4dp) = 56dp
Jeśli w dziewięciu poprawkach tła widżetu występuje jakieś dopełnienie treści, należy odpowiednio dodać do znaczników
minWidth i minHeight.
Widżety z możliwością zmiany rozmiaru
Od wersji Androida 3.1 rozmiar widżetów można zmieniać w poziomie lub w pionie, co oznacza, że minWidth i minHeight stają się ich domyślnym rozmiarem. Minimalny rozmiar widżetu możesz określić za pomocą atrybutów minResizeWidth i minResizeHeight. Wartości te powinny określać rozmiar, poniżej którego widżet byłby nieczytelny lub w inny sposób bezużyteczny.
Jest to zwykle preferowana funkcja w przypadku widżetów kolekcji, takich jak te oparte na platformie ListView lub GridView.
Dodawanie marginesów do widżetu aplikacji
Jak wspomnieliśmy wcześniej, Android 4.0 automatycznie dodaje małe, standardowe marginesy na każdej krawędzi widżetów na ekranie głównym w przypadku aplikacji, które mają wartość targetSdkVersion równą 14 lub większą. Pomoże to zachować równowagę wizualną zawartości ekranu głównego, dlatego zalecamy, aby nie dodawać dodatkowych marginesów poza kształtem tła widżetu aplikacji w Androidzie 4.0.
Łatwo napisać jeden układ, który ma niestandardowe marginesy zastosowane we wcześniejszych wersjach platformy i nie ma dodatkowych marginesów na Androidzie 4.0 lub nowszym. Informacje o tym, jak to zrobić za pomocą kodu XML układu, znajdziesz w części Dodawanie marginesów do widżetów aplikacji w przewodniku dla programistów.
Projektowanie układów widżetów i grafiki tła
Większość widżetów ma jednolity prostokątny lub zaokrąglony prostokąt w tle. Sprawdzoną metodą jest definiowanie tego kształtu za pomocą 9 poprawek: po jednej dla każdej gęstości ekranu (szczegóły znajdziesz w artykule Obsługa wielu ekranów). Dziewięć poprawek można utworzyć za pomocą narzędzia draw9patch lub programów do edycji grafiki, np. Adobe® Photoshop. Dzięki temu kształt tła widżetu zajmie całe dostępne miejsce. Punkt dziewięciu obszarów powinien być ułożony od krawędzi do krawędzi, bez przezroczystych pikseli zapewniających dodatkowe marginesy. Zachowaj kilka pikseli obramowania w celu zastosowania subtelnych cieni lub innych subtelnych efektów.
Uwaga: tak jak w przypadku elementów sterujących w działaniach, upewnij się, że interaktywne elementy sterujące mają jasno sprecyzowany i kliknięty stan, używając elementów rysunkowych listy stanów.
Rysunek 5. Dziewięć pikseli obramowań, które wskazują rozciągnięte obszary i dopełnienie treści.
Niektóre widżety aplikacji, np. korzystające z elementu StackView, mają przezroczyste tło. W tym przypadku każdy element w StackView powinien mieć tło z dziewięcioma kropkami w linii od krawędzi do krawędzi, z niewielką lub zerową ilością przezroczystych pikseli w marginesie.
Do zawartości widżetu używaj układów elastycznych, takich jak RelativeLayout, LinearLayout lub FrameLayout. Podobnie jak układy aktywności, układy aktywności muszą dostosowywać się do różnych rozmiarów fizycznych ekranów, tak samo układy widżetów muszą dostosowywać się do różnych rozmiarów komórek siatki na ekranie głównym.
Poniżej znajduje się przykładowy układ, z którego może korzystać widżet muzyczny z informacjami tekstowymi i 2 przyciskami.
Opiera się on na poprzedniej dyskusji o dodawaniu marż w zależności od wersji systemu operacyjnego. Pamiętaj, że najbardziej odpornym i skutecznym sposobem dodawania marginesów do widżetu jest umieszczenie ramki i treści widżetu w dopełniony element FrameLayout.
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="@dimen/widget_margin">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:background="@drawable/my_widget_background">
<TextView
android:id="@+id/song_info"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:id="@+id/play_button"
android:layout_width="@dimen/my_button_width"
android:layout_height="match_parent" />
<Button
android:id="@+id/skip_button"
android:layout_width="@dimen/my_button_width"
android:layout_height="match_parent" />
</LinearLayout>
</FrameLayout>
Jeśli spojrzysz teraz na przykładowy widżet muzyczny z poprzedniej sekcji, możesz zacząć używać atrybutów elastycznego układu, takich jak:
Rysunek 6. Wyodrębnij elastyczne układy i atrybuty.
Gdy użytkownik doda widżet do ekranu głównego, na przykładowym urządzeniu z Androidem 4.0, gdzie każda komórka siatki ma rozmiar 80 dp × 100 dp, a marginesy 8 dp są automatycznie stosowane do wszystkich rozmiarów, widżet zostanie rozciągnięty w taki sposób:
Rysunek 7. Widżet muzyczny na przykładowej siatce o wymiarach 80 x 100 dp z automatycznymi marginesami dodanymi przez system 8 dp.
Korzystanie z pakietu szablonów widżetów aplikacji
Gdy zaczynasz projektować nowy lub aktualizować istniejący widżet, dobrze jest najpierw przejrzeć szablony projektu widżetów wymienione poniżej. Poniższy pakiet do pobrania zawiera dziewięć poprawek do grafiki w tle, plik XML oraz pliki źródłowe Adobe® Photoshop dla różnych gęstości ekranu, stylów widżetów wersji systemu operacyjnego oraz kolorów widżetów. Pakiet szablonów zawiera również grafiki, które zwiększają interaktywność całego widżetu lub jego części (np. przycisków).
Rysunek 8. Fragmenty pakietu szablonów widżetów aplikacji (średnia gęstość, ciemny, Android 4.0/poprzedni styl, stan domyślny/skoncentrowany/naciśnięty).
Najnowsze archiwum pakietu szablonów widżetów aplikacji znajdziesz pod tym linkiem:
Pobierz pakiet szablonów widżetów aplikacji na Androida 4.0 »