Хотя ваше приложение может содержать только текст и цвет, вы можете захотеть добавить больше визуальных элементов, таких как логотип или иллюстрации. В Android есть определённые рекомендации по добавлению графики в приложение, а также различные библиотеки для создания графических эффектов или анимации.
Ресурс Android называется drawable (рисунок) — это тип ресурса, отображаемого на экране. К нему относятся, помимо прочего, растровые изображения, фигуры и векторы.
При создании изображений и графики помните следующее:
- Избегайте включения неизменяемого текста в активы.
- По возможности сначала используйте векторные форматы.
- Предоставьте ресурсы для контейнеров разрешений.
- Обеспечьте достаточный зазор между фоновыми изображениями и текстом.
- Хотя Android способен создавать различные эффекты изображений, такие как градиенты, раскрашивание и размытие, некоторые из них требуют больших затрат производительности.
- Анимированные векторные рисунки предоставляют масштабируемый формат для небольших анимаций пользовательского интерфейса.
Как экспортировать ресурсы для Android
- Форматируйте названия активов строчными буквами.
- Настройте упрощенные ресурсы для экспорта в формате SVG.
- Настройте экспорт сложных изображений, например фотографий, в форматах WebP, PNG, JPG.
- Установите правильное масштабирование разрешения, как показано в следующей таблице.
| Размер экрана | Шкала |
|---|---|
mdpi | х1 |
hdpi | х1,5 |
xhdpi | х2 |
xxhdpi | х3 |
xxxhdpi | х4 |
При желании вы можете преобразовать SVG-файлы в векторные изображения (VD) с помощью Android Studio. Распределите ресурсы по каталогам в соответствии с разрешением для передачи, как показано на следующем изображении. Например, укажите размер экрана в названиях папок.
Типы активов
Android поддерживает следующие типы активов.
Вектор
Векторная графика — это формат без потерь, то есть не теряет визуальную информацию при масштабировании. Векторы состоят из математических точек, которые заполняются для создания изображения.
Векторные форматы
Android поддерживает следующие форматы векторных изображений: SVG и Vector Drawables.
Векторные изображения похожи на SVG, но основаны на XML. Они также поддерживают различные атрибуты, например, градиенты. Подробнее о поддерживаемых функциях см. в разделе VectorDrawable . SVG-изображения можно преобразовать в векторные изображения с помощью Vector Asset Studio .
Варианты использования
Из-за их небольшого размера лучше всего создавать иконки в векторном формате. Для придания значку движения можно использовать анимированный векторный рисунок .
- Иллюстрации — это графические изображения, которые помогают направлять пользователей, объяснять концепции или выражать идеи. Они обычно отражают фирменный стиль.
- Иллюстрации героев занимают особое место среди остального контента, они задают общий облик и настроение, а также поясняют основную информацию.
- Иллюстрации меньше по размеру, обычно встроены в текст и поддерживают окружающий контент.
Растр
Графика с потерями, то есть графика, которая теряет детали при сжатии или масштабировании, состоит из пикселей, составляющих изображение. Растровая графика обычно используется для детальных изображений, таких как фотографии или сложные градиенты. Поскольку при масштабировании теряется детализация, экспортируйте эти изображения в разных разрешениях.
Растровые форматы
Android поддерживает следующие форматы растровых изображений: PNG, GIF, JPG, WebP.
Варианты использования
Примеры использования включают изображения с различными текстурами, что приводит к широкой цветовой палитре и градациям, или изображения с чрезмерно сложным набором точек Безье. Примеры использования также могут включать высокодетализированные фотоматериалы, такие как фотографии продуктов, информация о местоположении и многое другое.
Размеры
При создании активов учитывайте следующие соображения.
Разрешающие сегменты
Ваше приложение должно предоставлять растровую графику на основе диапазонов плотности экрана или сегментов. Операционная система автоматически отображает нужную графику на соответствующем устройстве, используя эти сегменты. Обеспечьте отображение высококачественной графики на каждом устройстве, предоставив ресурсы для каждого сегмента.
Прокладка
Значки и аналогичные небольшие активы должны включать внутренние (встроенные) отступы, чтобы предоставить активу достаточно места для сенсорного ввода и обеспечить единообразие размеров.
Имена файлов
Ресурсы Android пишутся строчными буквами и не содержат суффикса разрешения.
Соблюдайте единообразие правил именования и структуры, чтобы ваши файлы и проекты были организованы. Например, присваивая значкам префикс «ic_…», вы сможете упорядочить все значки в проекте и быстро их идентифицировать в процессе разработки.
Другие ресурсы приложения
Значки приложений
Значки запуска находятся на главном экране. Монохромные значки можно найти в системном интерфейсе, включая уведомления, строку состояния и виджеты.
Форматируйте значки приложений в векторные файлы для адаптивных значков и в PNG для устаревших значков. Чтобы узнать больше о создании и предварительном просмотре значка приложения, ознакомьтесь с разделом «Дизайн и предварительный просмотр значков приложений» .
Заставки
Начиная с Android 12, при открытии вашего приложения может отображаться анимированный экран-заставка со значком приложения.
Размещение
Обратите внимание на масштабирование и расположение изображений на экране. Для настройки масштаба изображения доступны параметры Fit, Crop, FillHeight, FillWidth, FillBounds, Inside и None .
Вы также можете обрезать изображения по форме, чтобы создать дополнительные эффекты.
Адаптивная обрезка
Для адаптивного отображения изображений определите, как изображение будет обрезаться в разных диапазонах контрольных точек. В разных диапазонах контрольных точек обрезка может:
- Поддерживайте одно фиксированное соотношение.
- Адаптируйтесь к разным соотношениям.
- Поддерживайте фиксированную высоту изображения.
Поддерживайте одно соотношение
Размер изображения может иметь одно фиксированное соотношение во всех диапазонах контрольных точек.
Адаптироваться к разным соотношениям
Соотношение сторон изображения может меняться в зависимости от диапазона контрольных точек. Например, на рисунке 9 соотношение сторон изображения меняется от 1:1 до 16:9 между контрольными точками.
Фиксированная высота изображения
Размер изображения может поддерживать фиксированную высоту и гибкую ширину как в пределах контрольных точек, так и в пределах их диапазона. Изображение сохраняет фиксированную высоту, в то время как ширина между контрольными точками — гибкая.
Эффекты
В Android есть множество встроенных эффектов для изображений. Вот некоторые из наиболее распространённых:
Градиенты
В Compose используйте кисть , чтобы нарисовать что-либо на экране. Различные кисти можно использовать для рисования фигур разных цветов или градиентов. Используйте встроенные градиентные кисти для создания различных эффектов. Эти кисти позволяют указать список цветов, из которых вы хотите создать градиент.
Градиентные кисти позволяют создавать более сложные градиенты, добавляя контрольные точки и мозаичное наложение, при условии указания списка цветов и процентных значений, где находится точка. Используйте контейнеры или фигуры для обрезки градиентов, заливок сплошным цветом или изображений.
Размытие
Применяйте эффекты размытия к изображениям, используя метод Modifier.blur() и задавая коэффициенты размытия. Используйте размытие с осторожностью, поскольку оно может повлиять на производительность и доступно только на устройствах под управлением Android 12 и более поздних версий. Подробнее см. в разделе Размытие изображения, компонуемого с помощью .
Режимы наложения
Android может изменять изображения с помощью аналогичных булевых операций и режимов смешивания, которые вы можете найти в программах для дизайна, например, «объединение» или «умножение». Подробнее см. в разделе «BlendMode» .
Оттенок
Используйте режимы наложения и заливки для тонирования ресурсов. Это позволяет использовать один ресурс и применять к нему разные цвета, что может сократить количество создаваемых ресурсов.
Движение
Графические объекты можно анимировать программно, создавая динамическую графику, вместо загрузки файлов с анимацией. Это обеспечивает большую гибкость и экономит ресурсы.
Анимированные векторные объекты позволяют создавать небольшие анимации пользовательского интерфейса. В противном случае узнайте больше об анимации с помощью ключевых кадров в Compose . Подробнее об эффектах изображений читайте в разделе «Настройка изображения» .