vector drawable api. Возможности применения

Vector Drawable APIвозможности применения

Олег Осипенко [email protected]

[email protected]

mailto:[email protected]

mailto:[email protected]

Vector Drawable API возможности применения

Компьютерная графика• Bitmap • Векторные изображения



Масштабирование

16х

16х



• прямая зависимость размера файла от размера изображения


Flat & Material Design• Windows Metro interface • iOS 7 • Material Design в Lollipop


Flat & Material Design• отказ от скевоморфизма • четкие контуры,

плоские заливки • упор на типографику


Flat & Material Design• Bauhaus, швейцарская школа типографики


Иконография Material Design


Класс VectorDrawableструктура

<vector android:width="290dp" android:height="48dp" android:viewportWidth="290" android:viewportHeight="48" >

</vector>


Класс VectorDrawableviewport

android:width="272dp" android:height="290dp" android:viewportWidth="272" android:viewportHeight="290"



• отсутствует возможность указать PivotPoint

• TopLeft by default


Класс VectorDrawableструктура

<vector android:name android:tint android:tintMode android:autoMirrored android:alpha> <vector/>


Элемент Path<path android:pathData="M141.4,188.2H51V329c0,15.4,16.4,15.5,16.4,

15.5l20.8,0v19.7h0c0,0.3,0,0.5,0,0.8c0,11,8.9,19.9,19.9,19.9c11, 0,19.9-8.9,19.9-19.9c0-0.3,0-0.5,0-0.8h0v-19.7l13.4,0l13.4,0v19.7h0c0, 0.3,0,0.5,0,0.8c0,11,8.9,19.9,19.9,19.9c11,0,19.9-8.9,19.9-19.9c0-0.3, 0-0.5,0-0.8h0v-19.7l20.8,0c0,0,16.4,0,16.4-15.5V188.2H141.4z"


Элемент PathPath в Android и Path в SVG


Элемент Path<path android:pathData android:fillColor, android:fillAlpha android:strokeColor, android:strokeWidth, android:strokeAlpha android:trimPathStart, android:trimPathEnd, android:trimPathOffset android:strokeLineCap, android:strokeLineJoin, android:strokeMiterLimit />


Класс VectorDrawableНесколько объектов Path можно объединить в группу

<group android:name android:rotation android:pivotX, pivotY android:scaleX, scaleY android:translateX, translateY> <group/>


Класс AnimatedVectorDrawable<animated-vector android:drawable="@drawable/vector_drawable">

</animated-vector>


Класс AnimatedVectorDrawable<animated-vector android:drawable="@drawable/vector_drawable">

<target android:name="head" android:animation="@anim/headAnimation" />

</animated-vector>


Класс AnimatedVectorDrawableTarget - любой атрибут Path или Group

Поддерживается несколько target в одном AnimatedVectorDrawable

<animated-vector android:drawable="@drawable/vector_drawable">

<target /> <target /> <target />

</animated-vector>


Класс AnimatedVectorDrawableнесколько target -

несколько анимаций


Animationновый valueType

<set> <objectAnimator android:duration="400" android:propertyName="pathData" android:valueType="pathType" />

</set>


Animationатрибут PathData

<set> <objectAnimator android:duration="400" android:propertyName="pathData" android:valueType="pathType" android:valueFrom="@string/pathFrom" android:valueTo="@string/pathTo" />

</set>


AnimationpathFrom и pathTo должны иметь одинаковое количество и тип команд<set> <objectAnimator android:duration="400" android:propertyName="pathData" android:valueType="pathType" android:valueFrom="@string/pathFrom" android:valueTo="@string/pathTo" />

</set>


Запуск анимации((Animatable) imageView.getBackground()).start();

• отсутствует возможность настройки хореографии • отсутствует AnimationListener • возможный вариант Handler.postDelayed(Runnable r)


Запуск анимацииinterface Animatable2

void registerAnimationCallback(AnimationCallback cb)

class AnimationCallbackvoid onAnimationStart()

void onAnimationEnd()


Обратная поддержкабиблиотека VectorCompat

https://github.com/wnafee/vector-compat

min SDK 14• загрузка VectorDrawable либо AnimatedVectorDrawable ResourcesCompat.getDrawable(context, R.drawable.any_drawable);

на устройствах с Lollipop - через native API

build.tools >= 22.0.1


Обратная поддержкадублирование атрибутов

<vector android:width="290dp" android:height="48dp" android:viewportHeight="48" app:vc_viewportHeight="48" app:vc_viewportWidth="290" android:viewportWidth="290"> </vector>


Обратная поддержкаособенности запуска

только в runtime

AnimatedVectorDrawable avd = ResourcesCompat .getDrawable(context, R.drawable.any_drawable);

imageView.setBackground(avd);

((Animatable) avd).start();


VectAlignинструмент для выравнивания двух путей для создания pathAnimation

https://github.com/bonnyfone/vectalign

BetterVectorDrawableбиблиотека поддержки, API >= 14

https://github.com/a-student/BetterVectorDrawable


Vector Asset Studio• создание XML файлов

Vector Drawable из SVG • Android Studio >= 1.4 • File > New > Vector Asset


Вопросы?


Спасибо за внимание!

vector drawable api. Возможности применения

Software