Mam pełny ekran PNG, który chcę wyświetlać na ekranie powitalnym. Tylko jeden błąd istnieje, a ja nie mam pojęcia jaki rozmiar, aby umieścić w każdej rozciągliwej folderu ( ldpi, mdpi, hdpi, i xhdpi). Moja aplikacja powinna działać dobrze i pięknie na wszystkich telefonach i tabletach. Jakie rozmiary (w pikselach) powinienem utworzyć, aby powitanie wyświetlało się ładnie na wszystkich ekranach?

Zrzeczenie się

Ta odpowiedź pochodzi z 2013 roku i jest bardzo nieaktualna. W systemie Android 3.2 istnieje teraz 6 grup gęstości ekranu. Ta odpowiedź zostanie zaktualizowana, gdy tylko będę mogła, ale bez ETA. Informacje na temat wszystkich gęstości w tej chwili znajdują się w oficjalnej dokumentacji (chociaż jak zwykle trudno jest znaleźć informacje o określonych rozmiarach pikseli).

Oto wersja tl / dr

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

  • xlarge (xhdpi): 640x960
  • duży (hdpi): 480 x 800
  • średni (mdpi): 320 x 480
  • mały (ldpi): 240 x 320

• Przeczytaj wprowadzenie do obrazu 9-patch w Android Developer Guide

• Projektuj obrazy z obszarami, 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 ze standardem 9 łatek.

koniec tl; dr. Pełny post z wyprzedzeniem

Odpowiadam w odniesieniu do aspektu projektowego pytania. Nie jestem programistą, więc nie będę w stanie dostarczyć kodu do implementacji wielu dostarczonych rozwiązań. Niestety, moim zamiarem jest pomoc projektantom, którzy są tak samo zagubieni, jak ja, kiedy pomogłem opracować moją pierwszą aplikację na Androida.

Pasuje do wszystkich rozmiarów

Dzięki systemowi Android firmy mogą opracowywać telefony komórkowe i stoły o niemal dowolnej wielkości, z niemal dowolną rozdzielczością. Z tego powodu nie ma „odpowiedniego rozmiaru obrazu” dla ekranu powitalnego, ponieważ nie ma ustalonych rozdzielczości ekranu. Stanowi to problem dla osób, które chcą wdrożyć ekran powitalny.

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

(Na marginesie, ekrany powitalne są nieco zniechęcone wśród facetów zajmujących się użytecznością. Twierdzi się, że użytkownik już wie, którą aplikację nacisnął, a znakowanie obrazu za pomocą ekranu powitalnego nie jest konieczne, ponieważ zakłóca to tylko wrażenia użytkownika z „reklama”. Powinna być jednak używana w aplikacjach, które wymagają pewnego ładowania podczas inicjalizacji (5s +), w tym w grach itp., aby użytkownik nie utknął, zastanawiając się, czy aplikacja uległa awarii, czy nie.

Gęstość ekranu; 4 klasy

Biorąc pod uwagę tak wiele różnych rozdzielczości ekranu w telefonach 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 dzieli 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. Extra-High Density (xhdpi ~ 320dpi) (Te wartości dpi są przybliżone, ponieważ niestandardowe urządzenia będą miały różne wartości dpi)

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

Mając to na uwadze, wiedz o tym: chyba że zaprojektujesz ekran dla każdej rozdzielczości używanej w Androidzie, obraz zostanie rozciągnięty do rozmiaru ekranu. I chyba, że ​​twój obraz jest w zasadzie gradientem lub rozmyciem, otrzymasz niepożądane zniekształcenie podczas rozciągania. Masz więc zasadniczo dwie opcje: utwórz obraz dla każdej kombinacji rozmiaru / gęstości ekranu lub utwórz cztery obrazy z 9 łatkami.

Najtrudniejszym rozwiązaniem jest zaprojektowanie innego ekranu powitalnego dla każdej rozdzielczości. Możesz zacząć od wykonania rozdzielczości w tabeli na końcu tej strony (jest ich więcej. Przykład: 960 x 720 nie jest tam wymieniony). Zakładając, że masz na obrazie 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 480 x 800 wyświetlany na średnim ekranie może wyglądać dobrze, ale na mniejszym ekranie (o wyższej gęstości / dpi) logo może stać się zbyt małe lub niektóre teksty mogą być nieczytelne.

Obraz 9 łatek

Drugim rozwiązaniem jest utworzenie obrazu z 9 łatami . Zasadniczo jest to 1-pikselowa przezroczysta ramka 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ę wchodził w szczegóły działania 9-płatkowych obrazów, ale w skrócie piksele, które wyrównują się do oznaczeń w górnym i lewym obszarze, to piksele, 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 precyzyjnie tworzyć przezroczyste pliki PNG).
2. 1-pikselowa ramka musi być PEŁNA PRZEJRZYSTA.
3. Przezroczysta 1-pikselowa ramka musi znajdować się wokół obrazu, a nie tylko u góry i po lewej stronie.
4. w tym obszarze możesz rysować tylko czarne (# 000000) pikseli.
5. Górna i lewa ramka (które definiują rozciąganie obrazu) mogą mieć tylko jedną kropkę (1px x 1px), dwie kropki (obie 1px x 1px) lub JEDNĄ linię ciągłą (szerokość x 1px lub 1px x wysokość).
6. Jeśli wybierzesz użycie 2 kropek, obraz zostanie proporcjonalnie powiększony (więc każda kropka będzie się powiększać kolejno, aż do osiągnięcia końcowej szerokości / wysokości)
7. Obramowanie 1px musi być dodatkiem do zamierzonych podstawowych wymiarów pliku. Tak więc obraz 9 x 100 łatek 100 x 100 musi mieć 102 x 102 (100 x 100 + 1 piksel na górze, dole, lewej i prawej stronie)
8. Obrazy 9-patchowe muszą kończyć się na * .9.png

Możesz więc umieścić 1 kropkę po obu stronach logo (w górnej ramce) i 1 kropkę powyżej i poniżej (na lewej ramce), a te oznaczone rzędy i kolumny będą jedynymi pikselami do rozciągnięcia.

Przykład

Oto obraz z 9 łatkami, 102x102px (końcowy rozmiar 100x100, do celów aplikacji):

Oto powiększenie o 200% tego samego obrazu:

Zwróć uwagę na znaczniki 1px u góry i po lewej, które mówią, które wiersze / kolumny będą się rozwijać.

Oto jak wyglądałby ten obraz w rozmiarze 100 x 100 w aplikacji:

A oto, co by chciał, gdyby został rozszerzony do 460 x 140:

Jeszcze jedna rzecz do rozważenia. Te obrazy mogą wyglądać dobrze na ekranie monitora i na większości telefonów komórkowych, ale jeśli urządzenie ma bardzo wysoką gęstość obrazu (dpi), obraz wyglądałby zbyt mały. Prawdopodobnie wciąż czytelny, ale na tablecie o rozdzielczości 1920x1200 obraz wyglądałby jak bardzo mały kwadrat na środku. Więc jakie jest rozwiązanie? Zaprojektuj 4 różne obrazy programu uruchamiającego z 9 łatkami, każdy dla innego zestawu gęstości. Aby mieć pewność, że nie wystąpi kurczenie, należy zaprojektować w najniższej wspólnej rozdzielczości dla każdej kategorii gęstości. Zmniejszanie jest tutaj niepożądane, ponieważ 9-łatka uwzględnia tylko rozciąganie, więc w procesie zmniejszania mały tekst i inne elementy mogą stracić czytelność.

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

• xlarge (xhdpi): 640x960
• duży (hdpi): 480 x 800
• średni (mdpi): 320 x 480
• mały (ldpi): 240 x 320

Tak więc zaprojektuj cztery ekrany powitalne w powyższych rozdzielczościach, rozwiń obrazy, umieszczając przezroczyste obramowanie 1px wokół płótna i zaznacz, które rzędy / kolumny będą rozciągliwe. Należy pamiętać, że te obrazy będą używane dla DOWOLNEGO urządzenia w kategorii gęstości, więc obraz ldpi (240 x 320) może zostać rozciągnięty do 1024 x 600 na bardzo dużym tablecie o małej gęstości obrazu (~ 120 dpi). Dlatego 9-łata jest najlepszym rozwiązaniem do rozciągania, o ile nie chcesz 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 dla 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 obraz nie powinien się rozciągać, a kolor tła pojawia się wszędzie tam, gdzie nastąpi rozciąganie (pamiętaj również, że określony kolor renderowany przez silnik Android prawdopodobnie będzie wyglądał inaczej niż ten sam konkretny kolor renderowany przez Photoshop, ze względu na profile kolorów).

Mam nadzieję, że to miało jakiś sens. Powodzenia!

TRYB PORTRETOWY

MDPI wynosi 320 x 480 pikseli = 320 x 480 pikseli (1x)

LDPI wynosi 0,75 x MDPI = 240 x 360 pikseli

HDPI wynosi 1,5 x MDPI = 480 x 720 pikseli

XHDPI to 2 x MDPI = 640x960px

XXHDPI wynosi 3 x MDPI = 960 x 1440 pikseli

XXXHDPI wynosi 4 x MDPI = 1280x1920px

TRYB KRAJOBRAZU

MDPI to 480x320 dp = 480x320px (1x)

LDPI wynosi 0,75 x MDPI = 360 x 240 pikseli

HDPI wynosi 1,5 x MDPI = 720 x 480 pikseli

XHDPI wynosi 2 x MDPI = 960 x 640 pikseli

XXHDPI wynosi 3 x MDPI = 1440 x 960 pikseli

XXXHDPI to 4 x MDPI = 1920x1280px

EDYTOWAĆ:

Sugerowałbym użyć Lottie do ekranu powitalnego, jeśli czytasz to w 2019+

PORTRET

LDPI: 200 x 320 pikseli

MDPI: 320 x 480 pikseli

HDPI: 480 x 800 pikseli

XHDPI: 720px1280px

KRAJOBRAZ

LDPI: 320 x 200 pikseli

MDPI: 480 x 320 pikseli

HDPI: 800 x 480 pikseli

XHDPI: 1280 x 720 pikseli

Poszukałem najlepszej i najprostszej odpowiedzi, aby utworzyć obraz 9-łatkowy. Teraz utworzenie 9 łatek jest najłatwiejszym zadaniem.

Z https://romannurik.github.io/AndroidAssetStudio/index.html możesz zrobić obraz 9-łatkowy dla wszystkich rozdzielczości - XHDPI, HDPI, MDPI, LDPI za pomocą jednego kliknięcia.

Korzystanie z PNG nie jest tak dobrym pomysłem. W rzeczywistości jest to kosztowne, jeśli chodzi o wydajność. Możesz używać rysowalnych plików XML, na przykład tła Facebooka .

Pomoże Ci to wygładzić i przyspieszyć wydajność, a do logo użyj łatek .9.

Density buckets

LDPI    120dpi    .75x
MDPI    160dpi    1x
HDPI    240dpi    1.5x
XHDPI   320dpi    2x
XXHDPI  480dpi    3x
XXXHDPI 640dpi    4x

px / dp = dpi / 160 dpi

Jakiś czas temu utworzyłem plik programu Excel z obsługiwanymi wymiarami
Mam nadzieję, że będzie to pomocne dla kogoś

Szczerze mówiąc, zgubiłem pomysł, ale odnosi się on do innej funkcji ekranu jako do rozmiaru (nie tylko gęstości)
https://developer.android.com/guide/practices/screens_support.html
Poinformuj mnie, jeśli wystąpią jakieś błędy

Link1: Dimensions.xlsx

Link2: Dimensions.xlsx

W moim przypadku użyłem listy rysowalnej w style.xml. Z rysowalną listą warstw potrzebujesz tylko jednego png dla wszystkich rozmiarów ekranu.

<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowBackground">@drawable/flash_screen</item>
    <item name="android:windowTranslucentStatus" tools:ignore="NewApi">true</item>
</style>

i flash_screen.xml w folderze z możliwością rysowania.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@android:color/white"></item>
    <item>
        <bitmap android:src="@drawable/background_noizi" android:gravity="center"></bitmap>
    </item>
</layer-list>

„background_noizi” to plik png w folderze, który można wyciągnąć. Mam nadzieję, że to pomoże.

** Jeśli szukasz szczegółów ekranu dla wszelkiego rodzaju głównych urządzeń **

przejdź do material.io

Edytowane rozwiązanie, które sprawi, że Twój SplashScreen będzie wyglądał świetnie na wszystkich interfejsach API, w tym API21 do API23

Jeśli celujesz tylko w interfejsy API 24+, możesz po prostu zmniejszyć wektor do rysowania bezpośrednio w jego pliku xml w następujący sposób:

<vector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:aapt="http://schemas.android.com/aapt"
android:viewportWidth="640"
android:viewportHeight="640"
android:width="240dp"
android:height="240dp">
<path
    android:pathData="M320.96 55.9L477.14 345L161.67 345L320.96 55.9Z"
    android:strokeColor="#292929"
    android:strokeWidth="24" />
</vector>

w powyższym kodzie przeskalowuję rysunek, który narysowałem na płótnie o wymiarach 640 x 640, aby uzyskać rozmiar 240 x 240. potem po prostu włożyłem go do mojego ekranu powitalnego z możliwością rysowania i działa świetnie:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:opacity="opaque"
android:paddingBottom="20dp" android:paddingRight="20dp" android:paddingLeft="20dp" android:paddingTop="20dp">

<!-- The background color, preferably the same as your normal theme -->
<item>
    <shape>
        <size android:height="120dp" android:width="120dp"/>
        <solid android:color="@android:color/white"/>
    </shape>
</item>

<!-- Your product logo - 144dp color version of your app icon -->
<item
    android:drawable="@drawable/logo_vect"
    android:gravity="center">

</item>
</layer-list>

mój kod w rzeczywistości rysuje tylko trójkąt na zdjęciu na dole, ale tutaj widzisz, co możesz dzięki temu osiągnąć. Rozdzielczość jest w końcu świetna, w przeciwieństwie do pikselowanych krawędzi, które uzyskiwałem, używając bitmapy. więc używajcie wektora do rysowania za wszelką cenę (istnieje strona o nazwie vectr, którą kiedyś stworzyłem, bez konieczności pobierania specjalistycznego oprogramowania).

EDYCJA, aby działała również na API21-22-23

Chociaż powyższe rozwiązanie działa na urządzeniach z API24 +, naprawdę rozczarowałem się po zainstalowaniu mojej aplikacji na urządzeniu z API22. Zauważyłem, że ekran powitalny ponownie próbował wypełnić cały widok i wyglądał jak gówno. Po oderwaniu brwi przez pół dnia, w końcu brutalnie wymusiłem rozwiązanie dzięki sile woli.

musisz utworzyć drugi plik o nazwie dokładnie takiej jak ekran powitalny xml (powiedzmy splash_screen.xml) i umieścić go w 2 folderach o nazwach drawable-v22 i drawable-v21, które utworzysz w folderze res / (aby je zobaczyć musisz zmienić widok projektu z Androida na Project). Służy to temu, aby telefon przekierował do plików umieszczonych w tych folderach, ilekroć dane urządzenie uruchamia interfejs API odpowiadający sufiksowi -vXX w folderze, który można wyciągnąć, patrz ten link . umieść następujący kod na liście warstw pliku splash_screen.xml, który tworzysz w tych folderach:

<item>
<shape>
    <size android:height="120dp" android:width="120dp"/>
    <solid android:color="@android:color/white"/>
</shape>
</item>

<!-- Your product logo - 144dp color version of your app icon -->
<item android:gravity="center">
    <bitmap android:gravity="center"
        android:src="logo_vect"/>

</item>

Z jakiegoś powodu dla tych interfejsów API musisz zawinąć swoją mapę do rysowania w mapę bitową, aby działała i odrzut końcowy wynik wyglądał tak samo. Problem polega na tym, że musisz użyć podejścia z dodatkowymi folderami, które można wyciągać, ponieważ druga wersja pliku splash_screen.xml spowoduje, że ekran powitalny nie będzie w ogóle wyświetlany na urządzeniach z interfejsami API wyższymi niż 23. Może być również konieczne umieszczenie pierwsza wersja pliku splash_screen.xml do drawable-v24 jako domyślny system Android dla najbliższego folderu drawable-vXX, jaki może znaleźć dla zasobów. mam nadzieję że to pomoże

Na podstawie tej odpowiedzi od Lucasa Cerro obliczyłem wymiary przy użyciu współczynników w dokumentach Androida , używając linii bazowej w odpowiedzi. Mam nadzieję, że pomoże to komuś innemu wejść do tego postu!

• xxxlarge (xxxhdpi): 1280x1920 (4.0x)
• xxlarge (xxhdpi): 960x1440 (3.0x)
• xduże (xhdpi): 640 x 960 (2,0 x)
• duży (hdpi): 480 x 800 (1,5 x)
• średni (mdpi): 320 x 480 (1,0 x poziom podstawowy)
• mały (ldpi): 240 x 320 (0,75 x)