Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android

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

Russian (Pусский) translation by Anna k.Ivanova (you can also view the original English article)

Введение

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

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

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

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

Image of a CPU that will be drawn out in code

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

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

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

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

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

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

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

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

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

Example of animated VectorDrawables

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

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

Как вы можете видеть, propertyName устанавливается в translateY, что означает, что анимация будет двигаться вдоль оси Y. valueFrom и valueTo управляют начальным и конечным местоположением. Установив repeatMode в reverse и repeatCount в infinite, анимация будет циклически навеки, пока будет видна VectorDrawableduration анимации устанавливается равной 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.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.