Disclaimer

Ta odpowiedź pochodzi z 2013 roku i jest poważnie przestarzała. Począwszy od Androida 3.2 istnieje teraz 6 grup gęstości ekranu. Ta odpowiedź zostanie zaktualizowana tak szybko, jak będę mógł, ale bez ETA. Zobacz oficjalną dokumentację dla wszystkich gęstości w tej chwili (chociaż informacje na temat konkretnych rozmiarów pikseli są jak zawsze trudne do znalezienia).

Oto wersja tl / dr

• Utwórz 4 obrazy, po jednym dla każdej gęstości ekranu:

  • xlarge ( xhdpi): 640x960
  • Duży (hdpi): 480x800
  • medium (mdpi): 320x480
  • mały( ldpi): 240x320

• Przeczytaj 9-patch image introduction W Android Developer Guide

• projektuj obrazy, które mają obszary, które można bezpiecznie rozciągnąć bez uszczerbku dla efektu końcowego

Dzięki temu Android wybierze odpowiedni plik dla gęstości obrazu urządzenia, a następnie rozciągnie obraz zgodnie z 9-łatką standard.

Koniec tl; Dr. pełny post przed

Czy Twoi użytkownicy naprawdę chcą zobaczyć ekran powitalny?

(na marginesie, ekrany powitalne są nieco zniechęcane wśród facetów od użyteczności. Twierdzi się, że użytkownik już wie, na jakiej aplikacji nacisnął, a znakowanie obrazu za pomocą ekranu powitalnego nie jest konieczne, ponieważ tylko przerywa doświadczenie użytkownika z "reklamą". Należy go jednak używać w aplikacjach, które wymagają znacznego obciążenia po zainicjowaniu (5s+), w tym gier i tym podobnych, aby użytkownik nie zastanawiał się, czy aplikacja się zawiesiła, czy nie)

Gęstość ekranu; 4 klasy

Biorąc pod uwagę tak wiele różnych rozdzielczości ekranu w telefonach dostępnych na rynku, Google wdrożyło kilka alternatyw i sprytnych rozwiązań, które mogą pomóc. Pierwszą rzeczą, którą musisz wiedzieć, jest to, że Android oddziela wszystkie ekrany na 4 różne gęstości ekranu:

1. niska gęstość (ldpi ~ 120dpi)
2. średnia gęstość (mdpi ~ 160dpi)
3. Wysoka gęstość (hdpi ~ 240dpi)
4. bardzo wysoka gęstość (xhdpi ~ 320dpi) (Te wartości dpi są przybliżeniami, ponieważ niestandardowe urządzenia będą miały różne wartości dpi)

To, co (jeśli jesteś projektantem) musisz wiedzieć, to to, że Android w zasadzie wybiera spośród 4 obrazów do wyświetlenia, w zależności od urządzenia. Więc zasadniczo musisz zaprojektować 4 różne obrazy (chociaż więcej można opracować dla różnych formatów, takich jak panoramiczny, tryb pionowy/krajobrazowy itp.).

Mając to na uwadze, wiedz jedno: jeśli nie zaprojektujesz ekranu dla każdej pojedynczej rozdzielczości używanej w systemie Android, twój obraz będzie rozciągał się do rozmiaru ekranu. I jeśli twój obraz nie jest w zasadzie gradientem lub rozmyciem, otrzymasz niepożądane zniekształcenia z rozciąganiem. Masz więc zasadniczo dwie opcje: Utwórz obraz dla każdego ekranu połączenie rozmiaru/gęstości lub utworzenie czterech 9-łat obrazów.

Najtrudniejszym rozwiązaniem jest zaprojektowanie innego ekranu powitalnego dla każdej pojedynczej rozdzielczości. Możesz zacząć od uchwał w tabeli na końcu tej strony (jest ich więcej. Przykład: 960 x 720 nie jest tam wymieniony). Zakładając, że na obrazie są małe szczegóły, takie jak mały tekst, musisz zaprojektować więcej niż jeden ekran dla każdej rozdzielczości. Na przykład obraz 480x800 wyświetlany na nośniku ekran może wyglądać dobrze, ale na mniejszym ekranie (o większej gęstości/dpi) logo może stać się zbyt małe lub niektóre teksty mogą stać się nieczytelne.

9-patch image

Innym rozwiązaniem jest stworzenie 9-patchowego obrazu . Jest to zasadniczo przezroczysta ramka o rozmiarze 1 piksela wokół obrazu, a rysując czarne piksele w górnym I lewym obszarze tej ramki, możesz określić, które części obrazu będą mogły się rozciągać. Nie będę wdawał się w szczegóły jak 9-patch images praca, ale krótko mówiąc, piksele, które wyrównują się do oznaczeń w górnym I lewym obszarze, są pikselami, które zostaną powtórzone w celu rozciągnięcia obrazu.

Kilka podstawowych zasad

1. możesz tworzyć te obrazy w Photoshopie (lub dowolnym oprogramowaniu do edycji obrazów, które może dokładnie tworzyć przezroczyste pngs).
2. 1-pikselowa ramka musi być w pełni przezroczysta.
3. 1-pikselowa przezroczysta ramka musi być wokół Twojego obrazu, a nie tylko u góry i po lewej stronie.
4. you can only draw czarny (#000000) pikseli w tym obszarze.
5. górna i lewa krawędź (definiująca rozciąganie obrazu) może mieć tylko jedną kropkę (1 x 1 x 1 x), dwie kropki (1 x 1 x) lub jedną ciągłą linię (szerokość x 1 x lub 1 x wysokość).
6. jeśli zdecydujesz się użyć 2 kropek, obraz zostanie proporcjonalnie powiększony (więc każda kropka będzie rozszerzać się na zmianę, aż do osiągnięcia ostatecznej szerokości/wysokości)
7. ramka 1px musi być oprócz zamierzonych wymiarów pliku bazowego. So a 100x100 9-patch obraz musi mieć 102x102 (100x100 +1px na górze, dole, lewej i prawej)
8. obrazy z 9 łatek muszą kończyć się znakiem *.9.png

Możesz więc umieścić 1 kropkę po obu stronach logo (w górnej ramce) oraz 1 kropkę nad i pod nim (na lewej ramce), a te zaznaczone wiersze i kolumny będą jedynymi pikselami do rozciągnięcia.

Przykład

Oto 200% zoom o tym samym obrazku:

Zwróć uwagę na znaki 1px na górze i po lewej stronie mówiące, które wiersze / kolumny będą się rozszerzać.

Oto jak wyglądałby Ten obraz w 100x100 wewnątrz aplikacji:

A oto co by było gdyby rozbudowano go do 460x140:

Oto lista najmniejszych, najczęściej spotykanych rozdzielczości dla każdej kategorii gęstości:

• xlarge( xhdpi): 640x960
• Duży (hdpi): 480x800
• medium (mdpi): 320x480
• mały( ldpi): 240x320

Zaprojektuj więc cztery ekrany powitalne w powyższych rozdzielczościach, rozwiń obrazy, umieszczając przezroczystą ramkę 1px wokół płótna i zaznacz, które wiersze/kolumny będą rozciągliwe. Należy pamiętać, że te obrazy będą używane dla dowolnych urządzenie w kategorii gęstości, więc twój obraz ldpi (240 x 320) może być rozciągnięty do 1024x600 na bardzo dużym tablecie o małej gęstości obrazu (~120 dpi). Tak więc 9-patch jest najlepszym rozwiązaniem do rozciągania, o ile nie chcesz mieć zdjęcia lub skomplikowanej grafiki na ekranie powitalnym (pamiętaj o tych ograniczeniach podczas tworzenia projektu).

Ponownie, jedynym sposobem, aby to rozciąganie nie miało miejsca, jest zaprojektowanie jednego ekranu każdej rozdzielczości (lub jednego dla każdej kombinacji rozdzielczość-gęstość, jeśli chcesz uniknąć zbyt małych/dużych obrazów na urządzeniach o wysokiej/niskiej gęstości) lub powiedzieć obrazowi, aby nie rozciągał się i aby kolor tła pojawiał się wszędzie tam, gdzie wystąpi rozciąganie (Pamiętaj również, że określony kolor renderowany przez silnik Androida prawdopodobnie będzie wyglądał inaczej niż ten sam konkretny kolor renderowany przez photoshop, ze względu na profile kolorów).