Vector Drawable API. §£§à§Ù§Þ§à§Ø§ß§à§ã§ä§Ú §á§â§Ú§Þ§Ö§ß§Ö§ß§Ú§ñ
?
1 like?1,067 views
Rambler.Android #3: Vector Drawable API. §£§à§Ù§Þ§à§Ø§ß§à§ã§ä§Ú §á§â§Ú§Þ§Ö§ß§Ö§ß§Ú§ñ (§°§ã§Ú§á§Ö§ß§Ü§à §°§Ý§Ö§Ô)
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:?llColor, android:?llAlpha 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:?llColor="@color/btn_signin" app:vc_?llColor="@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? §Ó§à§Ù§Þ§à§Ø§ß§à§ã§ä§Ú §á§â§Ú§Þ§Ö§ß§Ö§ß§Ú§ñ §³§á§Ñ§ã§Ú§Ò§à §Ù§Ñ §Ó§ß§Ú§Þ§Ñ§ß§Ú§Ö!