Android
VectorDrawable и AnimatedVectorDrawable

Basic VectorDrawable

VectorDrawable должен состоять как минимум из одного <path> определяющего форму

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
    <path
        android:fillColor="#FF000000"
        android:pathData="M0,24 l12,-24 l12,24 z"/>
</vector>

Это создаст черный треугольник:

С помощью

A <clip-path> определяет форму, которая действует как окно, позволяя только частям <path> показать, находятся ли они в форме <clip-path> и отключить остальные.

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
    <clip-path
        android:name="square clip path"
        android:pathData="M6,6 h12 v12 h-12 z"/>
    <path
        android:name="triangle"
        android:fillColor="#FF000000"
        android:pathData="M0,24 l12,-24 l12,24 z"/>

</vector>

В этом случае <path> создает черный треугольник, но <clip-path> определяет меньшую квадратную форму, позволяя показывать только часть треугольника:

теги

Тег <group> позволяет масштабировать, вращать и позицию одного или нескольких элементов VectorDrawable для настройки:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
    <path
        android:pathData="M0,0 h4 v4 h-4 z"
        android:fillColor="#FF000000"/>

    <group
        android:name="middle square group"
        android:translateX="10"
        android:translateY="10"
        android:rotation="45">
        <path
            android:pathData="M0,0 h4 v4 h-4 z"
            android:fillColor="#FF000000"/>
    </group>

    <group
        android:name="last square group"
        android:translateX="18"
        android:translateY="18"
        android:scaleX="1.5">
        <path
            android:pathData="M0,0 h4 v4 h-4 z"
            android:fillColor="#FF000000"/>
    </group>
</vector>

В приведенном выше примере кода содержится три одинаковых <path> , описывающих черные квадраты. Первый квадрат не отрегулирован. Второй квадрат обернут тегом <group> который перемещает его и поворачивает на 45 °. Третий квадрат завернут в <group> который перемещает его и растягивает его горизонтально на 50%. Результат следующий:

Тег <group> может содержать несколько тегов <path> и <clip-path> . Он может даже содержать другую <group> .

Основной анимированный вектор

Для AnimatedVectorDrawable требуется как минимум 3 компонента:

• VectorDrawable который будет управляться
• objectAnimator который определяет, какое свойство изменить и как
• Сам AnimatedVectorDrawable , который соединяет objectAnimator с VectorDrawable для создания анимации

Следующее создает треугольник, который переводит свой цвет с черного на красный.

VectorDrawable , filename: triangle_vector_drawable.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">

    <path
        android:name="triangle"
        android:fillColor="@android:color/black"
        android:pathData="M0,24 l12,-24 l12,24 z"/>

</vector>

objectAnimator , filename: color_change_animator.xml

<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:propertyName="fillColor"
    android:duration="2000"
    android:repeatCount="infinite"
    android:valueFrom="@android:color/black"
    android:valueTo="@android:color/holo_red_light"/>

AnimatedVectorDrawable , filename: triangle_animated_vector.xml

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/triangle_vector_drawable">

    <target
        android:animation="@animator/color_change_animator"
        android:name="triangle"/>

</animated-vector>

Обратите внимание, что <target> указывает android:name="triangle" который соответствует <path> в VectorDrawable . VectorDrawable может содержать несколько элементов, а свойство android:name используется для определения того, какой элемент был нацелен.

Результат:

Использование штрихов

Использование SVG-штриха облегчает создание векторного рисунка с унифицированной длиной хода в соответствии с принципами Material Design :

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

Так, например, так вы можете создать знак «плюс», используя штрихи:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportHeight="24.0"
android:viewportWidth="24.0">
    <path
        android:fillColor="#FF000000"
        android:strokeColor="#F000"
        android:strokeWidth="2"
        android:pathData="M12,0 V24 M0,12 H24" />
</vector>

• strokeColor определяет цвет штриха.

• strokeWidth определяет ширину (в dp) штриха (2dp в этом случае, как указано в рекомендациях).

• pathData где мы описываем наше изображение SVG:

• M12,0 перемещает «курсор» в положение 12,0

• V24 создает вертикальную линию в положение 12, 24

и т. д., см. документацию по SVG и этот полезный учебник «SVG Path» из w3schools, чтобы узнать больше о конкретных командах пути.

В результате мы получили это без излишеств плюс знак:

Это особенно полезно для создания AnimatedVectorDrawable , так как теперь вы работаете с одним ударом с единой длиной, а не иначе сложным путем.

Векторная совместимость через AppCompat

Несколько предварительных build.gradle в build.gradle для векторов для работы вплоть до API 7 для VectorDrawables и API 13 для AnimatedVectorDrawables (с некоторыми предостережениями в настоящее время):

//Build Tools has to be 24+
buildToolsVersion '24.0.0'

defaultConfig {
    vectorDrawables.useSupportLibrary = true
    generatedDensities = []
    aaptOptions {
        additionalParameters "--no-version-vectors"
    }
}

dependencies {
    compile 'com.android.support:appcompat-v7:24.1.1'
}

В вашем layout.xml :

<ImageView
    android:id="@+id/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    appCompat:src="@drawable/vector_drawable"
    android:contentDescription="@null" />