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" />
android
splash-screen
pixel-density
user1767962
źródło
źródło
Odpowiedzi:
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.
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
źródło
xlarge != xhdpi
, mierzą dwie zupełnie różne rzeczy. Te rozmiary dp są wymienione dla łyżek rozmiaru, a nie gęstości.Rozmiary ekranu powitalnego dla Androida
a jednocześnie dla Cordova (aka Phonegap), React-Native i wszystkich innych platform programistycznych
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 screen
nagłówek poniżej).Otóż to!
Kod specyficzny dla Cordova
Do dodania wierszy do config.xml dla ekranów powitalnych z 9 poprawkami
Dodanie wierszy do config.xml przy korzystaniu z ekranów powitalnych innych niż -9-patch
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.
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ę.
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
źródło
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
źródło
ldpi/mdpi/hdpi/xhdpi
odpowiadająsmall/normal/large/xlarge
w 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ę?źródło
Użyj tego, aby utworzyć obrazy i umieścić je w określonym folderze zasobów.
źródło
Po prostu skorzystaj z tej strony: http://ticons.fokkezb.nl :)
Ułatwia to i bezpośrednio generuje prawidłowe rozmiary
źródło
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.)
źródło