У мене є повний екран PNG, який я хочу відобразити на сплеску. Тільки одна помилка там, і я поняття не маю , що розмір покласти в кожної витяжці папку ( ldpi, mdpi, hdpiі xhdpi). Моя програма повинна працювати добре і красиво на всіх телефонах і планшетах. Які розміри (у пікселях) я повинен створити, щоб вибіг відображався на всіх екранах?

Відмова від відповідальності

Ця відповідь є з 2013 року і серйозно застаріла. Станом на Android 3.2 зараз існує 6 груп щільності екрана. Ця відповідь буде оновлена, як тільки я зможу, але без ETA. Зверніться до офіційної документації про всі щільності на даний момент (хоча інформацію про конкретні розміри пікселів як завжди важко знайти).

Ось версія tl / dr

• Створіть 4 зображення, по одному для кожної щільності екрана:

  • xlarge (xhdpi): 640x960
  • великий (hdpi): 480x800
  • середовище (mdpi): 320x480
  • малий (ldpi): 240x320

• Прочитайте введення 9-латкових зображень у Посібнику для розробників Android

• Дизайн зображень із областями, які можна безпечно розтягнути, не пошкоджуючи кінцевий результат

Завдяки цьому Android вибере відповідний файл за щільністю зображення пристрою, після чого він розтягне зображення відповідно до стандарту 9 патчів.

кінець tl; dr. Повний пост вперед

Я відповідаю стосовно дизайнерського аспекту питання. Я не розробник, тому не можу надати код для реалізації багатьох запропонованих рішень. На жаль, мій намір - допомогти дизайнерам, які втратили так само, як і я, коли я допоміг розробити свій перший додаток для Android.

Підходить для всіх розмірів

За допомогою Android компанії можуть розробляти свої мобільні телефони та таблиці практично будь-якого розміру, майже з будь-якою потрібною роздільною здатністю. Через це не існує "правильного розміру зображення" для екрана заставки, як і немає фіксованої роздільної здатності екрана. Це створює проблему для людей, які хочуть реалізувати екран заставки.

Чи дійсно ваші користувачі хочуть бачити екран із сплеском?

(Зі сторони, екрани сплеск дещо відлякують серед юнаків із зручності використання. Стверджується, що користувач уже знає, яку програму він натиснув, і проклеювати ваше зображення за допомогою екрана заставки не потрібно, оскільки це лише перериває роботу користувача з "Оголошення". Однак його слід використовувати в додатках, які потребують значного завантаження при ініціалізації (5s +), включаючи ігри та інше, щоб користувач не зациклювався на цікавості, вийшов з ладу додаток чи ні)

Щільність екрана; 4 класи

Отже, враховуючи стільки різних дозволів екрана в телефонах на ринку, Google реалізував деякі альтернативи та чудові рішення, які можуть допомогти. Перше, що вам потрібно знати, це те, що Android розділяє ВСІ екрани на 4 чіткі щільності екрана:

1. Низька щільність (ldpi ~ 120dpi)
2. Середня щільність (mdpi ~ 160dpi)
3. Висока щільність (hdpi ~ 240dpi)
4. Надвисока щільність (xhdpi ~ 320dpi) (Ці значення dpi є наближенням, оскільки вбудовані пристрої на замовлення матимуть різні значення dpi)

Що ви (якщо ви дизайнер) з цього потрібно знати, це те, що Android в основному вибирає з 4 зображень для відображення, залежно від пристрою. Таким чином, вам в основному потрібно створити 4 різних зображення (хоча можна розробити більше для різних форматів, таких як широкоекранний, портретний / пейзажний режим тощо).

Зважаючи на це, знайте це: якщо ви не спроектуєте екран для кожної окремої роздільної здатності, яка використовується в Android, ваше зображення розтягнеться на розмір екрана. І якщо ваше зображення в основному не буде градієнтом або розмиттям, ви отримаєте кілька небажаних спотворень при розтягуванні. Отже, у вас є два варіанти: створити зображення для кожної комбінації розміру / щільності екрана або створити чотири 9-латні зображення.

Найскладніше рішення - розробити різний екран з бризками для кожної окремої роздільної здатності. Ви можете почати, дотримуючись дозволів у таблиці в кінці цієї сторінки (їх є більше. Приклад: 960 x 720 там не вказано). І якщо припустити, що у вас є невеликі деталі на зображенні, наприклад, невеликий текст, вам потрібно розробити більше одного екрана для кожної роздільної здатності. Наприклад, зображення розміром 480x800, що відображається на середньому екрані, може виглядати нормально, але на меншому екрані (з більш високою щільністю / dpi) логотип може стати занадто маленьким, або якийсь текст може стати нечитабельним.

9-патч-зображення

Інше рішення - створити 9-патч-зображення . Це в основному прозора рамка на 1 піксель навколо вашого зображення, і, намалювавши чорні пікселі у верхній та лівій частині цієї рамки, ви можете визначити, на які ділянки зображення буде дозволено розтягуватися. Я не буду вникати в деталі того, як працюють 9-патч-зображення, але, коротше кажучи, пікселі, які вирівнюються до маркування у верхній та лівій частині, - це пікселі, які будуть повторені для розтягування зображення.

Кілька основних правил

1. Ви можете зробити ці зображення у Photoshop (або будь-яке програмне забезпечення для редагування зображень, яке може точно створювати прозорі PNG).
2. Рамка в 1 пікселі повинна бути ПОВНОЮ ПРОЗРАЧНОСТІ.
3. Прозора рамка з 1 пікселем повинна бути навколо вашого зображення, а не лише зверху та зліва.
4. ви можете намалювати лише чорні (# 000000) пікселі в цій області.
5. Верхня та ліва межі (які визначають розтягнення зображення) можуть мати лише одну крапку (1 px x 1px), дві крапки (обидві 1px x 1px) або ONE ONE безперервну лінію (ширина x 1px або 1px x висота).
6. Якщо ви вирішите використовувати 2 крапки, зображення буде пропорційно розширене (тому кожна точка буде по черзі розширюватися до досягнення кінцевої ширини / висоти)
7. Рамка 1px повинна бути додатково до призначених розмірів базового файлу. Отже, 9-патчне зображення розміром 100x100 має насправді мати 102x102 (100x100 + 1px вгорі, внизу, зліва та справа)
8. 9-латні зображення повинні закінчуватися * .9.png

Таким чином, ви можете розмістити по 1 крапці на будь-якій стороні вашого логотипу (у верхній облямівці) та 1 крапці над і під ним (зліва) та ці позначені рядки та стовпці будуть єдиними пікселями для розтягування.

Приклад

Ось 9-патчне зображення, 102x102px (остаточний розмір 100x100, для цілей програми):

Ось таке зображення на 200%:

Зверніть увагу на позначки 1px вгорі та зліва, кажучи, які рядки / стовпці будуть розширюватися.

Ось як виглядатиме це зображення у форматі 100x100 всередині додатка:

А ось що б це хотілося, якби розширити до 460x140:

Останнє, що слід врахувати. Ці зображення можуть виглядати чудово на екрані монітора та на більшості мобільних телефонів, але якщо пристрій має дуже високу щільність зображення (dpi), зображення виглядатиме занадто мало. Напевно, все ще розбірливий, але на планшеті з роздільною здатністю 1920х1200 зображення виглядатиме як дуже маленький квадрат посередині. То яке рішення? Створіть 4 різних 9-патч-пускових зображень, кожен для різного набору щільності. Щоб переконатися, що не відбувається усадки, слід створити найменшу загальну роздільну здатність для кожної категорії щільності. Усадка тут небажана, оскільки 9-патч припадає лише на розтяжку, тому в процесі скорочення невеликий текст та інші елементи можуть втратити розбірливість.

Ось список найменших, найпоширеніших роздільних можливостей для кожної категорії щільності:

• xlarge (xhdpi): 640x960
• великий (hdpi): 480x800
• середовище (mdpi): 320x480
• малий (ldpi): 240x320

Отож спроектуйте чотири екрани з вибухом у вищезазначених роздільних резолюціях, розгорніть зображення, поставивши навколо полотна прозору межу розміром 1 пікселя та позначте, які рядки / стовпчики будуть розтяжними. Майте на увазі, що ці зображення використовуватимуться для будь-якого пристрою категорії щільності, тому зображення ldpi (240 x 320) може бути розтягнуте до 1024x600 на додатково великому планшеті з невеликою щільністю зображення (~ 120 dpi). Тож 9-патч - це найкраще рішення для розтягування, доки ви не хочете фотографії чи складної графіки для екрана заставки (пам’ятайте про ці обмеження під час створення дизайну).

Знову ж таки, єдиний спосіб, щоб цього розтягнення не відбулося, - це створити по одному екрану кожну роздільну здатність (або по одному для кожної комбінації щільності роздільної здатності, якщо ви хочете, щоб зображення не стали занадто маленькими / великими на пристроях високої / низької щільності), або сказати зображення не розтягуватиметься та має фоновий колір, де б не відбувалося розтягнення (також пам’ятайте, що певний колір, відображений двигуном Android, мабуть, буде відрізнятися від того ж конкретного кольору, який надає фотошоп, через кольорові профілі).

Сподіваюся, це мало сенс. Удачі!

РЕЖИМ ПОРТРЕТУ

MDPI - 320x480 dp = 320x480px (1x)

LDPI - 0,75 x MDPI = 240x360px

HDPI - 1,5 x MDPI = 480x720px

XHDPI дорівнює 2 x MDPI = 640x960px

XXHDPI - 3 х MDPI = 960x1440px

XXXHDPI дорівнює 4 x MDPI = 1280x1920px

РЕЖИМ ПЕЧЕЛИ

MDPI - 480x320 dp = 480x320px (1x)

LDPI - 0,75 x MDPI = 360x240px

HDPI - 1,5 x MDPI = 720x480px

XHDPI дорівнює 2 x MDPI = 960x640px

XXHDPI - 3 x MDPI = 1440x960px

XXXHDPI дорівнює 4 x MDPI = 1920x1280px

Редагувати:

Я б запропонував використовувати Lottie для заставки, якщо ви читаєте це у 2019+

ПОРТРЕТ

LDPI: 200x320px

MDPI: 320x480px

HDPI: 480x800px

XHDPI: 720px1280px

ЗЕМЛЯ

LDPI: 320x200px

MDPI: 480x320px

HDPI: 800x480px

XHDPI: 1280x720px

Я шукав найкращу і найпростішу відповідь, щоб зробити 9-патч-зображення. Тепер зробити 9 патч-зображення - це найпростіше завдання.

З https://romannurik.github.io/AndroidAssetStudio/index.html ви можете зробити 9-патч-зображення для всіх дозволів - XHDPI, HDPI, MDPI, LDPI лише одним клацанням миші.

Використання PNG - не така гарна ідея. Насправді це затратно, що стосується продуктивності. Ви можете використовувати файли XML, які можна переглядати, наприклад, фон Facebook .

Це допоможе вам згладити та прискорити продуктивність, а також використовувати логотип .9 патч-зображень.

Density buckets

LDPI    120dpi    .75x
MDPI    160dpi    1x
HDPI    240dpi    1.5x
XHDPI   320dpi    2x
XXHDPI  480dpi    3x
XXXHDPI 640dpi    4x

px / dp = dpi / 160 dpi

Деякий час тому я створив файл excel із підтримуваними розмірами.
Сподіваюся, це комусь стане у нагоді

Якщо чесно, я втратив ідею, але вона називає ще одну функцію екрана як розмір (не тільки щільність)
https://developer.android.com/guide/practices/screens_support.html
Будь ласка, повідомте мене, якщо є якісь помилки

Посилання1: розмір.xlsx

Посилання2: розмір.xlsx

У моєму випадку я використовував список, який можна малювати у style.xml. З переліком списків шарів вам потрібно лише один PNG для всіх розмірів екрана.

<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowBackground">@drawable/flash_screen</item>
    <item name="android:windowTranslucentStatus" tools:ignore="NewApi">true</item>
</style>

та flash_screen.xml у папці, що витягується.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@android:color/white"></item>
    <item>
        <bitmap android:src="@drawable/background_noizi" android:gravity="center"></bitmap>
    </item>
</layer-list>

"background_noizi" - це файл PNG у папці, що малюється. Я сподіваюся, що це допомагає.

** Якщо ви шукаєте деталі екрана для всіх основних основних пристроїв **

перейти до матеріалу.io

Відредаговане рішення, яке зробить ваш SplashScreen чудовим для всіх API, включаючи API21 до API23

Якщо ви орієнтовані лише на APIs24 +, ви можете просто змінити масштаб вашого вектора, який можна малювати безпосередньо у своєму XML-файлі, наприклад:

<vector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:aapt="http://schemas.android.com/aapt"
android:viewportWidth="640"
android:viewportHeight="640"
android:width="240dp"
android:height="240dp">
<path
    android:pathData="M320.96 55.9L477.14 345L161.67 345L320.96 55.9Z"
    android:strokeColor="#292929"
    android:strokeWidth="24" />
</vector>

у наведеному вище коді я переглядаю малюнок, що малюється на малюнку, я намалював на полотні 640x640 розмір 240x240. то я просто поклав це на мій сплеск-екран, малюючи так, і він чудово працює:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:opacity="opaque"
android:paddingBottom="20dp" android:paddingRight="20dp" android:paddingLeft="20dp" android:paddingTop="20dp">

<!-- The background color, preferably the same as your normal theme -->
<item>
    <shape>
        <size android:height="120dp" android:width="120dp"/>
        <solid android:color="@android:color/white"/>
    </shape>
</item>

<!-- Your product logo - 144dp color version of your app icon -->
<item
    android:drawable="@drawable/logo_vect"
    android:gravity="center">

</item>
</layer-list>

мій код насправді лише малювання трикутника на малюнку внизу, але тут ви бачите, чого ви можете досягти з цим. Роздільна здатність нарешті велика на відміну від пікселізованих країв, які я отримував під час використання растрової карти. тому використовуйте векторний малюнок, який можна перетягнути (будь-який спосіб (є веб-сайт під назвою vectr, який я використовував для створення шахти без хела для завантаження спеціалізованого програмного забезпечення).

EDIT для того, щоб він також працював на API21-22-23

Хоча рішення вище працює для пристроїв, що працюють з API24 +, я дуже розчарувався, встановивши свій додаток на пристрій під керуванням API22. Я помітив, що бризки екрана знову намагаються заповнити весь погляд і виглядають як лайно. Після того, як я розірвав брови протягом півдня, я, нарешті, жорстоко примусив рішення за допомогою чистої сили волі.

вам потрібно створити другий файл, названий точно так само, як splashscreen xml (скажімо, splash_screen.xml) і помістити його у 2 папки під назвою dravable-v22 та dravable-v21, які ви створите у res / folder (для того, щоб побачити їх ви повинні змінити подання проекту з Android на Project). Це служить для того, щоб ваш телефон перенаправляв на файли, розміщені в цих папках, коли відповідний пристрій запускає API, відповідний суфіксу -vXX у папці, що перетягується, див. Це посилання . розмістіть такий код у списку шарів файлу splash_screen.xml, який ви створюєте у цих папках:

<item>
<shape>
    <size android:height="120dp" android:width="120dp"/>
    <solid android:color="@android:color/white"/>
</shape>
</item>

<!-- Your product logo - 144dp color version of your app icon -->
<item android:gravity="center">
    <bitmap android:gravity="center"
        android:src="logo_vect"/>

</item>

Чомусь для цих API вам потрібно загорнути малюнок у растрову карту, щоб змусити його працювати і струмувати, щоб кінцевий результат виглядав так само. Проблема полягає в тому, що вам доведеться використовувати aproach з додатковими малюваними папками, оскільки друга версія файлу splash_screen.xml призведе до того, що ваш екран сплеску взагалі не відображатиметься на пристроях з API, що перевищують 23. Можливо, вам також доведеться розмістити Перша версія splash_screen.xml в dravable-v24 як андроїд за замовчуванням до найближчої папки dravable-vXX, яку вона може знайти для ресурсів. сподіваюся, що це допомагає

Спираючись на цю відповідь від Лукаса Серро, я розрахував розміри, використовуючи співвідношення в документах Android , використовуючи базову лінію у відповіді. Я сподіваюся, що це допоможе комусь ще, хто прийшов на цю посаду!

• xxxlarge (xxxhdpi): 1280x1920 (4.0x)
• xxlarge (xxhdpi): 960x1440 (3.0x)
• великий розмір (xhdpi): 640x960 (2,0x)
• великий (hdpi): 480x800 (1,5x)
• середній (mdpi): 320x480 (1,0x базовий рівень)
• малий (ldpi): 240x320 (0,75x)