Создание значков приложения (представлений)

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

На этой странице представлена ​​информация о создании и использовании значков приложений, уникальная для макетов на основе представлений. Для получения более подробной информации о создании значков приложений см. раздел «Создание значков приложений» , где описан рекомендуемый нами фреймворк пользовательского интерфейса.

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

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

Значки панели действий — это графические элементы, размещенные на панели действий и представляющие отдельные элементы действий. Дополнительную информацию см. в разделах «Добавление и обработка действий» , «Панель приложения — Material Design » и «Дизайн панели действий» .

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

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

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

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

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

  1. В поле «Тип значка» выберите «Значки панели действий и вкладок» .

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

    • В поле «Клипарт» нажмите кнопку.

      В диалоговом окне «Выбор значка» выберите значок материала , а затем нажмите кнопку «ОК» .

    • В поле «Путь» укажите путь и имя файла изображения. Нажмите ... для открытия диалогового окна.

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

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

  3. При желании можно изменить название и параметры отображения:

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

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

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

    • Тема оформления — выберите HOLO_LIGHT или HOLO_DARK . Или, чтобы указать цвет в диалоговом окне «Выбор цвета» , выберите CUSTOM , а затем щелкните поле «Пользовательский цвет» .

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

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

  5. При желании можно изменить каталог ресурсов:

    • Каталог ресурсов — выберите набор исходных ресурсов, куда вы хотите добавить графический ресурс: src/main/res , src/debug/res , src/release/res или пользовательский набор исходных ресурсов. Основной набор исходных ресурсов применяется ко всем вариантам сборки, включая отладочный и релизный. Наборы исходных ресурсов для отладки и релиза переопределяют основной набор и применяются к одной версии сборки. Набор исходных ресурсов для отладки предназначен только для отладки. Чтобы определить новый набор исходных ресурсов, выберите Файл > Структура проекта > приложение > Типы сборки . Например, вы можете определить набор исходных ресурсов для бета-версии и создать версию значка, которая включает текст «BETA» в правом нижнем углу. Для получения дополнительной информации см. раздел «Настройка вариантов сборки ».

    В области «Выходные каталоги» отображаются изображения и папки, в которых они будут отображаться в окне «Файлы проекта » окна «Проект» .

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

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

Укажите источник изображения в коде.

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

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

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

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

    Следующий код на Java извлекает изображение в виде Drawable :

    Котлин 

    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 :

Котлин 

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

Java 

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

Дополнительную информацию см. в разделе «Доступ к ресурсам вашего приложения» .