Подтвердить что ты не робот

Размеры экрана заставки для Android для всех устройств

У меня есть полноэкранный PNG, который я хочу отображать на всплеске. Там только одна ошибка, и я понятия не имею какой размер можно разместить в каждой доступной папке (ldpi, mdpi, hdpi и xhdpi). Мое приложение должно работать хорошо и красиво на всех телефонах и планшетах. Какие размеры (в пикселях) я должен создать, чтобы всплеск отображался на всех экранах?

4b9b3361

Ответ 1

Отказ

Этот ответ с 2013 года и серьезно устарел. Начиная с Android 3.2 теперь имеется 6 групп плотности экрана. Этот ответ будет обновляться, как только я смогу, но без ETA. Обратитесь к официальной документации для всех плотностей на данный момент (хотя информации о конкретных размерах пикселей, как всегда трудно найти).

Здесь версия tl/dr

  • Создайте 4 изображения, по одному для каждой плотности экрана:

    • xlarge (xhdpi): 640x960
    • large (hdpi): 480x800
    • medium (mdpi): 320x480
    • small (ldpi): 240x320
  • Прочтите 9-патч-изображение в Руководстве для разработчиков Android

  • Создание изображений, которые могут быть безопасно растянуты без ущерба для конечного результата.

При этом Android выберет подходящий файл для плотности изображения устройства, а затем растянет изображение в соответствии со стандартом 9-patch.

конец tl; dr. Полный пост вперед

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

Установка всех размеров

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

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

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

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

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

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

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

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

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

Изображение с 9 патчами

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

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

  • Вы можете сделать эти изображения в Photoshop (или любое программное обеспечение для редактирования изображений, которое может точно создавать прозрачные png).
  • Граница с 1 пикселем должна быть ПОЛНОЙ ПРОЗРАЧНОЙ.
  • 1-пиксельная прозрачная рамка должна быть вокруг вашего изображения, а не только сверху и слева.
  • Вы можете нарисовать только черные (# 000000) пиксели в этой области.
  • Верхняя и левая границы (которые определяют растяжение изображения) могут иметь только одну точку (1px x 1px), две точки (как 1px x 1px), так и ONE непрерывную линию (ширина x 1px или 1px x высота).
  • Если вы решите использовать 2 точки, изображение будет пропорционально увеличено (каждая точка будет расширяться до тех пор, пока не будет достигнута окончательная ширина/высота).
  • Граница 1px должна быть в дополнение к размеру предполагаемого базового файла. Таким образом, изображение размером 100x100 9-patch должно иметь 102x102 (100x100 + 1px сверху, снизу, слева и справа).
  • 9-патч-изображения должны заканчиваться на *.9.png

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

Пример

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

9-patch image, 102x102px

Здесь 200-кратное увеличение того же изображения:

the same image, magnified 2x for clarity

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

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

rendered into 100x100

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

rendered into 460x140

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

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

  • xlarge (xhdpi): 640x960
  • large (hdpi): 480x800
  • medium (mdpi): 320x480
  • small (ldpi): 240x320

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

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

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

Ответ 2

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

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

LDPI составляет 0,75 x MDPI = 240x360px

HDPI - 1,5 x MDPI = 480x720px

XHDPI - это 2 x MDPI = 640x960px

XXHDPI - это 3 x 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

Ответ 3

ПОРТРЕТ

LDPI: 200x320px

MDPI: 320x480px

HDPI: 480x800px

XHDPI: 720px1280px

ЛАНДШАФТНЫЙ

LDPI: 320x200px

MDPI: 480x320px

HDPI: 800x480px

XHDPI: 1280x720px

Ответ 4

Я искал лучший и самый простой ответ, чтобы сделать 9-патч-образ. Теперь сделать 9 патч-образ является самой простой задачей.

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

Ответ 5

Использование PNG - не такая хорошая идея. На самом деле это дорого, насколько это касается производительности. Вы можете использовать доступные XML файлы, например Facebook.

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

Ответ 6

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

Ответ 7

В моем случае я использовал список, который можно использовать в 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>

"background_noizi" - это png в папке с возможностью переноса. Я надеюсь, что это поможет

Ответ 8

Некоторое время назад я создал файл excel с поддерживаемыми размерами
Надеюсь, это будет полезно для кого-то.

Честно говоря, я потерял эту идею, но она относится к другой функции экрана как размеру (не только плотности)
https://developer.android.com/guide/practices/screens_support.html
Пожалуйста, сообщите мне, если есть ошибки.

Link1: dimensions.xlsx

Link2: dimensions.xlsx