У меня полноэкранный 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 компании могут разрабатывать свои мобильные телефоны и таблицы практически любого размера, практически с любым разрешением, которое они хотят. Из-за этого не существует «правильного размера изображения» для заставки, так как нет фиксированного разрешения экрана. Это создает проблему для людей, которые хотят реализовать заставку.

Ваши пользователи действительно хотят видеть заставку?

(Кстати, среди пользователей юзабилити несколько не рекомендуется использовать заставки). Утверждается, что пользователь уже знает, к какому приложению он прикоснулся, и маркировка вашего изображения заставкой не нужна, поскольку это только прерывает взаимодействие с пользователем. «объявление». Однако его следует использовать в приложениях, которые требуют некоторой значительной загрузки при инициализации (5 с +), включая игры и т. д., чтобы пользователь не застревал, задаваясь вопросом, произошло ли сбой приложения или нет)

Плотность экрана; 4 класса

Таким образом, учитывая огромное количество разных разрешений экрана в телефонах, представленных на рынке, Google реализовал несколько альтернатив и изящных решений, которые могут помочь. Первое, что вы должны знать, это то, что Android разделяет ВСЕ экраны на 4 различных плотности экрана:

1. Низкая плотность (ldpi ~ 120dpi)
2. Средняя плотность (MDP ~ 160 точек на дюйм)
3. Высокая плотность (hdpi ~ 240 dpi)
4. Сверхвысокая плотность (xhdpi ~ 320 точек на дюйм) (Эти значения точек на дюйм являются приблизительными, поскольку пользовательские устройства будут иметь различные значения точек на дюйм)

Из этого (если вы дизайнер) нужно знать, что Android в основном выбирает из 4 изображений для отображения в зависимости от устройства. Таким образом, вам в основном нужно создать 4 разных изображения (хотя может быть разработано больше для разных форматов, таких как широкоэкранный, портретный / альбомный режим и т. Д.).

Помните об этом: если вы не создадите экран для каждого отдельного разрешения, используемого в Android, ваше изображение растянется до размера экрана. И если ваше изображение в основном не градиентное или размытое, вы получите нежелательные искажения при растяжении. Таким образом, у вас есть два основных варианта: создать изображение для каждой комбинации размера / плотности экрана или создать четыре 9-патч-изображения.

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

9-патч

Другое решение состоит в том, чтобы создать изображение с 9 участками . По сути, это прозрачная граница размером 1 пиксель вокруг вашего изображения, и, рисуя черные пиксели в верхней и левой областях этой рамки, вы можете определить, какие части вашего изображения будут растягиваться. Я не буду вдаваться в подробности того, как работают изображения с 9 участками, но, вкратце, пиксели, которые выровнены с отметками в верхней и левой областях, - это пиксели, которые будут повторяться для растягивания изображения.

Несколько основных правил

1. Вы можете сделать эти изображения в фотошопе (или любом программном обеспечении для редактирования изображений, которое может точно создавать прозрачные PNG).
2. Граница в 1 пиксель должна быть ПОЛНОСТЬЮ ПРОЗРАЧНОЙ.
3. Прозрачная граница в 1 пиксель должна быть вокруг всего изображения, а не только сверху и слева.
4. Вы можете рисовать только черные (# 000000) пиксели в этой области.
5. Верхняя и левая границы (которые определяют растяжение изображения) могут иметь только одну точку (1px x 1px), две точки (обе 1px x 1px) или ОДНУ непрерывную линию (ширина x 1px или 1px x высота).
6. Если вы решите использовать 2 точки, изображение будет пропорционально увеличено (поэтому каждая точка будет увеличиваться по очереди, пока не будет достигнута окончательная ширина / высота)
7. Граница в 1 пиксель должна быть в дополнение к предполагаемым размерам базового файла. Таким образом, изображение размером 100x100 с 9 патчами должно иметь размер 102x102 (100x100 + 1px сверху, снизу, слева и справа)
8. 9-патч изображения должны заканчиваться * .9.png

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

пример

Вот изображение из 9 патчей, 102x102px (конечный размер 100x100, для целей приложения):

Вот 200% зум того же изображения:

Обратите внимание на отметки 1px сверху и слева, указывающие, какие строки / столбцы будут расширяться.

Вот как это изображение будет выглядеть в 100x100 внутри приложения:

А вот что было бы, если бы оно было расширено до 460x140:

И последнее, что нужно учитывать. Эти изображения могут хорошо смотреться на экране вашего монитора и на большинстве мобильных телефонов, но если устройство имеет очень высокую плотность изображения (dpi), изображение будет выглядеть слишком маленьким. Вероятно, все еще разборчиво, но на планшете с разрешением 1920x1200 изображение будет выглядеть как очень маленький квадрат в середине. Так в чем же решение? Создайте 4 разных изображения запуска с 9 патчами, каждое для разного набора плотности. Чтобы гарантировать, что сжатие не произойдет, вы должны разработать самое низкое общее разрешение для каждой категории плотности. Сжатие здесь нежелательно, потому что 9-патч учитывает только растяжение, поэтому в процессе сжатия мелкий текст и другие элементы могут потерять разборчивость.

Вот список самых маленьких, наиболее распространенных разрешений для каждой категории плотности:

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

Поэтому создайте четыре заставки в указанных выше разрешениях, разверните изображения, поместив прозрачную рамку размером 1 пиксель вокруг холста, и отметьте, какие строки / столбцы будут растягиваться. Имейте в виду, что эти изображения будут использоваться для ЛЮБОГО устройства в категории плотности, поэтому изображение ldpi (240 x 320) может быть растянуто до 1024x600 на очень большом планшете с небольшой плотностью изображения (~ 120 dpi). Таким образом, 9-patch - лучшее решение для растяжки, если вы не хотите, чтобы фотография или сложная графика использовались для заставки (имейте в виду эти ограничения при создании дизайна).

Опять же, единственный способ избежать этого растяжения - создать один экран для каждого разрешения (или один для каждой комбинации плотности разрешения, если вы хотите избежать слишком маленького / большого размера изображений на устройствах с высокой / низкой плотностью) или указать изображение, которое не растягивается и имеет фоновый цвет, появляется везде, где может произойти растяжение (также помните, что определенный цвет, отображаемый движком Android, вероятно, будет отличаться от того же конкретного цвета, отображаемого в фотошопе, из-за цветовых профилей).

Я надеюсь, что это имело какой-то смысл. Удачи!

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

MDPI 320x480 dp = 320x480px (1x)

LDPI составляет 0,75 x MDPI = 240x360 пикселей

HDPI составляет 1,5 x MDPI = 480x720 пикселей

XHDPI - 2 x MDPI = 640x960 пикселей

XXHDPI - 3 x MDPI = 960x1440 пикселей

XXXHDPI - 4 x MDPI = 1280x1920 пикселей

ЛАНДШАФТНЫЙ РЕЖИМ

MDPI - 480x320 точек на дюйм = 480x320 пикселей (1x)

LDPI составляет 0,75 x MDPI = 360x240 пикселей

HDPI составляет 1,5 х MDPI = 720x480 пикселей

XHDPI - 2 x MDPI = 960x640 пикселей

XXHDPI - 3 x MDPI = 1440x960 пикселей

XXXHDPI - 4 x MDPI = 1920x1280 пикселей

РЕДАКТИРОВАТЬ:

Я бы предложил использовать Lottie для заставки, если вы читаете это в 2019+

ПОРТРЕТ

LDPI: 200x320 пикселей

MDPI: 320x480 пикселей

HDPI: 480x800 пикселей

XHDPI: 720px1280px

ПЕЙЗАЖ

LDPI: 320x200 пикселей

MDPI: 480x320 пикселей

HDPI: 800x480 пикселей

XHDPI: 1280x720 пикселей

Я искал лучший и самый простой ответ, чтобы сделать 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 в папке drawable. Надеюсь, это поможет.

** Если вы ищете подробности экрана для всех видов основных устройств **

перейти к материалу.

Отредактированное решение, которое сделает ваш SplashScreen превосходным на всех API, включая API 21 - API 23

Если вы ориентируетесь только на 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 тогда я просто положил его в свой экран-заставку drawable вот так, и он прекрасно работает:

<?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, который я использовал для создания моего без необходимости загружать специализированное программное обеспечение).

РЕДАКТИРОВАТЬ, чтобы заставить его работать также на API21-22-23

Хотя вышеприведенное решение работает для устройств с API24 +, я очень разочаровался после установки моего приложения на устройство с API22. Я заметил, что заставка снова пытается заполнить весь вид и выглядит как дерьмо. Вырвав себе брови на полдня, я наконец-то перебил решение проблемы силой воли.

вам нужно создать второй файл с именем в точности как XML-файл splashscreen (скажем, splash_screen.xml) и поместить его в 2 папки с именами drawable-v22 и drawable-v21, которые вы создадите в папке res / (чтобы увидеть их, вы необходимо изменить вид вашего проекта с Android на Project). Это позволяет вашему телефону перенаправлять файлы, помещенные в эти папки, всякий раз, когда на соответствующем устройстве запускается API, соответствующий суффиксу -vXX в папке drawable, см. Эту ссылку . поместите следующий код в список слоев файла 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 вы должны обернуть рисованный объект в растровое изображение, чтобы заставить его работать и получить окончательный результат, который выглядит одинаково. Проблема заключается в том, что вы должны использовать подход с дополнительными отрисовываемыми папками, поскольку вторая версия файла splash_screen.xml приведет к тому, что заставка вообще не будет отображаться на устройствах с API выше 23. Возможно, вам также придется разместить первая версия файла splash_screen.xml в drawable-v24, поскольку android по умолчанию использует ближайшую папку drawable-vXX, которую он может найти для ресурсов. надеюсь это поможет

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

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