Розміри екрану на екрані для 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 ". Якщо ви розробляєте кроссплатформенная-Webview додаток , яке ви повинні розглянути багато речей (чи має екран функціональні клавіші кнопки навігації чи ні, і т.д.). Тому, я думаю , що є тільки один відповідний розчин. Розчин для підготуйте 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 при використанні не- 9-патч-екранів
<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-великий) екран. Я написав заради прикладу нижче;
У Photoshop: Файл -> Створити у новому діалоговому вікні, встановіть ваші екрани
Ширина: 720 пікселів Висота: 1280 пікселів
Я думаю, що вищевказані розміри означають роздільну здатність 320 пікселів / дюймів. Але щоб переконатися, що ви можете змінити значення роздільної здатності на 320 у діалоговому вікні. У цьому випадку Пікселі / Дюйми = DPI
Вітаємо ... У вас є шаблон на екрані із сплеском 720dp x 1280dp.
Як генерувати 9-патч-сплеск екрану
Після того, як ви створили екран заставки, якщо ви хочете розробити 9-патч-екран, ви повинні вставити проміжок по 1 пікселя для кожної сторони. З цієї причини слід збільшити +2 пікселя на ширину та висоту розміру полотна (тепер розміри ваших зображень становлять 722 х 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-S veličine
Якщо вам потрібні розміри значків додатків 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