Использование векторных значков в Android

Чтобы предисловие это:

Я предполагал положить это на graphicdesgin.stackexchange.com, но я пришел к выводу, что мои специфические вопросы для Android могут быть не лучшим местом для него. Вот почему я выбрал stackoverflow, потому что, похоже, это больше проблема с изображениями Android, а сами графики. Спасибо.



Мне нужно использовать некоторые базовые значки в приложении для Android. У меня есть Illustrator и Photoshop (ни один из них не подходит, но я могу пройти). Я наткнулся на http://www.androidicons.com/, и я увидел большой шанс спасти меня часа времени всего за 25 баксов. Чтобы получить представление о том, что мне нужно сделать, чтобы использовать их в своем приложении, я загрузил пакет «BONUS ICONS 01», который является бесплатным.

Введите описание изображения здесь

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

Изображение было помещено только в папку xhdpi, потому что я, вероятно, собираюсь использовать этот значок для чего-то большего, чем панель действий, но не то, что займет весь экран. Идея в моей голове заключается в том, что если вы собираетесь создавать значки панели действий для всех отдельных уровней dpi, вы ДОЛЖНЫ знать точно, какой размер (в пикселях) вы собираетесь их создать, и поэтому все они выглядят действительно хорошо ( Например, если вы загрузите значки панели действий из Google, они дадут их вам в нескольких размерах, а не только в одном). Но что, если они будут использоваться для чего-то большего? Как я должен знать, какие размеры они могут сделать.

Чтобы действительно показать мое разочарование в том, как я просто не могу понять эту тему. Вот код для моего приложения и результат того, как он заканчивается, как на моем Galaxy Nexus. Значок большего размера прекрасен, в то время как меньшие значки определенно не выглядят такими четкими. Как это исправить? Каков правильный способ создания изображений в Illustrator и перехода в Photoshop, и убедитесь, что они отлично смотрятся в любом размере, который они используют?

С уважением,

Разработчик Android, который просто не понимает графику.

Введите описание изображения здесь

Как вы можете видеть, изображение кажется очень хорошим, когда оно большое, но использование его, когда оно меньше, вызывает некоторые проблемы IMO. Любой способ исправить это? Я слишком придирчива? Даже если бы я изменил размер, чтобы он был меньше, и поместил его в mdpi, мой макет даже подберет это?

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" > <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:orientation="vertical" > <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1" android:gravity="center|center_horizontal" > <ImageView android:id="@+id/imageView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/anti_huge" android:layout_weight="1" /> <ImageView android:id="@+id/imageView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/anti_huge" android:layout_weight="1" /> <ImageView android:id="@+id/imageView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/anti_huge" android:layout_weight="1" /> <ImageView android:id="@+id/imageView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/anti_huge" android:layout_weight="1" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="fill_parent" android:layout_weight="1" android:gravity="center|center_horizontal" > <ImageView android:id="@+id/imageView3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/anti_huge" /> </LinearLayout> </LinearLayout> </RelativeLayout> 

Вопрос:

  1. Но что, если они будут использоваться для чего-то большего? ("That" = ActionBarIcons)
  2. Как я должен знать, какие размеры сделать? (ActionBarIcons предоставляются мне от Google с установленными размерами пикселей, как они отображали эти размеры)
  3. Как это исправить? (Большая иконка на тестовом приложении выглядит отлично, а маленькие – зубчатые)
  4. Каков правильный способ создания изображений в Illustrator и перехода в Photoshop, и убедитесь, что они отлично смотрятся в любом размере, который они используют?
  5. Любой способ исправить это?
  6. Я слишком придирчива? (Пожалуйста, скажи мне, что я … это испытание убивает меня.)
  7. Даже если я изменил размер, чтобы он был меньше, и поместил его в mdpi, будет ли мой макет даже выбрать это?

Вы не делаете это правильно;)

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

Вам нужно будет экспортировать png в (физический) размер, который вам действительно нужен при его использовании, а затем до требуемой плотности экрана.

Самый маленький предложенный размер для отображаемой области – 40x40dp, что соответствует квадрату 1/4 дюйма. Скорее всего, вы будете использовать 10-процентную границу, поэтому вы получите значок 32×32 пикселя в mdpi.

Итак, теперь вы делаете свое векторное изображение в 32×32 для mdpi (160dpi), 24×24 для ldpi (120dpi), 48×48 для hdpi (240 dpi) и 64×64 для xhdpi (320 dpi).

Если вы хотите, чтобы один и тот же значок был намного больше, сделайте его отдельным ресурсом. Скажем, вам нужен водяной знак 2×2 ваших часов, вы будете отображать его в 320x320px для mdpi и т. Д.

Вы указываете изображение как 200dp x 200dp в макете, и Android вытаскивает правильное изображение на экране в зависимости от разрешения устройства.

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

Значки для значков ActionBar указаны в разделе « Значки на панели действий » в Android Developers.

Вы ставите

  • Значок 48×48 пикселей в папке ресурсов xhdpi вашего проекта
  • 36×36 в папке hdpi
  • Значок 24×24 в папке mdpi

Но если я правильно понимаю, что вы правильно задаете вопрос, вы хотите знать, как взять одно из этих изображений и создать большую версию, например, как Background:

  • Во-первых, вам нужна векторная версия изображения. Откройте его в Illustrator.
  • Выберите dpi как отправную точку, скажем hdpi. Создайте png-файл из Illustrator размером, который хорошо выглядит как фон на вашем устройстве hdpi. Это эстетический выбор, неправильный или неправильный. Предположим, что размер 300 х 300 пикселей.
  • Когда вам нравится изображение на устройстве hdpi, поместите это изображение в папку ресурсов hdpi вашего проекта.
  • Создайте версию размером 0.75x для папки mdpi, т.е. 225 x225 пикселей.
  • Создайте версию размером 1.5x для папки xhdpi, т.е. 450 x 450 пикселей.

Как это сделать в иллюстраторе:

  • Создать / Открыть векторное изображение.
  • Файл> Сохранить для Интернета и устройств
  • Выберите вкладку «Размер изображения» и введите 100 процентов для hdpi
  • Сохранить. Повторить с 75% для mdpi и 150% для xhpdi.

Введите описание изображения здесь