Ikony kart to elementy graficzne reprezentujące poszczególne karty w interfejsie wielokartowym. Każda ikona karty ma 2 stany: odznaczoną i zaznaczoną.
Jak opisano w sekcji Dodawanie zestawów ikon do określonej gęstości, należy utworzyć osobne zestawy ikon dla ekranów o małej, średniej i dużej gęstości. Dzięki temu ikony będą wyświetlać się prawidłowo na różnych urządzeniach, na których można zainstalować Twoją aplikację. Wskazówki dotyczące pracy z wieloma zestawami ikon znajdziesz w sekcji Wskazówki dla projektantów.
Ostateczną grafikę należy wyeksportować jako przezroczysty plik PNG. Nie dodawaj koloru tła.
Szablony do tworzenia ikon w Adobe Photoshop są dostępne w pakiecie szablonów ikony.
Ostrzeżenie:
W Androidzie 2.0 styl ikon kart znacznie się zmienił w porównaniu z poprzednimi wersjami. Aby zapewnić pomoc dotyczącą wszystkich wersji Androida, deweloperzy powinni:
1. Umieść ikony kart w Androidzie 2.0 lub nowszym w katalogach drawable-hdpi-v5
, drawable-mdpi-v5
i drawable-ldpi-v5
.
2. Umieść ikony kart poprzednich wersji w katalogach drawable-hdpi
, drawable-mdpi
i drawable-ldpi
.
3. Ustaw android:targetSdkVersion
na wartość 5 lub wyższą w <uses-sdk> w pliku manifestu aplikacji.
System otrzyma dzięki temu informację, że karty powinny być renderowane z wykorzystaniem nowego stylu kart.
Podawanie ikon dla stanów dwóch kart
Ikony kart powinny mieć 2 stany: odznaczone i wybrane. Aby udostępnić ikony z wieloma stanami, deweloperzy muszą utworzyć dla każdej ikony listę stanu, który można rysować. Plik XML zawiera listę obrazów, których należy używać w przypadku poszczególnych stanów interfejsu.
Na przykład w widżecie kart z kartami o nazwach „Znajomi” i „Współpracownicy” możesz użyć struktury katalogu podobnej do przedstawionej poniżej:
res/... drawable/... ic_tab_friends.xml ic_tab_coworkers.xml drawable-ldpi/... ic_tab_friends_selected.png ic_tab_friends_unselected.png ic_tab_coworkers_selected.png ic_tab_coworkers_unselected.png drawable-mdpi/... ic_tab_friends_selected.png ic_tab_friends_unselected.png ic_tab_coworkers_selected.png ic_tab_coworkers_unselected.png drawable-hdpi/... ... drawable-ldpi-v5/... ... drawable-mdpi-v5/... ... drawable-hdpi-v5/... ...
Zawartość wymienionych powyżej plików XML powinna odwoływać się do odpowiednich i niewybranych elementów rysowanych. Oto przykład kodu ic_tab_friends.xml
:
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <!-- selected state --> <item android:drawable="@drawable/ic_tab_friends_selected" android:state_selected="true" android:state_pressed="false" /> <!-- unselected state (default) --> <item android:drawable="@drawable/ic_tab_friends_unselected" /> </selector>
Android od 2.0 do 2.3
Poniższe wytyczne opisują, jak projektować ikony kart na Androida od 2.0 do 2.3 (poziomy interfejsu API od 5 do 10).
Rozmiar i pozycjonowanie
Ikony kart powinny mieć proste kształty i formularze. Należy je przeskalować i umieścić w ostatecznym zasobie.
Rysunek 1 przedstawia różne sposoby umieszczania ikony w zasobie. Rozmiar ikon powinien być mniejszy niż rzeczywiste progi zasobu.
Aby wskazać zalecany rozmiar ikony, każdy przykład na Rysunku 1 zawiera 3 różne prostokąty wskazówki:
- Czerwona ramka to ramka ograniczająca cały zasób.
- Niebieskie pole to zalecana ramka ograniczająca faktyczną ikonę. Rozmiar pola ikony jest mniejszy niż pole pełnego zasobu, aby można było stosować specjalne zmiany ikon.
- Jeśli treść jest kwadratowa, to pomarańczowa ramka to zalecana ramka ograniczająca, którą ma wyświetlać się ikona. Pole kwadratowych ikon jest mniejsze niż w przypadku innych ikon, aby zachować spójność wizualną obu typów.
|
|
|
|
|
|
Styl, kolory i efekty
Ikony kart są płaskie, matowe i wyglądają jako skierowane do twarzy.
Ikony kart powinny mieć 2 stany: wybrany i odznaczony.
Zalecenia i ograniczenia
Poniżej znajdziesz kilka przykładów, które warto wziąć pod uwagę podczas tworzenia ikon kart w aplikacji.
Przykładowe ikony
Poniżej znajdują się standardowe ikony kart o wysokiej gęstości używane na platformie Androida.
Ostrzeżenie: zasoby mogą się zmieniać w zależności od wersji platformy, dlatego nie należy odwoływać się do kopii systemowej zasobów. Jeśli chcesz używać ikon lub innych wewnętrznych zasobów rysowalnych, zapisz lokalną kopię tych ikon lub elementów rysowanych w zasobach aplikacji, a potem odwołaj się do ich kopii lokalnej w kodzie aplikacji. Dzięki temu możesz zachować kontrolę nad wyglądem ikon, nawet jeśli zmieni się kopia w systemie. Pamiętaj, że siatka poniżej nie jest kompletna.
Android 1.6 i starsze
Poniższe wskazówki opisują, jak projektować ikony kart na Androida 1.6 (poziom interfejsu API 4) i starsze.
Struktura
- Niewybrane ikony kart mają taki sam gradient wypełnienia i takie same efekty jak ikony menu, ale nie są podświetlone.
- Wybrane ikony kart wyglądają tak samo jak niewybrane ikony kart, ale mają ciemniejszy wewnętrzny cień i taki sam gradient przedniej części jak ikony dialogowe.
- Ikony kart mają 1 pikselową ramkę SafeFrame, która powinna zostać nałożona tylko na krawędź antyaliasu okrągłego kształtu.
- Wszystkie wymiary podane na tej stronie są oparte na rozmiarze obszaru roboczego 32 x 32 piksele. Zachowaj 1 piksel dopełnienia wokół ramki ograniczającej w szablonie Photoshopa.
Ikona odznaczonej karty
Światło, efekty i cienie
Ikony niezaznaczonych kart wyglądają tak samo jak ikony wybranych kart, ale z słabszym wewnętrznym cieniem i tym samym gradientem części przedniej co ikony w oknach.
Krok po kroku
|
Ikona wybranej karty
Wybrane ikony kart mają taki sam gradient wypełnienia i takie same efekty jak ikona menu, ale nie są podświetlone.
Palety kolorów
|
Krok po kroku
|