Векторное рисование android studio

Использование класса VectorDrawable на Android

Введение

Хотя Android напрямую не поддерживает SVG (Scalable Vector Graphics), Lollipop представила новый класс VectorDrawable , который позволяет дизайнерам и разработчикам одинаково рисовать ассеты, используя только код.

В этой статье вы узнаете, как создать VectorDrawable с файлами XML и оживить их в ваших проектах. Это поддерживается только для устройств под управлением Android 5.0 или выше, и в настоящее время нет реализаций библиотек поддержки. Исходные файлы этого урока можно найти на GitHub.

1. Создание векторного чертежа

Основное сходство между VectorDrawable и стандартным SVG-изображением состоит в том, что оба они рисуются с использованием значения path. Хотя понимание путей SVG выходит за рамки этой статьи, официальную документацию можно найти на веб-сайте W3C. Для этого урока вам просто нужно знать, что тег пути — это то место, где происходит рисование. Давайте посмотрим на файл SVG, который отображает следующее изображение:

Для этого изображения есть пять основных частей:

• квадрат для тела процессора, состоящий из двух арок
• четыре группы из пяти строк, которые представляют провода ЦП

Следующий код рисует это изображение как SVG:

Хотя это может показаться немного сложным, вам фактически не нужно полностью понимать, как все делается для реализации VectorDrawable в вашем коде. Однако следует отметить, что для лучшей читабельности в коде я разделил каждый из пяти разделов на свой собственный уникальный блок.

Верхняя часть состоит из двух дуг, чтобы отрисовать закругленный квадрат, а последующие секции представляют собой нижние, верхние, правые и левые наборы линий соответственно. Чтобы превратить этот SVG-код в VectorDrawable , вам сначала нужно определить объект vector в XML. Следующий код берется из файла vector_drawable_cpu.xml в примере кода для этого урока.

Затем вы можете добавить данные пути. Следующий код разбивается на пять разных тегов пути, вместо одного большого.

Как вы можете видеть, каждый раздел пути просто использует атрибут pathData для рисования. Теперь вы можете включить вектор VectorDrawable XML в качестве чертежа в стандартном ImageView , и он будет масштабироваться до любого размера, необходимого вашему приложению, без необходимости использовать какой-либо Java-код.

2. Анимация векторных чертежей

Теперь, когда вы знаете, как создавать изображения, используя только код, пришло время немного повеселиться и оживить их. В следующей анимации вы заметите, что каждая из групп проводов пульсирует в направлении к CPU.

Чтобы добиться этого эффекта, вам нужно будет обернуть каждый раздел, который вы хотите оживить в тег . Обновленная версия vector_drawable_cpu.xml выглядит следующим образом:

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

Как вы можете видеть, propertyName устанавливается в translateY , что означает, что анимация будет двигаться вдоль оси Y. valueFrom и valueTo управляют начальным и конечным местоположением. Установив repeatMode в reverse и repeatCount в infinite , анимация будет циклически навеки, пока будет видна VectorDrawable . duration анимации устанавливается равной 250 , т.е. времени в миллисекундах.

Чтобы применить анимации к вашему файлу, вам нужно будет создать новый XML-файл с animated-vector , чтобы связать аниматоры с группами VectorDrawable . Следующий код используется для создания файла animated_cpu.xml.

Когда все ваши XML готовы к работе, вы можете использовать animated_cpu.xml, который можно извлечь в ImageView , чтобы отобразить его.

Чтобы начать анимацию, вам нужно будет получить экземпляр Animatable из ImageView и вызвать start .

После вызова start , провода на изображении ЦП начнут двигаться с минимум Java-кода.

3. Преобразование векторных чертежей

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

Затем вам нужно будет создать начальный чертеж для стрелки, используя путь для left_arrow. В примере кода он называется vector_drawable_left_arrow.xml.

Основное различие между анимацией процессора и преобразованием заключается в файле animator_left_right_arrow.xml.

Вы заметите, что свойства valueFrom и valueTo ссылаются на данные о пути для стрелок влево и вправо, для параметра valueType установлено значение pathType , а для свойства propertyName установлено значение pathData . Когда они установлены, аниматор будет знать, чтобы изменить один набор данных пути на другой. Когда аниматор закончен, вам необходимо связать VectorDrawable с objectAnimator , используя новый объект animated-vector .

Наконец, вам просто нужно связать анимацию с помощью ImageView и запустить анимацию в вашем Java-коде.

Заключение

Как вы видели, класс VectorDrawable довольно прост в использовании и позволяет много всего настраивать для добавления простых анимаций. Хотя класс VectorDrawable в настоящее время доступен только для устройств под управлением Android 5.0 и выше, но это не страшно, поскольку всё больше устройств поддерживает Lollipop и будущие версии Android.

Источник

Легко переходим на векторный формат картинок вместо нарезки под разные плотности экранов в Android 4.0+. Часть 1 из 2

Обычно дизайн приложения рисуется в векторном редакторе (например, Sketch), но типичным форматом картинок в приложении под Android является растровый (как правило, PNG). При разработке приложения необходимо для каждого векторного изображения заниматься утомительной работой по изготовлению набора растровых картинок для разных плотностей экранов. Количество таких комплектов может доходить до шести по числу возможных плотностей: ldpi, mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi (плотность xxxhdpi необходима только для иконки приложения). При верстке иногда приходится задать в разметке явные размеры для изображения, что может потребовать перемасштабирования растровой картинки, а это, в свою очередь, наверняка приведет к появлению артефактов. К тому же наличие нескольких комплектов картинок отрицательно сказывается на размере выходного apk.

Все решают эти проблемы по-разному: кто-то пытается подключить SVG-библиотеку к проекту, кто-то генерирует нарезку с помощью утилиты.

Как мне кажется, наиболее правильным решением является отказ от использования растровой графики в приложении в пользу векторной. При этом хотелось бы по максимуму задействовать системные возможности. В Android 5.0 появился VectorDrawable – поддержка векторного формата для картинок, которые размещаются в виде ресурсов с расширением xml в папке drawable. На такие картинки можно ссылаться обычным образом из XML-разметки.

Использование VectorDrawable было бы отличным решением, если бы не необходимость поддержки устройств с Android 4.0+, коих большинство. VectorDrawable нет в support library и неизвестно, когда он там появится (хотя начало положено). Но не стоит печалиться: есть замечательная библиотека BetterVectorDrawable с открытым исходным кодом и лицензией Apache 2.0, которая фактически переносит VectorDrawable на Android 4.0+, предоставляя тот же интерфейс, и позволяет при необходимости использовать системный VectorDrawable на Android 5.0+. Нужно отметить, что есть еще пара аналогичных библиотек, но они не стоят Вашего внимания, поскольку не дают полноценно ссылаться на vector drawable ресурсы из разметки.

К сожалению, разработчики Android не предусмотрели поддержку в VectorDrawable градиентов, текстур, масок. Это небольшая проблема, но об этом следует помнить при составлении дизайна приложения. Если от этих элементов невозможно отказаться, то можно как прежде использовать в отдельных местах растровую графику / shape drawable, преимущественно перейдя на вектор.

Итак, чтобы перейти на векторный формат картинок в приложении надо:

1. Подключить к приложению библиотеку BetterVectorDrawable
2. Выгрузить из векторного редактора изображения в SVG-формате
3. С помощью конвертера сконвертировать их все сразу в XML-формат vector drawable
4. Положить полученные файлы в директорию приложения res/drawable
5. Использовать векторные изображения в разметке и в коде как обычные ресурсы
6. Profit

Библиотека BetterVectorDrawable

Подключаем библиотеку

Чтобы подключить библиотеку к приложению достаточно добавить одну строчку в секции dependencies файла build.gradle, расположенном в директории модуля приложения:

Библиотека распространяется через репозиторий JCenter, который используется по умолчанию в новых проектах Android Studio.

Если Вы создавали проект давно, то, возможно, у Вас используется репозиторий Maven Central. Чтобы это проверить, надо в файлах build.gradle поискать вхождения строки

и добавь рядом с ней

Включаем перехват ресурсов

Библиотеке необходимо передать список идентификаторов векторных ресурсов, чтобы она понимала, какие из них являются vector drawable. BetterVectorDrawable будет перехватывать обращения к ним и создавать экземпляры VectorDrawable .
Поскольку передать список нужно один раз, лучше всего это сделать в методе onCreate() класса Application , для чего придется создать его наследника:

И указать этого наследника в манифесте приложения:

Существует три способа передать список: удобный, быстрый и ручной.

Удобный способ

Метод findAllVectorResourceIdsSlow сканирует все drawable XML-ресурсы и убеждается, что каждый возвращаемый ресурс является vector drawable. Разработчики советуют использовать этот метод по умолчанию, тем не менее, это наименее производительный способ, т.е. на старых устройствах время запуска приложения может существенно возрасти.

На Google Nexus 5 в приложении с 400 векторными ресурсами findAllVectorResourceIdsSlow отрабатывает менее чем за 150 мс.

Быстрый способ

Метод findVectorResourceIdsByConvention подразумевает, что названия всех векторных ресурсов начинаются на vector_ или заканчиваются на _vector. Соглашение по именованию нужно указать с помощью параметра resourceNamingConvention .

На Google Nexus 5 в приложении с 400 векторными ресурсами findVectorResourceIdsByConvention отрабатывает менее чем за 20 мс.

Ручной способ

Просто передается список всех идентификаторов векторных картинок. 0 мс.

Используем vector drawable

Или из разметки:

Как видите, все просто.

Если у Вас возникли вопросы, то можно задать их мне либо посмотреть демо-приложение. О проблемах с библиотекой лучше сообщать разработчикам в GitHub.

В следующей части мы обсудим конвертацию изображений из SVG в vector drawable XML.

Источник

OutOfMemory и использование векторных изображений в Android Studio

1. Используйте векторные изображения вместо растровых

Конечно, большие изображения с множеством мелких деталей не стоит переводить в вектор — это займёт столько же места, как и растр, если не больше. Однако мелкие изображения, вроде иконок и остальных деталей пользовательского интерфейса следует конвертировать в вектор в целях экономии памяти. Да и работать с векторными изображениями зачастую гораздо удобнее. А теперь, самое главное — как это сделать?

1. Открываем Android Studio.
2. Кликаем правой кнопкой мыши по папке drawable или её содержимому > New > Vector Asset

Указываем путь к своему svg-файлу. Если ваше изображение имеет неправильную форму, то советую поставить галочку рядом с параметром Override — в противном случае картинка будет подогнана под стандартные размеры, что может исказить её пропорции.

Next > Finish

Готово!

Для конвертации из растра в вектор могу посоветовать отличное бесплатное приложение Inkscape. Немного о работе с ним:

1. Открываем Inkscape.
2. Перетаскиваем в него любой растр. В открывшемся окне выбираем параметры импорта и жмём ОК.
3. В верхнем тулбаре, предварительно выбрав наше изображение, выбираем Контур > Векторизировать растр (Shift + Alt + B).
4. Теперь самое главное. В новом окне ставим галочку рядом с «Убрать фон» и выбираем следующее: будет ли наше изображение цветным, и сколько нужно сделать сканирований. Нельзя забывать, что от этих двух параметров напрямую зависит размер нашего векторного файла.

Больше сканирований — больше цветов, оттенков и деталей. Моему лепрекону, чтобы приобрести божеский вид, по причине большего количество цветов в изображении понадобилось 30 сканирований. Это довольно много, лучше делать не больше десяти и выбирать картинки попроще.

Закрываем окно, нажимаем на растр и удаляем его клавишей Delete, переходим в Файл > Свойства документа (Shift + Ctrl + D), подгоняем размер страницы под содержимое.

Теперь проведём небольшой тест, доказывающий преимущество вектора в экономии памяти.
Я создал новый проект с одним-единственным ImageView, к которому применил анимацию, перемещающую его из точки А в точку Б, поочерёдно изменив изображения на растровое и векторное. Смотрим данные.

Разница почти что в два раза. Думаю, это достаточно убедительно.

2. Увеличьте размер «кучи»

Для этого перейдите в манифест вашего проекта (app > manifests > AndroidManifest.xml) и в колонке application добавьте строку:

По сути, увеличение «кучи» — это не решение проблемы OutOfMemory, а её задвигание на дальнюю полку. Вместо того, чтобы оптимизировать использование приложением памяти устройства, мы даём ему больше места. Не стоит забывать и то, что у каждого устройства свой объём памяти, как основной, так и дополнительной, выделяемой под приложение.

3. Избегайте утечек памяти

Любое приложение в своей работе использует множество объектов, которые, естественно, занимают определённое место в памяти. В идеале, сборщик мусора должен удалять из неё неиспользуемые объекты, но иногда появляются так называемые «утечки памяти», которые вызывают серьёзные проблемы в работе приложения. Существуют различные причины утечек памяти, о которых подробно рассказано тут.

От себя хотел бы посоветовать библиотеку WeakHandler, разработанной компанией Badoo, и призванной устранить утечки памяти, связанные с неправильным использованием android.os.Handler. Для использования данной библиотеки добавьте в свой gradle-файл (Gradle Scripts > build.gradle (Module:app)) в колонку dependencies строку:

И не забудьте импортировать сам WeakHandler, если студия не сделала это автоматически.

4. Избегайте больших покадровых анимаций

Покадровая анимация в Android Studio — штука удобная, но далеко не самая экономичная. При использовании в ней большого количества изображений, вы непременно получите OutOfMemory.

Но, если уж вам это очень понадобилось, лучше используйте gif-изображение вместе с библиотекой Android Gif Drawable. Эта библиотека упрощает работу c gif, а также потребляет гораздо меньше памяти, чем покадровые анимации Android Studio. Для использования данной библиотеки добавьте в свой gradle-файл (Gradle Scripts > build.gradle (Module:app)) в колонку dependencies строку:

и в свой второй gradle-файл (Gradle Scripts > build.gradle(Module:«название вашего приложения»)) в колонки buildscript и allproject строку:

Для отключения gif вместо start() пишем stop(). Также не забывайте сжать gif-ки, это сэкономит ещё больше места.

Надеюсь, что моя статья была вам полезна. Спасибо.

Источник