Rambler.Android #3: Vector Drawable API. Возможности применения (Осипенко Олег)

1. Vector Drawable API
возможности применения
Олег Осипенко
oleg.s.osipenko@gmail.com
o.osipenko@rambler-co.ru

2. Vector Drawable API
возможности применения
Компьютерная графика
• Bitmap
• Векторные изображения

3. Vector Drawable API
возможности применения
Компьютерная графика
• Bitmap
• Векторные изображения
Масштабирование
16х
16х

4. Vector Drawable API
возможности применения
Компьютерная графика
• Bitmap
• Векторные изображения
• прямая зависимость размера файла от размера
изображения

5. Vector Drawable API
возможности применения
Flat & Material Design
• Windows Metro interface
• iOS 7
• Material Design в Lollipop

6. Vector Drawable API
возможности применения
Flat & Material Design
• отказ от скевоморфизма
• четкие контуры,
плоские заливки
• упор на типографику

7. Vector Drawable API
возможности применения
Flat & Material Design
• Bauhaus, швейцарская школа типографики

8. Vector Drawable API
возможности применения
Иконография Material Design

9. Vector Drawable API
возможности применения
Класс VectorDrawable
структура
<vector
android:width="290dp"
android:height="48dp"
android:viewportWidth="290"
android:viewportHeight="48" >
</vector>

10. Vector Drawable API
возможности применения
Класс VectorDrawable
структура
<vector
android:width="290dp"
android:height="48dp"
android:viewportWidth="290"
android:viewportHeight="48" >
</vector>

11. Vector Drawable API
возможности применения
Класс VectorDrawable
viewport
android:width="272dp"
android:height="290dp"
android:viewportWidth="272"
android:viewportHeight="290"

12. Vector Drawable API
возможности применения
Класс VectorDrawable
viewport
android:width="272dp"
android:height="290dp"
android:viewportWidth="600"
android:viewportHeight="600"

13. Vector Drawable API
возможности применения
Класс VectorDrawable
viewport
android:width="272dp"
android:height="290dp"
android:viewportWidth="100"
android:viewportHeight="100"

14. Vector Drawable API
возможности применения
Класс VectorDrawable
viewport
• отсутствует возможность
указать PivotPoint
• TopLeft by default

15. Vector Drawable API
возможности применения
Класс VectorDrawable
структура
<vector
android:name
android:tint
android:tintMode
android:autoMirrored
android:alpha>
<vector/>

16. Vector Drawable API
возможности применения
Элемент 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"

17. Vector Drawable API
возможности применения
Элемент Path
Path в Android и Path в SVG

18. Vector Drawable API
возможности применения
Элемент 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
/>

19. Vector Drawable API
возможности применения
Класс VectorDrawable
Несколько объектов Path можно объединить в группу
<group
android:name
android:rotation
android:pivotX, pivotY
android:scaleX, scaleY
android:translateX, translateY>
<group/>

20. Vector Drawable API
возможности применения
Класс AnimatedVectorDrawable
<animated-vector
android:drawable="@drawable/vector_drawable">
</animated-vector>

21. Vector Drawable API
возможности применения
Класс AnimatedVectorDrawable
<animated-vector
android:drawable="@drawable/vector_drawable">
<target
android:name="head"
android:animation="@anim/headAnimation" />
</animated-vector>

22. Vector Drawable API
возможности применения
Класс AnimatedVectorDrawable
<animated-vector
android:drawable="@drawable/vector_drawable">
<target
android:name="head"
android:animation="@anim/headAnimation" />
</animated-vector>

23. Vector Drawable API
возможности применения
Класс AnimatedVectorDrawable
Target - любой атрибут Path или Group
Поддерживается несколько target в одном AnimatedVectorDrawable
<animated-vector
android:drawable="@drawable/vector_drawable">
<target />
<target />
<target />
</animated-vector>

24. Vector Drawable API
возможности применения
Класс AnimatedVectorDrawable
несколько target -
несколько анимаций

25. Vector Drawable API
возможности применения
Animation
новый valueType
<set>
<objectAnimator
android:duration="400"
android:propertyName="pathData"
android:valueType="pathType"
/>
</set>

26. Vector Drawable API
возможности применения
Animation
атрибут PathData
<set>
<objectAnimator
android:duration="400"
android:propertyName="pathData"
android:valueType="pathType"
android:valueFrom="@string/pathFrom"
android:valueTo="@string/pathTo"
/>
</set>

27. Vector Drawable API
возможности применения
Animation
pathFrom и pathTo должны иметь одинаковое количество
и тип команд
<set>
<objectAnimator
android:duration="400"
android:propertyName="pathData"
android:valueType="pathType"
android:valueFrom="@string/pathFrom"
android:valueTo="@string/pathTo"
/>
</set>

28. Vector Drawable API
возможности применения
Запуск анимации
((Animatable) imageView.getBackground()).start();
• отсутствует возможность настройки хореографии
• отсутствует AnimationListener
• возможный вариант Handler.postDelayed(Runnable r)

29. Vector Drawable API
возможности применения
Запуск анимации
interface Animatable2
void registerAnimationCallback(AnimationCallback cb)
class AnimationCallback
void onAnimationStart()
void onAnimationEnd()

30. Vector Drawable API
возможности применения
Обратная поддержка
библиотека 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

31. Vector Drawable API
возможности применения
Обратная поддержка
дублирование атрибутов
<vector
android:width="290dp"
android:height="48dp"
android:viewportHeight="48"
app:vc_viewportHeight="48"
app:vc_viewportWidth="290"
android:viewportWidth="290">
</vector>

32. Vector Drawable API
возможности применения
Обратная поддержка
дублирование атрибутов
<path
android:name="btn_signin"
android:fillColor="@color/btn_signin"
app:vc_fillColor="@color/btn_signin"
android:pathData="@string/btn_signin_from"
app:vc_pathData="@string/btn_signin_from"
/>

33. Vector Drawable API
возможности применения
Обратная поддержка
дублирование атрибутов
<objectAnimator
android:valueType="pathType"
app:vc_valueType="pathType" />

34. Vector Drawable API
возможности применения
Обратная поддержка
особенности запуска
только в runtime
AnimatedVectorDrawable avd = ResourcesCompat
.getDrawable(context, R.drawable.any_drawable);
imageView.setBackground(avd);
((Animatable) avd).start();

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

36. Vector Drawable API
возможности применения
VectAlign
инструмент для выравнивания
двух путей для создания pathAnimation
https://github.com/bonnyfone/vectalign
BetterVectorDrawable
библиотека поддержки, API >= 14
https://github.com/a-student/BetterVectorDrawable

37. Vector Drawable API
возможности применения
Vector Asset Studio
• создание XML файлов
Vector Drawable из SVG
• Android Studio >= 1.4
• File > New > Vector Asset

38. Vector Drawable API
возможности применения
Вопросы?

39. Vector Drawable API
возможности применения
Спасибо за внимание!