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).
- Utwórz ekrany powitalne dla powyższych rozmiarów ekranu jako 9-patch . Nadaj plikom nazwy z przyrostkami .9.png
- Dodaj poniższe linie do pliku config.xml
- W razie potrzeby dodaj wtyczkę ekranu powitalnego.
- 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.
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
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