Как создать значки приложений (Views)

Реализация Jetpack Compose

На этой странице содержится информация о создании и использовании значков приложений, уникальных для макетов на основе представлений. Подробную информацию о создании значков приложений можно найти в статье Как создавать значки приложений. В ней также рассказывается о рекомендуемом фреймворке пользовательского интерфейса.

Как создать значок для панели действий или вкладки

Используйте Image Asset Studio, чтобы создать значки панели действий и вкладок для макетов на основе View.

Значки на панели действий – это графические элементы, которые представляют отдельные задачи. Дополнительную информацию можно найти в статьях Adding and Handling Actions (Добавление действий и управление ими), App Bar - Material Design (Панель приложения – Material Design){:.external} и Action Bar Design (Дизайн панели действий).

Значки вкладок – это графические элементы, которые используются для представления отдельных вкладок в интерфейсе с несколькими вкладками. У каждого значка вкладки есть два состояния: выбранное и невыбранное. Дополнительную информацию можно найти в статьях Создание представлений с вкладками и возможностью пролистывания и Вкладки – Material Design.

Image Asset Studio помещает значки в нужные места в каталогах res/drawable-<density>/.

Мы рекомендуем использовать стиль Material Design для значков панели действий и вкладок, даже если вы поддерживаете более старые версии Android. Используйте appcompat и другие библиотеки поддержки, чтобы реализовать интерфейс Material Design в более ранних версиях платформы.

Вместо Image Asset Studio вы можете использовать Vector Asset Studio, чтобы создавать значки для панели действий и вкладок. Объекты VectorDrawable подходят для простых значков и могут уменьшить размер приложения.

Откройте Image Asset Studio и добавьте значок панели действий или вкладки, выполнив следующие действия:

  1. В поле Icon Type (Тип значка) выберите Action Bar and Tab Icons (Значки панели действий и вкладок).

  2. Выберите Тип объекта, а затем укажите объект в поле ниже.

    • Нажмите кнопку в поле Клип-арт.

      В диалоговом окне Select Icon (Выбрать значок) выберите значок Material и нажмите OK.

    • В поле Путь укажите путь к изображению и его название. Нажмите …, чтобы открыть диалоговое окно.

    • В поле Текст введите строку текста и выберите шрифт.

    Значок появится в области Исходный объект справа и в области предварительного просмотра внизу.

  3. При необходимости измените название и параметры отображения:

    • Название. Если вы не хотите использовать название по умолчанию, введите новое. Если в проекте уже есть ресурс с таким названием, о чем будет свидетельствовать ошибка в нижней части мастера, он будет перезаписан. Название может содержать только строчные буквы, символы подчеркивания и цифры.

    • Обрезать. Чтобы настроить поля между графическим объектом и границей в исходном объекте, выберите Да. При этом прозрачные области будут удалены, а соотношение сторон сохранится. Если вы не хотите менять исходный объект, выберите Нет.

    • Поля. Если вы хотите изменить поля исходного объекта со всех четырех сторон, переместите ползунок. Выберите значение от -10% до 50%. Если вы также выберете Обрезать, то сначала будет выполнена обрезка.

    • Тема. Выберите HOLO_LIGHT или HOLO_DARK. Чтобы указать цвет в диалоговом окне Выбор цвета, выберите ПОЛЬЗОВАТЕЛЬСКИЙ, а затем нажмите на поле Пользовательский цвет.

    Image Asset Studio создает значок в прозрачном квадрате, поэтому по краям есть отступы. Поля обеспечивают достаточно места для стандартного эффекта тени.

  4. Нажмите Далее.

  5. При необходимости измените каталог ресурсов:

    • Res Directory (Каталог ресурсов). Выберите набор исходных файлов, в который нужно добавить объект изображения: src/main/res, src/debug/res, src/release/res или набор исходных файлов, определенный пользователем. Основной набор исходных файлов применяется ко всем вариантам сборки, включая отладочную и рабочую. Наборы исходных файлов для отладки и выпуска переопределяют основной набор и применяются к одной версии сборки. Набор исходных файлов для отладки предназначен только для отладки. Чтобы определить новый набор исходных файлов, выберите File (Файл) > Project Structure (Структура проекта) > app (приложение) > Build Types (Типы сборки). Например, вы можете определить набор исходных файлов для бета-версии и создать версию значка с текстом "BETA" в правом нижнем углу. Подробнее о настройке вариантов сборки…

    В области Output Directories (Выходные каталоги) показаны изображения и папки, в которых они появятся в режиме просмотра файлов проекта в окне Project (Проект).

  6. Нажмите Готово.

    Image Asset Studio добавляет изображения в папки drawable для разных плотностей.

Как ссылаться на графический ресурс в коде

Обычно в коде можно ссылаться на графический ресурс в общем виде, и при запуске приложения соответствующее изображение будет отображаться автоматически в зависимости от устройства:

  • В большинстве случаев вы можете ссылаться на графические ресурсы как на @drawable в коде XML или Drawable в коде Java.

    Например, следующий XML-код макета отображает объект drawable в ImageView:

    <ImageView
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:src="@drawable/myimage" />

    В следующем коде Java изображение извлекается как Drawable:

    Kotlin

    val drawable = resources.getDrawable(R.drawable.myimage, theme)

    Java

    Resources res = getResources();
Drawable drawable = res.getDrawable(R.drawable.myimage, getTheme());

    Метод getResources() находится в классе Context, который применяется к объектам пользовательского интерфейса, таким как действия, фрагменты, макеты, представления и т. д.

  • Если в вашем приложении используется библиотека поддержки, вы можете сослаться на графический ресурс в XML-коде с помощью оператора app:srcCompat. Пример:

    <ImageView
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    app:srcCompat="@drawable/myimage" />

Доступ к графическим ресурсам можно получить только из основного потока.

После того как вы добавите графический ресурс в каталог res/ проекта, вы сможете ссылаться на него из кода Java или макета XML, используя идентификатор ресурса. В следующем коде Java для ImageView задается использование ресурса drawable/myimage.png:

Kotlin

findViewById<ImageView>(R.id.myimageview).apply {
    setImageResource(R.drawable.myimage)
}

Java

ImageView imageView = (ImageView) findViewById(R.id.myimageview);
imageView.setImageResource(R.drawable.myimage);

Подробнее о том, как получить доступ к ресурсам приложения…