Размеры экрана-заставки для Android
и в то же время для Cordova (также известного как Phonegap), React-Native и всех других платформ разработки
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
Примечание. Подготовка XXXHDPI не требуется, а также, возможно, размера XXHDPI из-за повторяющихся областей изображений с 9 фрагментами. С другой стороны, если использовать только портретные размеры, размер приложения мог бы быть еще меньше. Больше изображений означает, что вам нужно больше места.
Обращать внимание
Думаю, нет точного размера для всех устройств. Я использую Xperia Z 5 ". Если вы разрабатываете кроссплатформенное приложение с веб-просмотром, вы должны учитывать множество вещей (есть ли на экране кнопки навигации с помощью функциональных клавиш и т. Д.). Поэтому я думаю, что есть только одно подходящее решение. Решение состоит в том, чтобы подготовьте экран-заставку с 9 патчами (см. How to design a new splash screenзаголовок ниже).
- Создайте заставку для экранов вышеуказанных размеров как 9-фрагментный . Дайте имена своим файлам с суффиксами .9.png
- Добавьте приведенные ниже строки в файл config.xml.
- При необходимости добавьте плагин заставки.
- Запустите свой проект.
Это оно!
Код
для Кордовы. Необходимо добавить строки в config.xml для экранов-заставок с 9 патчами.
<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>
Чтобы добавить строки в config.xml при использовании экранов-заставок без патчей
<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>
Как создать новую заставку
Я бы описал простой способ создать правильный экран-заставку, используя этот способ. Предположим, мы разрабатываем экран с разрешением 1280dp x 720dp - xhdpi (x-large). Я написал для примера следующее:
В Photoshop: Файл -> Создать в новом диалоговом окне установите свои экраны.
Ширина: 720 пикселей Высота: 1280 пикселей
Я предполагаю, что указанные выше размеры означают разрешение 320 пикселей / дюйм. Но чтобы убедиться, что вы можете изменить значение разрешения на 320 в своем диалоговом окне. В этом случае пикселей / дюйм = DPI.
Поздравляем ... У вас есть шаблон заставки с разрешением 720dp x 1280dp.
Как создать экран-заставку с 9 патчами
После того, как вы разработали свой экран-заставку, если вы хотите создать экран-заставку с 9 элементами, вы должны вставить зазор в 1 пиксель для каждой стороны. По этой причине вам следует увеличить на +2 пикселя ширину и высоту вашего холста (теперь размеры вашего изображения 722 x 1282).
Я оставил пустой промежуток в 1 пиксель с каждой стороны, как показано ниже.
Изменение размера холста с помощью Photoshop:
- Откройте png-файл заставки в Photoshop
- Щелкните значок замка рядом с именем «Фон» в поле «Слои» (чтобы оставить пустым вместо другого цвета, например белого), если есть ниже: - Измените размер холста в меню «Изображение» (ширина: 720 пикселей на 722 пикселя и высота: 1280 пикселей на 1282 пикселя). Теперь должны появиться зазоры в 1 пиксель с каждой стороны изображения заставки.
Затем вы можете использовать C: \ Program Files (x86) \ Android \ android-studio \ sdk \ tools \ draw9patch.bat для преобразования файла с 9 исправлениями. Для этого откройте заставку в приложении draw9patch. Вы должны определить свой логотип и расширяемые области. Обратите внимание на черную линию на следующем примере экрана-заставки. Толщина черной линии составляет всего 1 пиксель;) Черные линии слева и сверху определяют область, которая должна отображаться на экране-заставке. Точно так, как вы задумали. Правая и нижняя линии определяют добавляемую и удаляемую области (автоматически повторяющиеся области).
Просто сделайте это:
увеличьте верхний край изображения в приложении draw9patch. Щелкните и перетащите мышь, чтобы нарисовать линию. И нажмите Shift + щелкните и перетащите мышь, чтобы стереть линию.
Если вы разрабатываете кроссплатформенное приложение (например, Cordova / PhoneGap), вы можете найти по следующему адресу почти все размеры заставок мобильных ОС. Щелкните , чтобы увидеть размеры заставки для Windows Phone , WebOS , BlackBerry , Bada-WAC и Bada .
https://github.com/phonegap/phonegap/wiki/App-Splash-Screen-Sizes
А если вам нужны размеры значков приложений для iOS, Android и т. Д., Вы можете посетить здесь .
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