Aplikacja może zawierać tylko tekst i kolor, ale możesz dodać więcej elementów wizualnych, np. logo czy ilustracji. Android ma określone sprawdzone metody dodawania grafiki do aplikacji i różnych bibliotek, które pozwalają tworzyć efekty graficzne lub dodawać ruch.
Zasób na Androida jest nazywany zasobem rysowalnym, czyli typem zasobu rysowanym na ekranie. Obejmuje to m.in. mapy bitowe, kształty i wektory.
Tworząc obrazy i grafiki, pamiętaj o tych kwestiach:
- Unikaj umieszczania w zasobach stałego tekstu.
- Jeśli to możliwe, używaj formatów wektorowych.
- Udostępnij zasoby dla zasobników rozwiązań.
- Zadbaj o odpowiednie rozcięcie między obrazami tła a tekstem.
- Chociaż Android jest w stanie osiągnąć różne efekty graficzne, takie jak gradienty, koloryzacje i rozmycia, niektóre z nich są bardziej kosztowne.
- Animowane obiekty rysowe wektorowe to skalowalny format małych animacji w interfejsie.
Eksportowanie zasobów na Androida
- Nazwy zasobów muszą być pisane małymi literami.
- Ustaw uproszczone zasoby do wyeksportowania do formatu SVG.
- Ustaw złożone obrazy, np. zdjęcia, do eksportowania w formacie WebP, PNG lub JPG.
- Ustaw odpowiednie skalowanie rozdzielczości zgodnie z instrukcjami w poniższej tabeli.
| Rozmiar ekranu | Skala |
|---|---|
mdpi |
x1 |
HDI |
x 1,5 |
xhdpi |
x2 |
xxhdpi |
3 razy |
xxxhdpi |
x4 |
Opcjonalnie możesz przekonwertować pliki SVG na obiekty rysowalne wektorowe, korzystając z Android Studio. Uporządkuj zasoby w katalogach odpowiadających rozdzielczości do przekazywania, jak pokazano na ilustracji poniżej. Możesz na przykład uwzględnić rozmiar ekranu w nazwach folderów.
Zasoby
Android obsługuje te typy komponentów.
Wektor
Grafika wektorowa jest formatem bezstratnym, co oznacza, że po skalowaniu nie traci się informacji wizualnych. Wektory składają się z punktów matematycznych, które wypełniają się w celu utworzenia obrazu.
Formaty wektorowe
Android obsługuje te formaty obrazów wektorowych: SVG i obiekty rysowalne wektorowe.
Obiekty rysowalne wektorowe wyglądają podobnie do plików SVG, ale są oparte na języku XML. Obsługują też różne atrybuty, np. gradienty. Więcej informacji na temat obsługiwanych funkcji znajdziesz w sekcji VectorDrawable. Pliki SVG można przekonwertować na obiekty rysowalne wektorowe za pomocą narzędzia Vector Asset Studio.
Przykłady zastosowań
Ze względu na mały rozmiar najlepiej tworzyć ikony w formacie wektorowym. Aby dodać ruch do ikony, możesz użyć animowanego obiektu rysowalnego wektorowego.
- Ilustracje to grafiki, które pomagają kierować użytkowników, wyjaśniać pojęcia lub wyrażać pomysły. Zwykle odzwierciedlają styl marki.
- Ilustracje okolicznościowe wyróżniają się na tle reszty treści i określają ogólny wygląd oraz sposób przedstawienia najważniejszych informacji.
- Ilustracje typu spot są mniejsze, zazwyczaj są umieszczone w tekście i obsługują otaczającą Cię treść.
Rastrowe
Grafika stratna lub grafika, która w wyniku kompresji lub skalowania traci szczegóły, składa się z pikseli tworzących obraz. Grafiki rastrowe są zwykle wykorzystywane w przypadku szczegółowych obrazów, takich jak zdjęcia czy złożone gradienty. Skalowane obrazy tracą szczegóły, dlatego wyeksportuj je w różnych rozdzielczościach.
Formaty rastrowe
System Android obsługuje następujące formaty obrazów rastrowych: PNG, GIF, JPG i WebP.
Przykłady zastosowań
Przypadki użycia obejmują obrazy, w których występują różne tekstury umożliwiające uzyskanie dużej palety kolorów i gradacji kolorów, lub obrazy ze zbyt złożonym zestawem punktów Beziera. Mogą one zawierać również bardzo szczegółowe komponenty ze zdjęciami, np. zdjęcia produktów czy szczegółowe informacje o lokalizacji.
Rozmiary
Podczas tworzenia zasobów pamiętaj o tych kwestiach.
Zasobniki rozdzielczości
Aplikacja powinna zawierać grafikę bitmapową opartą na zakresach gęstości ekranu lub zasobnikach. Za pomocą tych zasobników system operacyjny automatycznie wyświetla odpowiednią grafikę na urządzeniu. Zadbaj o to, aby wysokiej jakości grafika była wyświetlana na każdym urządzeniu, dostarczając zasoby dla każdego segmentu.
Dopełnienie
Ikony i podobne małe zasoby powinny mieć wbudowane (wbudowane) dopełnienie, aby zapewnić wystarczającą ilość miejsca na docelowe elementy dotykowe i spójne rozmiary zasobów.
Nazwy plików
Zasoby na Androida są zapisane małymi literami i nie zawierają sufiksu rozdzielczości.
Zachowaj spójną konwencję nazewnictwa i strukturę, aby uporządkować pliki i projekty. Na przykład nadanie ikonom z prefiksem „ic_...” pomoże uporządkować wszystkie ikony w projekcie i szybko je rozpoznać podczas programowania.
Inne komponenty z linkiem do aplikacji
ikony aplikacji;
Ikony Menu z aplikacjami znajdują się na ekranie głównym. W interfejsie systemu znajdziesz monochromatyczne ikony, w tym powiadomienia monochromatyczne, pasek stanu i widżety.
Formatuj ikony aplikacji jako obiekty rysowane wektorowo, aby tworzyć ikony adaptacyjne, lub PNG w przypadku starszych ikon. Więcej informacji o tworzeniu i wyświetlaniu podglądu ikony aplikacji znajdziesz w artykule Projektowanie i wyświetlanie podglądu ikon aplikacji.
Ekrany powitalne
Od Androida 12 aplikacja może wyświetlać podczas jej otwierania animowany ekran powitalny z ikoną.
Umiejscowienie
Zastanów się, jak obrazy powinny się skalować i określać położenie na ekranie. Do ustawiania skalowania obrazu można używać opcji Fit, Przytnij, Wypełnienia, FillWidth, FillBounds, Inside i None.
Możesz też przycinać obrazy do kształtu, aby uzyskać dodatkowe efekty.
Elastyczne przycinanie
Aby elastycznie wyświetlać obrazy, określ sposób przycinania obrazu w różnych zakresach punktów przerwania. W różnych zakresach punktów przerwania przycinanie może:
- Utrzymuj jeden stały współczynnik proporcji.
- Dostosuj do różnych proporcji.
- Zachowaj stałą wysokość obrazu.
Zachowaj jeden współczynnik proporcji
Rozmiary obrazu mogą utrzymywać jeden stały współczynnik proporcji w zakresach punktów przerwania.
Dostosuj do różnych formatów
Współczynniki obrazu mogą się zmieniać w związku z dostosowywaniem się do różnych zakresów punktów przerwania. Na przykład na ilustracji 9 współczynnik obrazu zmienia się między punktami przerwania z 1:1 na 16:9.
Stała wysokość obrazu
Dostosowywanie rozmiaru obrazu umożliwia utrzymanie stałej wysokości i elastycznej szerokości w zakresach punktów przerwania i w obrębie zakresów. Obraz zachowuje stałą wysokość, a szerokość między punktami przerwania jest stała.
Efekty
Android ma różne wbudowane efekty graficzne. Oto kilka najczęstszych skutków:
Gradienty
W funkcji tworzenia użyj pędzla, aby narysować coś na ekranie. Za pomocą różnych pędzli możesz rysować kształty w różnych kolorach lub z gradientem. Aby uzyskać różne efekty gradientu, użyj wbudowanych pędzli gradientu. Umożliwiają one określenie listy kolorów, na podstawie których chcesz utworzyć gradient.
Pędzelki gradientowe obsługują bardziej zaawansowane gradienty, dodając ograniczniki kolorów i płytki, o ile podasz listę kolorów i wartości procentowych w miejscach ich wystąpienia. Do przycinania gradientów, jednolitych wypełnienia kolorów i obrazów używaj kontenerów i kształtów.
Rozmycie
Stosuj efekty rozmycia do zdjęć za pomocą metody Modifier.blur() i określając współczynniki rozmycia. Zachowaj ostrożność podczas używania rozmyć, ponieważ może to wpływać na wydajność i są dostępne tylko na urządzeniach z Androidem 12 lub nowszym. Więcej informacji znajdziesz w artykule Rozmycie obrazu z możliwością kompozycyjnej.
Tryby mieszania
Android pozwala modyfikować obrazy za pomocą podobnych operacji logicznych i trybów mieszania, które znajdziesz w oprogramowaniu do projektowania, np. funkcji łączenia lub mnożenia. Więcej informacji znajdziesz w BlendMode.
Zabarwienie
Użyj trybów mieszania i wypełnień, aby zabarwić zasoby. Dzięki temu możesz mieć jeden zasób i użyć do niego różnych kolorów, co może zmniejszyć liczbę tworzonych zasobów.
Ruch
Zamiast przesyłać pliki ruchome, grafika może być animowana programowo, aby utworzyć ruchomą grafikę. Pozwala to zapewnić większą elastyczność i mniejsze zasoby.
Animowane obiekty rysowalne wektorowe umożliwiają tworzenie małych animacji interfejsu użytkownika. W przeciwnym razie dowiedz się więcej o animowaniu za pomocą klatek kluczowych na stronie Utwórz. Więcej informacji o efektach graficznych znajdziesz w artykule Dostosowywanie obrazu.