Ikony kart to elementy graficzne przedstawiające poszczególne karty z kilkoma kartami. Każda ikona karty ma 2 stany: niezaznaczona i wybrana.
Jak opisano w sekcji Udostępnianie Zestawy ikon o konkretnej gęstości, należy utworzyć osobne zestawy ikon dla małych, ze średniej i dużej gęstości. Dzięki temu ikony będą wyświetlane między różnymi urządzeniami, na których może zostać zainstalowana Twoja aplikacja. Zobacz wskazówki dla projektantów. .
Ostateczna grafika musi zostać wyeksportowana jako przezroczysty plik PNG. Nie uwzględniaj kolor tła.
Szablony do tworzenia ikon w programie Adobe Photoshop są dostępne w Ikona Pakiet szablonów.
Ostrzeżenie:
Styl ikon kart bardzo się zmienił
Android 2.0 w porównaniu z poprzednimi wersjami. Do
zapewnienie wsparcia dla wszystkich wersji Androida, deweloperzy powinni:
1. Ikony kart z Androidem 2.0 lub nowszym umieść w
Katalogi: drawable-hdpi-v5, drawable-mdpi-v5 i drawable-ldpi-v5.
2. Umieść ikony kart poprzednich wersji w:
Katalogi: drawable-hdpi, drawable-mdpi i drawable-ldpi.
3. Ustaw android:targetSdkVersion na 5 lub więcej w
<uses-sdk>
w pliku manifestu aplikacji.
Poinformuje to system, że powinien renderować karty za pomocą nowego stylu.
Dostarczanie ikon dla dwóch stanów karty
Ikony kart powinny mieć 2 stany: niezaznaczone i zaznaczone. Aby dodać ikony z wieloma stanami, deweloperzy muszą utworzyć stan do rysowania (lista rysowalna) dla każdej ikony, czyli plik XML z listą obrazów w różnych stanach interfejsu.
Na przykład w widżecie kart z kartami o nazwie „Znajomi” i „Współpracownicy”, możesz użyć struktury katalogów podobnej do tej:
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 odnosić się do odpowiednich
elementy rysowalne zaznaczonych i niezaznaczonych ikon. Poniżej znajduje się przykładowy kod:
dla 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 w wersji od 2.0 do 2.3
Poniższe wskazówki opisują, jak projektować ikony kart na Androidzie 2.0 do Android 2.3 (poziomy interfejsu API od 5 do 10).
Rozmiar i pozycjonowanie
Ikony kart powinny mieć proste kształty i formularze przeskalowany i umieszczony w końcowym zasobie.
Rysunek 1 przedstawia różne sposoby umieszczania ikony w zasób. Ikony powinny być mniejsze niż rzeczywiste granice zasobu.
Aby wskazać zalecany rozmiar ikony, każdy przykład w argumencie Na rys. 1 znajdują się trzy różne prostokąty prowadnic:
- Czerwona ramka to ramka ograniczająca cały zasób.
- Niebieskie pole jest zalecaną ramką ograniczającą dla rzeczywistej ikony. Pole ikony ma rozmiar mniejszy niż pole pełnego zasobu, specjalne zastosowanie ikon.
- Pomarańczowa ramka jest zalecaną ramką ograniczającą faktyczną ikonę, gdy jej treść jest kwadratowa. Pole ikon kwadratowych jest mniejsze niż w przypadku innych aby uzyskać spójny obraz wagi pomiędzy 2 typami reklam.
|
|
|
|
|
|
|
Rysunek 1. Rozmiar i położenie ikony karty w granicach ikona komponentu. |
Styl, kolory i efekty
Ikony kart są płaskie, matowe i włączone na ekranach.
Ikony kart powinny mieć 2 stany: zaznaczony lub niezaznaczony.
|
Rysunek 2. styl i efekty dla niewybranych ikon kart. Uwaga: wszystkie wymiary w pikselach dotyczą średniej gęstości i należy je odpowiednio skalować w przypadku innych gęstości.
|
|
Rysunek 3. styl i efekty dla wybranych ikon kart. Uwaga: wszystkie wymiary w pikselach dotyczą średniej gęstości i należy je odpowiednio skalować w przypadku innych gęstości.
|
Zalecenia i ograniczenia
Poniżej znajdziesz wskazówki, co robić, a czego nie które warto wziąć pod uwagę podczas tworzenia ikon kart Twojej aplikacji.
Przykładowe ikony
Poniżej widać standardowe ikony kart o dużej gęstości, które są używane platformy Android.
Ostrzeżenie: Zasoby te mogą się zmieniać w zależności od wersji platformy, dlatego nie powinny odwoływać się do systemowej kopii zasobów. Jeśli chcesz żadnych ikon ani innych wewnętrznych zasobów, które można przeciągnąć lokalnej kopii tych ikon lub elementów rysowalnych w zasobach aplikacji, i odwołać się do kopii lokalnej z kodu aplikacji. Dzięki temu możesz: zachować kontrolę nad wyglądem ikon, nawet jeśli skopiuj zmiany. Pamiętaj, że poniższa siatka nie jest kompletna.
Android 1.6 i starsze
Poniższe wskazówki opisują, jak projektować ikony kart na Androidzie 1.6 (poziom interfejsu API 4) i starsze.
Struktura
- Niewybrane ikony kart mają taki sam gradient wypełnienia i efekty jak ikon menu, ale bez zewnętrznego poświaty.
- Wybrane ikony kart wyglądają jak niewybrane ikony kart, ale są podświetlone cień wewnętrzny i ten sam gradient przedniej części ikon okien.
- Ikony kart mają 1 piksel w ramce SafeFrame, która powinna być zasłaniana tylko na krawędziach. funkcji antyaliasu okrągłego kształtu.
- Wszystkie wymiary określone na tej stronie dotyczą rozmiaru obszaru roboczego 32 x 32 piksele. Zachowaj 1 piksel dopełnienia wokół ramki ograniczającej w szablonie Photoshop.
|
Rysunek 3. Gradient SafeFrame i wypełnienia na niewybranej karcie . Rozmiar ikony to 32 x 32 piksele. |
|
Rysunek 4. Gradient SafeFrame i wypełnienia dla ikon kart w w wybranym stanie. Rozmiar ikony to 32 x 32 piksele. |
Ikona niewybranej karty
Światło, efekty i cienie
Niezaznaczone ikony kart wyglądają tak samo jak wybrane ikony kart, ale są oznaczone jaśniejszy wewnętrzny cień i ten sam gradient części przedniej co ikony okien.
|
Rysunek 5. Światło, efekty i cienie w przypadku niezaznaczonych elementów ikon kart.
|
Krok po kroku
|
Ikona wybranej karty
Wybrane ikony kart mają ten sam gradient wypełnienia i efekty co menu. ale bez zewnętrznej poświaty.
|
Rysunek 6. Światło, efekty i cienie na wybranej karcie .
|
Palety kolorów
|
Krok po kroku
|
