Ikony widoku listy

Ikony widoku listy wyglądają bardzo podobnie do ikon dialogów, ale wykorzystują efekt cienia wewnętrznego w miejscu, w którym źródło światła znajduje się nad obiektem. Ponadto zostały zaprojektowane tak, aby używać ich tylko w ListView. Przykładem może być aplikacja Ustawienia.

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ę. W tabeli 1 znajdziesz listę zalecanych rozmiarów gotowych ikon w poszczególnych gęstościach. Przeczytaj też wskazówki dla projektantów, by dowiedzieć się, jak pracować z wieloma zestawami ikon.

Tabela 1. Podsumowanie wymiarów ikon gotowego widoku listy dla każdej z 3 uogólnionych gęstości ekranu.

ldpi (120 dpi)
(ekran o małej gęstości) 		mdpi (160 dpi)
(ekran o średniej gęstości) 		hdpi (240 dpi)
(ekran o dużej gęstości) 		xhdpi (320 dpi)
(ekran o bardzo dużej gęstości)
Rozmiar ikony widoku listy 24 x 24 piks. 32 x 32 piks. 48 x 48 piks. 64 x 64 piks.

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.

Wszystkie wersje Androida

Poniższe wskazówki opisują sposób projektowania ikon widoku listy dla wszystkich wersji platformy Androida.

Struktura

  • Ikona widoku listy ma zwykle ramkę SafeFrame o szerokości 1 piksela, ale można użyć obszaru SafeFrame jako krawędzi antyaliasu okrągłego kształtu.
  • Wszystkie wymiary są podane na podstawie obszaru roboczego o wymiarach 32 x 32 piksele w Photoshopie. Zachowaj 1 piksel dopełnienia wokół ramki ograniczającej wewnątrz szablonu.
Widok struktury ikon w widoku listy.

Rysunek 1. Gradient SafeFrame i wypełnij w przypadku ikon widoku listy. Rozmiar ikony to 32 x 32.

Światło, efekty i cienie

Ikony w widoku listy są płaskie i na zdjęciu są skierowane do tarczy, z wewnętrznym cieniem. Dzięki jasnemu gradientowi i wewnętrznemu cieniu dobrze się wyróżniają na ciemnym tle.

widok światła, efektów i cieni w przypadku ikon widoku listy.

Rysunek 2. Światło, efekty i cienie w przypadku ikon widoku listy.

1.Cień wewnętrzny:czarny | przezroczystość 57 % | kąt 120° | tryb mieszania normalny | odległość 1 piksela | rozmiar 1 pikseli
2.Wprowadzenie:czarny | standardowy kolor systemowy
Te ikony są wyświetlane tylko w widokach listy.
Uwaga: ikona widoku listy znajduje się w programie Photoshop na obszarze roboczym o wymiarach 32 x 32 piksele, bez elementu SafeFrame.

Krok po kroku

  1. Dodaj efekty widoczne na Rysunku 2, aby utworzyć odpowiedni filtr.
  2. Wyeksportuj ikonę o wymiarach 32 x 32 jako plik PNG z włączoną przezroczystością.
  3. Utwórz podstawowe kształty za pomocą narzędzi takich jak Adobe Illustrator.
  4. Zaimportuj kształt do narzędzia takiego jak Adobe Photoshop i przeskaluj go, aby pasował do obrazu o wymiarach 32 x 32 piksele na przezroczystym tle.