android vector drawable
Post on 15-Apr-2017
569 Views
Preview:
TRANSCRIPT
Vector Drawable APIвозможности применения
Олег Осипенко oleg.s.osipenko@gmail.com
o.osipenko@rambler-co.ru
Vector Drawable API возможности применения
Компьютерная графика• Bitmap • Векторные изображения
Vector Drawable API возможности применения
Компьютерная графика• Bitmap • Векторные изображения
Масштабирование
16х
16х
Vector Drawable API возможности применения
Компьютерная графика• Bitmap • Векторные изображения
• прямая зависимость размера файла от размера изображения
Vector Drawable API возможности применения
Flat & Material Design• Windows Metro interface • iOS 7 • Material Design в Lollipop
Vector Drawable API возможности применения
Flat & Material Design• отказ от скевоморфизма • четкие контуры,
плоские заливки • упор на типографику
Vector Drawable API возможности применения
Flat & Material Design• Bauhaus, швейцарская школа типографики
Vector Drawable API возможности применения
Иконография Material Design
Vector Drawable API возможности применения
Класс VectorDrawableструктура
<vector android:width="290dp" android:height="48dp" android:viewportWidth="290" android:viewportHeight="48" >
</vector>
Vector Drawable API возможности применения
Класс VectorDrawableструктура
<vector android:width="290dp" android:height="48dp" android:viewportWidth="290" android:viewportHeight="48" >
</vector>
Vector Drawable API возможности применения
Класс VectorDrawableviewport
android:width="272dp" android:height="290dp" android:viewportWidth="272" android:viewportHeight="290"
Vector Drawable API возможности применения
Класс VectorDrawableviewport
android:width="272dp" android:height="290dp" android:viewportWidth="600" android:viewportHeight="600"
Vector Drawable API возможности применения
Класс VectorDrawableviewport
android:width="272dp" android:height="290dp" android:viewportWidth="100" android:viewportHeight="100"
Vector Drawable API возможности применения
Класс VectorDrawableviewport
• отсутствует возможность указать PivotPoint
• TopLeft by default
Vector Drawable API возможности применения
Класс VectorDrawableструктура
<vector android:name android:tint android:tintMode android:autoMirrored android:alpha> <vector/>
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"
Vector Drawable API возможности применения
Элемент PathPath в Android и Path в SVG
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 />
Vector Drawable API возможности применения
Класс VectorDrawableНесколько объектов Path можно объединить в группу
<group android:name android:rotation android:pivotX, pivotY android:scaleX, scaleY android:translateX, translateY> <group/>
Vector Drawable API возможности применения
Класс AnimatedVectorDrawable<animated-vector android:drawable="@drawable/vector_drawable">
</animated-vector>
Vector Drawable API возможности применения
Класс AnimatedVectorDrawable<animated-vector android:drawable="@drawable/vector_drawable">
<target android:name="head" android:animation="@anim/headAnimation" />
</animated-vector>
Vector Drawable API возможности применения
Класс AnimatedVectorDrawable<animated-vector android:drawable="@drawable/vector_drawable">
<target android:name="head" android:animation="@anim/headAnimation" />
</animated-vector>
Vector Drawable API возможности применения
Класс AnimatedVectorDrawableTarget - любой атрибут Path или Group
Поддерживается несколько target в одном AnimatedVectorDrawable
<animated-vector android:drawable="@drawable/vector_drawable">
<target /> <target /> <target />
</animated-vector>
Vector Drawable API возможности применения
Класс AnimatedVectorDrawableнесколько target -
несколько анимаций
Vector Drawable API возможности применения
Animationновый valueType
<set> <objectAnimator android:duration="400" android:propertyName="pathData" android:valueType="pathType" />
</set>
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>
Vector Drawable API возможности применения
AnimationpathFrom и pathTo должны иметь одинаковое количество и тип команд<set> <objectAnimator android:duration="400" android:propertyName="pathData" android:valueType="pathType" android:valueFrom="@string/pathFrom" android:valueTo="@string/pathTo" />
</set>
Vector Drawable API возможности применения
Запуск анимации((Animatable) imageView.getBackground()).start();
• отсутствует возможность настройки хореографии • отсутствует AnimationListener • возможный вариант Handler.postDelayed(Runnable r)
Vector Drawable API возможности применения
Запуск анимацииinterface Animatable2
void registerAnimationCallback(AnimationCallback cb)
class AnimationCallbackvoid onAnimationStart()
void onAnimationEnd()
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
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>
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" />
Vector Drawable API возможности применения
Обратная поддержкадублирование атрибутов
<objectAnimator android:valueType="pathType" app:vc_valueType="pathType" />
Vector Drawable API возможности применения
Обратная поддержкаособенности запуска
только в runtime
AnimatedVectorDrawable avd = ResourcesCompat .getDrawable(context, R.drawable.any_drawable);
imageView.setBackground(avd);
((Animatable) avd).start();
Vector Drawable API возможности применения
Vector Drawable API возможности применения
VectAlignинструмент для выравнивания двух путей для создания pathAnimation
https://github.com/bonnyfone/vectalign
BetterVectorDrawableбиблиотека поддержки, API >= 14
https://github.com/a-student/BetterVectorDrawable
Vector Drawable API возможности применения
Vector Asset Studio• создание XML файлов
Vector Drawable из SVG • Android Studio >= 1.4 • File > New > Vector Asset
Vector Drawable API возможности применения
Вопросы?
Vector Drawable API возможности применения
Спасибо за внимание!
top related