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.
|
|
|
|
|
|
|
Rysunek 1. Rozmiar i położenie ikony karty w granicach zasobu ikony. |
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.
|
Rysunek 2. Style i efekty dotyczące niewybranych ikon kart. Uwaga: wszystkie wymiary w pikselach dotyczą średniej gęstości i należy je przeskalować odpowiednio do innych gęstości.
|
|
Rysunek 3. Style i efekty w przypadku wybranych ikon kart. Uwaga: wszystkie wymiary w pikselach dotyczą średniej gęstości i należy je przeskalować odpowiednio do innych gęstości.
|
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.
|
Rysunek 3. Gradient SafeFrame i wypełnienia w przypadku niewybranych ikon kart. Rozmiar ikony to 32 x 32. |
|
Rysunek 4. Gradient SafeFrame i Wypełniania ikon kart w wybranym stanie. Rozmiar ikony to 32 x 32. |
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.
|
Rysunek 5. Jasność, efekty i cienie w przypadku niewybranych ikon kart.
|
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.
|
Rysunek 6. Światło, efekty i cienie w przypadku wybranych ikon kart.
|
Palety kolorów
|
Krok po kroku
|
