Хотя ваше приложение может содержать только текст и цвет, вы можете добавить больше визуальных элементов, таких как логотип или иллюстрация. В Android есть особые рекомендации по добавлению графики в ваше приложение, а также различные библиотеки для создания графических эффектов или добавления движения.
Ресурс Android называется drawable — это тип ресурса, который отображается на экране. Сюда входят, помимо прочего, растровые изображения, фигуры и векторы.
При создании изображений и графики имейте в виду следующее:
- Избегайте включения неизменяемого текста в ресурсы.
- По возможности сначала используйте векторные форматы.
- Предоставьте ресурсы для сегментов разрешения.
- Обеспечьте достаточную границу между фоновыми изображениями и текстом.
- Хотя Android может создавать различные эффекты изображения, такие как градиенты, раскрашивание и размытие, некоторые из них требуют более высоких затрат производительности.
- Анимированные векторные объекты Drawables предоставляют масштабируемый формат для небольших анимаций пользовательского интерфейса.
Как экспортировать ресурсы для Android
- Форматируйте имена активов в нижнем регистре.
- Установите упрощенные ресурсы для экспорта в формате SVG.
- Настройте сложные изображения, например фотографии, для экспорта в форматы WebP, PNG, JPG.
- Установите правильное масштабирование разрешения, как показано в следующей таблице.
| Размер экрана | Шкала |
|---|---|
мдпи | х1 |
hdpi | х1,5 |
xhdpi | х2 |
xxhdpi | х3 |
xxxhdpi | х4 |
При желании вы можете конвертировать SVG в векторные рисунки (VD) с помощью Android Studio. Организуйте ресурсы в каталоги, соответствующие разрешению для передачи, как показано на следующем изображении. Например, укажите размер экрана в именах папок.
Типы активов
Android поддерживает следующие типы ресурсов.
Вектор
Векторная графика представляет собой формат без потерь, что означает, что она не теряет визуальную информацию при масштабировании. Векторы состоят из математических точек, которые заполняются для создания изображения.
Векторные форматы
Android поддерживает следующие форматы векторных изображений: SVG и векторные изображения.
Векторные объекты Drawable похожи на 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 включает в себя различные встроенные графические эффекты. Вот некоторые общие эффекты:
Градиенты
В режиме «Создание» используйте кисть , чтобы нарисовать что-нибудь на экране. Различные кисти можно использовать для рисования фигур разных цветов или градиентов. Используйте встроенные градиентные кисти для достижения различных эффектов градиента. Эти кисти позволяют вам указать список цветов, из которых вы хотите создать градиент.
Градиентные кисти способны создавать более сложные градиенты, добавляя цветовые остановки и мозаику, если вы предоставляете список цветов и проценты, в которых происходит остановка. Используйте контейнеры или фигуры для обрезки градиентов, сплошных цветных заливок или изображений.
Размытие
Примените эффекты размытия к изображениям, используя метод Modifier.blur() и указав коэффициенты размытия. Используйте размытие с осторожностью, поскольку оно может повлиять на производительность и доступно только на устройствах под управлением Android 12 и более поздних версий. Дополнительные сведения см. в разделе Размытие компонуемого изображения .
Режимы наложения
Android способен изменять изображения с помощью аналогичных логических операций и режимов наложения, которые можно найти в программах для проектирования, таких как объединение или умножение. Для получения дополнительной информации см. BlendMode .
оттенок
Используйте режимы наложения и заливки, чтобы оттенить ресурсы. Это позволяет вам иметь один актив и применять к нему разные цвета, что может уменьшить количество создаваемых ресурсов.
Движение
Графику можно анимировать программно для создания анимированной графики вместо загрузки файлов анимации. Это может обеспечить большую гибкость и меньшие ресурсы активов.
Animated Vector Drawables позволяет создавать небольшие анимации пользовательского интерфейса. В противном случае узнайте больше об анимации с помощью ключевых кадров в Compose . Подробнее об эффектах изображения читайте в разделе «Настройка изображения» .