Rozmiary ekranu powitalnego w systemie Android dla wyświetlaczy ldpi, mdpi, hdpi, xhdpi? - np .: 1024X768 pikseli dla ldpi

103

Muszę zaprojektować ekrany powitalne (obrazy, które pasują do ekranu podczas ładowania) dla aplikacji na Androida przy użyciu phonegap. Muszę zaprojektować obrazy w 4 rozmiarach, które pasują do 4 typów ekranów, takich jak ldpi, mdpi, hdpi, xhdpi. Czy ktoś może mi podać dokładne rozmiary tych ekranów w pikselach, abym mógł projektować w tym rozmiarze?

Przykładowa odpowiedź:

ldpi - 1024X768 px
mdpi  - 111 X 156 px  

 We support ldpi, mdpi, hdpi and xhdpi displays; the following will define splash screens for each specific screen type.

<gap:splash src="splash/android/ldpi.png" gap:platform="android" gap:density="ldpi" />
<gap:splash src="splash/android/mdpi.png" gap:platform="android" gap:density="mdpi" />
<gap:splash src="splash/android/hdpi.png" gap:platform="android" gap:density="hdpi" />
<gap:splash src="splash/android/xhdpi.png" gap:platform="android" gap:density="xhdpi" />
user1767962
źródło
3
to ci pomoże
Mohammed Azharuddin Shaikh

Odpowiedzi:

98

Może istnieć wiele różnych rozmiarów ekranu, ponieważ Android nie ma ustawionego standardowego rozmiaru, więc jako przewodnik można użyć minimalnych rozmiarów ekranu, które są dostarczane przez Google.

Według statystyk Google większość wyświetlaczy ldpi to małe ekrany, a większość wyświetlaczy mdpi, hdpi, xhdpi i xxhdpi to ekrany o normalnych rozmiarach.

  • Duże ekrany mają co najmniej 960dp x 720dp
  • duże ekrany mają co najmniej 640 x 480 dpi
  • normalne ekrany mają wymiary co najmniej 470 x 320 dpi
  • małe ekrany mają co najmniej 426 dp x 320 dp

Możesz wyświetlić statystyki dotyczące względnych rozmiarów urządzeń na pulpicie nawigacyjnym Google, który jest dostępny tutaj .

Więcej informacji na temat wielu ekranów można znaleźć tutaj .

9 Obraz poprawki

Najlepszym rozwiązaniem jest utworzenie obrazu z dziewięcioma polami, tak aby obramowanie obrazu można było rozciągać, dopasowując się do rozmiaru ekranu bez wpływu na statyczny obszar obrazu.

http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch

Alex Wiese
źródło
Czy możesz dołączyć również xxhdpi? (jeśli istnieje)
Adonis K. Kakoulidis
Google definiuje xxhdpi jako ~ 480 DPI. Z tego, co widzę, nie podają minimalnego rozmiaru ekranu.
Alex Wiese
8
Dlaczego to ma tak wiele pozytywnych głosów? xlarge != xhdpi, mierzą dwie zupełnie różne rzeczy. Te rozmiary dp są wymienione dla łyżek rozmiaru, a nie gęstości.
Geobits
@geobits spójrz na pytanie. Pyta, jakiego rozmiaru powinny być jego ekrany powitalne dla każdej obsługiwanej gęstości. Ponieważ może istnieć dowolna liczba różnych rozmiarów, ponieważ Android nie ma ustawionego standardowego rozmiaru, najbliższa poprawna odpowiedź, jaką możemy podać, to minimalne rozmiary ekranu, które są dostarczane przez Google. Możesz przeczytać więcej na ten temat, klikając link w odpowiedzi.
Alex Wiese
2
Rozumiem, co mówisz, ale nie tak mówi twoja odpowiedź. Gdyby tak było, nawet bym nie komentował. Poprosił o listę rozmiarów, a ty po prostu podajesz listę opartą na czymś innym bez wyjaśnienia. Powinieneś go edytować w programie, niezależnie od tego, czy łączysz się z dokumentami, czy nie.
Geobits
135

Rozmiary ekranu powitalnego dla Androida

a jednocześnie dla Cordova (aka Phonegap), React-Native i wszystkich innych platform programistycznych

Format : 9-Patch PNG (recommended)

Dimensions

 - LDPI:
    - Portrait: 200x320px
    - Landscape: 320x200px
 - MDPI:
    - Portrait: 320x480px
    - Landscape: 480x320px
 - HDPI:
    - Portrait: 480x800px
    - Landscape: 800x480px
 - XHDPI:
    - Portrait: 720px1280px
    - Landscape: 1280x720px
 - XXHDPI
    - Portrait: 960x1600px
    - Landscape: 1600x960px
 - XXXHDPI 
    - Portrait: 1280x1920px
    - Landscape: 1920x1280px

Uwaga: Przygotowanie XXXHDPI nie jest potrzebne, a także może mieć rozmiar XXHDPI ze względu na powtarzające się obszary obrazów 9-patch. Z drugiej strony, jeśli używane są tylko rozmiary portretowe, rozmiar aplikacji może być mniejszy. Więcej zdjęć oznacza, że ​​potrzeba więcej miejsca.

Zwróć uwagę

Myślę, że nie ma dokładnego rozmiaru dla wszystkich urządzeń. Używam Xperia Z5" . Jeśli opracować aplikację crossplatform-Webview należy wziąć pod uwagę wiele rzeczy (czy ekran ma klawiszy programowalnych przycisków nawigacyjnych czy nie, itp). W związku z tym, myślę, że jest tylko jedno odpowiednie rozwiązanie. Rozwiązaniem jest do przygotuj ekran powitalny z 9 patchami (znajdź How to design a new splash screennagłówek poniżej).

  1. Utwórz ekrany powitalne dla powyższych rozmiarów ekranu jako 9-patch . Nadaj plikom nazwy z przyrostkami .9.png
  2. Dodaj poniższe linie do pliku config.xml
  3. W razie potrzeby dodaj wtyczkę ekranu powitalnego.
  4. Uruchom swój projekt.

Otóż ​​to!

Kod specyficzny dla Cordova
Do dodania wierszy do config.xml dla ekranów powitalnych z 9 poprawkami

<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="6000" />
<platform name="android">
    <splash src="res/screen/android/ldpi.9.png" density="ldpi"/>
    <splash src="res/screen/android/mdpi.9.png" density="mdpi"/>
    <splash src="res/screen/android/hdpi.9.png" density="hdpi"/>
    <splash src="res/screen/android/xhdpi.9.png" density="xhdpi"/> 
</platform>

Dodanie wierszy do config.xml przy korzystaniu z ekranów powitalnych innych niż -9-patch

<platform name="android">
    <splash src="res/screen/android/splash-land-hdpi.png" density="land-hdpi"/>
    <splash src="res/screen/android/splash-land-ldpi.png" density="land-ldpi"/>
    <splash src="res/screen/android/splash-land-mdpi.png" density="land-mdpi"/>
    <splash src="res/screen/android/splash-land-xhdpi.png" density="land-xhdpi"/>

    <splash src="res/screen/android/splash-port-hdpi.png" density="port-hdpi"/>
    <splash src="res/screen/android/splash-port-ldpi.png" density="port-ldpi"/>
    <splash src="res/screen/android/splash-port-mdpi.png" density="port-mdpi"/>
    <splash src="res/screen/android/splash-port-xhdpi.png" density="port-xhdpi"/>
</platform>

Jak zaprojektować nowy ekran powitalny

Opisałbym w ten sposób prosty sposób stworzenia odpowiedniego ekranu powitalnego. Załóżmy, że projektujemy ekran o rozdzielczości 1280 x 720 dpi - xhdpi (x-duży). Dla przykładu napisałem poniżej;

  • W Photoshopie: Plik -> Nowy w nowym oknie dialogowym ustaw ekrany

    Szerokość: 720 pikseli Wysokość: 1280 pikseli

    Wydaje mi się, że powyższe rozmiary oznaczają rozdzielczość 320 pikseli / cal. Ale aby upewnić się, że możesz zmienić wartość rozdzielczości na 320 w oknie dialogowym. W tym przypadku piksele / cal = DPI

    Gratulacje ... Masz szablon ekranu powitalnego 720dp x 1280dp.

Jak wygenerować ekran powitalny z 9 poprawkami

Po zaprojektowaniu ekranu powitalnego, jeśli chcesz zaprojektować 9-patchowy ekran powitalny, powinieneś wstawić 1 piksel odstępu z każdej strony. Z tego powodu należy zwiększyć szerokość i wysokość obszaru roboczego o +2 piksele (teraz rozmiar obrazu to 722 x 1282).

Zostawiłem pustą 1 pikselową lukę z każdej strony, jak pokazano poniżej.
Zmiana rozmiaru płótna za pomocą programu Photoshop:
- Otwórz plik png ekranu powitalnego w programie Photoshop
- Kliknij ikonę kłódki obok nazwy „Tło” w polu Warstwy (aby pozostawić puste zamiast innego koloru, np. Białego), jeśli poniżej: - Zmień rozmiar płótna w menu Obraz (szerokość: 720 pikseli na 722 piksele i wysokość: 1280 pikseli na 1282 piksele). Teraz powinien być widoczny 1 piksel odstępu po każdej stronie obrazu ekranu powitalnego.
wprowadź opis obrazu tutaj


Następnie możesz użyć C: \ Program Files (x86) \ Android \ android-studio \ sdk \ tools \ draw9patch.bat, aby przekonwertować plik z 9 poprawkami. W tym celu otwórz ekran powitalny w aplikacji draw9patch. Powinieneś zdefiniować swoje logo i obszary do rozwijania. Zwróć uwagę na czarną linię na poniższym przykładowym ekranie powitalnym. Grubość czarnej linii to zaledwie 1 piksel;) Lewa i górna strona czarnych linii definiują obszar, który musi być wyświetlany na ekranie powitalnym. Dokładnie tak, jak zaprojektowałeś. Prawe i dolne linie definiują obszar, który można dodać i usunąć (obszary automatycznie powtarzane).

Po prostu zrób to: powiększ górną krawędź obrazu w aplikacji draw9patch. Kliknij i przeciągnij myszą, aby narysować linię. I naciśnij Shift + kliknij i przeciągnij myszą, aby usunąć linię.

Przykładowy projekt 9-łatek

Jeśli tworzysz aplikację wieloplatformową (taką jak Cordova / PhoneGap), możesz znaleźć następujący adres dla prawie wszystkich rozmiarów ekranu powitalnego mabile OS. Kliknij, aby wyświetlić rozmiary ekranu powitalnego Windows Phone , WebOS , BlackBerry , Bada-WAC i Bada .

https://github.com/phonegap/phonegap/wiki/App-Splash-Screen-Sizes

A jeśli potrzebujesz rozmiarów ikon aplikacji IOS, Android itp., Możesz odwiedzić tutaj .

IOS

Format : PNG (recommended)

Dimensions

 - Tablet (iPad)
   - Non-Retina (1x)
     - Portrait: 768x1024px
     - Landscape: 1024x768px
   - Retina (2x)
     - Portrait: 1536x2048px
     - Landscape: 2048x1536px
 - Handheld (iPhone, iPod)
   - Non-Retina (1x)
     - Portrait: 320x480px
     - Landscape: 480x320px
   - Retina (2x)
     - Portrait: 640x960px
     - Landscape: 960x640px
 - iPhone 5 Retina (2x)
   - Portrait: 640x1136px
   - Landscape: 1136x640px
 - iPhone 6 (2x)
   - Portrait: 750x1334px
   - Landscape: 1334x750px
 - iPhone 6 Plus (3x)
   - Portrait: 1242x2208px
   - Landscape: 2208x1242px
efkan
źródło
105

Dla urządzeń mobilnych z systemem Android

LDPI- icon-36x36, splash-426x320 (teraz z poprawnymi wartościami)


MDPI- ikona-48x48, splash-470x320


HDPI - ikona 72x72, splash - 640x480


XHDPI- icon-96x96, splash- 960x720


XXHDPI - ikona - 144x144

Wszystko w pikselach.

Dla tabletów z systemem Android

LDPI:
    Portrait: 200x320px
    Landscape: 320x200px
MDPI:
    Portrait: 320x480px
    Landscape: 480x320px
HDPI:
    Portrait: 480x800px
    Landscape: 800x480px
XHDPI:
    Portrait: 720px1280px
    Landscape: 1280x720px
Nijil Nair
źródło
@Geobits: oba są w pikselach. To dotyczy różnych rezolucji. Nie widzę tam zamieszania. dziwne!!
Nijil Nair
1
Rozmiary, które podajesz, ldpi/mdpi/hdpi/xhdpiodpowiadają small/normal/large/xlargew dp zgodnie z tym . Ponadto, jeśli mają rozmiary w pikselach, powinny mieć odpowiednią skalę 0.75/1/1.5/2. Czy masz źródło tych rozmiarów, których nie widzę?
Geobits
@NijilNair: dlaczego rozdzielczość zdjęć na tablecie jest mniejsza niż na telefonach komórkowych ?! Czy nie powinno być na odwrót? Na przykład jestem zaskoczony „ldpi telefonu komórkowego: 426x320”, a następnie „ldpi tabletu: 320 x 200” ... w ogóle nie wydaje się logiczne. Dzięki za odpowiedź!
Falanga
@Phalanx: sprawdź ten link. developer.android.com/guide/practices/… .
Nijil Nair
1
Czy na pewno ikona LDPI nie ma rozmiaru 36x36?
Vladius
32
  • LDPI: portret: 200 x 320 pikseli. Pozioma: 320 x 200 pikseli.
  • MDPI: portret: 320 x 480 pikseli. Pozioma: 480 x 320 pikseli.
  • HDPI: portret: 480 x 800 pikseli. Pozioma: 800 x 480 pikseli.
  • XHDPI: Pionowo: 720 x 1280 pikseli. Poziomo: 1280 x 720 pikseli.
  • XXHDPI: portret: 960 x 1600 pikseli. Pozioma: 1600 x 960 pikseli.
  • XXXHDPI: Portret: 1280 X 1920 pikseli. Pozioma: 1920 x 1280 pikseli.
Manavendher
źródło
2
Wszędzie, gdzie czytam, xhdpi jest podwojone do mdpi, więc zgodnie z tym xhdpi powinno wynosić 640 x 960, ale napisałeś to 720x1280. Czy możesz wyjaśnić, jak to jest 720x1280? Której formuły użyłeś?
Rahul Sharma
Czy xxxhdpi nie jest 1440x2560? Zgodnie z tą listą, gdzie Google Pixel XL jest wymieniony jako xxxhdpi material.io/resources/devices
CularBytes
10
  • Duże ekrany mają co najmniej 960dp x 720dp
  • Duże ekrany pozycji listy mają co najmniej 640 x 480 dpi
  • Normalne ekrany pozycji listy mają wymiary co najmniej 470 x 320 dp
  • Małe ekrany pozycji listy mają co najmniej 426dp x 320dp

Użyj tego, aby utworzyć obrazy i umieścić je w określonym folderze zasobów.

Puneet
źródło
5

Po prostu skorzystaj z tej strony: http://ticons.fokkezb.nl :)

Ułatwia to i bezpośrednio generuje prawidłowe rozmiary

Oussama L.
źródło
Wygląda na to, że ta witryna jest przeznaczona dla obrazów systemu iOS, a nie Androida.
Ryan Williams
2
Użyłem go na Androida i byłem całkiem zadowolony z wyników; à
Oussama L.
2

Duże ekrany mają co najmniej układ 960dp x 720dp - tablet xlarge 10 "(720x1280 mdpi, 800x1280 mdpi itp.)

duże ekrany to co najmniej 640dp x 480dp tablet z funkcją tweenera, taki jak Streak (480x800 mdpi), tablet 7 "(600x1024 mdpi)

normalne ekrany mają co najmniej 470dp x 320dp układ typowy ekran telefonu (480x800 hdpi)

małe ekrany to typowy ekran telefonu co najmniej 426dp x 320dp (240x320 ldpi, 320x480 mdpi itp.)

Amila
źródło