&nbsp&#8250&nbsp&nbsp&#8250&nbsp
VectorDrawable-第一章
在 一文中我们介绍了VectorDrawable，只是简单的作为一个引子，文中也提到了会翻译几篇关于VectorDrawable的文章，本文就是stylingandroid网站的几篇文章译文的第一篇：以下为译文：Lollipop中有一个非常好的新特性是VectorDrawable以及相关的一些类，他们为我们提供了添加复杂矢量图形的强大功能，同时也提供了动画显示这些图形的方法。矢量图形的好处是放大不会失真，可以适应不同分辨率的屏幕。这个文章系列我们将了解这些类以及它们的优点，以及如何用相对较少的代码实现吸引人的效果。&&简单的来说，矢量图形就是使用几个形状的方式来描述一个图像元素。矢量图形非常适合于与设备无关的简单或者合成的制图或者不需要实现真实感的场合。Adobe&Illustrator和Inkscape&常用来制作矢量图形。而位图（Bitmap&），则完全相反，位图是定义每一个像素点的颜色来显示一张图片，它适合显示一张真实的照片。矢量图形的一大好处是它的渲染是在运行时开始的，因此它可以自适应不同的屏幕。由于矢量图其实保存的只是描述几何图形的文本，因此它只占用非常少的空间。当然因为需要在运行时将这些字符串转换成图像，花费多一点点的cpu是肯定的。&矢量图形在安卓的Lollipop中已经实现了，相关的类就是VectorDrawable&。（虽然第三方的&已经实现了VectorDrawable&兼容Lollipop&之前的设备，但是它并没有实现后面会讲到的AnimatedVectorDrawable&）。VectorDrawable&的出现意味着以前我们放在mdpi,&hdpi,&xhdpi,&xxhdpi中的部分图片资源（适合用矢量图描述的，比如图标）只用一个VectorDrawable&替代就可以了。为了说明，我找了下面这张svg文件（这个文件可以从&中获取到），图片是一个机器人 ：这个文件的svg格式只有2265字节，但是如果我们将它转换成500&x&500的bitmap文件，保存成png格式，则有13272&字节。并且它可以自动伸缩为任意大小的图片，而位图就需要使用多张才能达到不同分辨率的效果。不过，这里以svg作为例子还是有点问题，因为svg并非VectorDrawable，所以我们不能直接使用svg图片。但是VectorDrawable&支持svg的一部分规则，我们可以将svg中的某些数据用在VectorDrawable中。主要其实就是svg中定义path的那部分数据。Svg的path类似于&api，只不过是用字符串定义的，我们看看svg的源码就知道了：&?xml&version=&1.0&&encoding=&utf-8&?&
&!--&Generator:&Adobe&Illustrator&13.0.0,&SVG&Export&Plug-In&.&SVG&Version:&6.00&Build&14948)&&--&
&!DOCTYPE&svg&PUBLIC&&-//W3C//DTD&SVG&1.1//EN&&&http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd&&
&svg&version=&1.1&&id=&Layer_1&&xmlns=&http://www.w3.org/2000/svg&&xmlns:xlink=&http://www.w3.org/1999/xlink&&x=&0px&&y=&0px&
&&&&&width=&500px&&height=&500px&&viewBox=&0&0&500&500&&enable-background=&new&0&0&500&500&&xml:space=&preserve&&
&g&id=&max_width__x2F__height&&display=&none&&
&&&&&path&display=&inline&&d=&M499.001,1v498H1V1H499.001&M500.001,0H0v500h500.001V0L500.001,0z&/&
&g&id=&androd&&
&&&&&path&fill=&#9FBF3B&&d=&M301.314,83.298l20.159-29.272c1.197-1.74,0.899-4.024-0.666-5.104c-1.563-1.074-3.805-0.543-4.993,1.199
&&&&&&&&L294.863,80.53c-13.807-5.439-29.139-8.47-45.299-8.47c-16.16,0-31.496,3.028-45.302,8.47l-20.948-30.41
&&&&&&&&c-1.201-1.74-3.439-2.273-5.003-1.199c-1.564,1.077-1.861,3.362-0.664,5.104l20.166,29.272
&&&&&&&&c-32.063,14.916-54.548,43.26-57.413,76.34h218.316C355.861,126.557,333.375,98.214,301.314,83.298&/&
&&&&&path&fill=&#FFFFFF&&d=&M203.956,129.438c-6.673,0-12.08-5.407-12.08-12.079c0-6.671,5.404-12.08,12.08-12.08
&&&&&&&&c6.668,0,12.073,5.407,12.073,12.08C216.03,124.03,210.624,129.438,203.956,129.438&/&
&&&&&path&fill=&#FFFFFF&&d=&M295.161,129.438c-6.668,0-12.074-5.407-12.074-12.079c0-6.673,5.406-12.08,12.074-12.08
&&&&&&&&c6.675,0,12.079,5.409,12.079,12.08C307.24,124.03,301.834,129.438,295.161,129.438&/&
&&&&&path&fill=&#9FBF3B&&d=&M126.383,297.598c0,13.45-10.904,24.354-24.355,24.354l0,0c-13.45,0-24.354-10.904-24.354-24.354V199.09
&&&&&&&&c0-13.45,10.904-24.354,24.354-24.354l0,0c13.451,0,24.355,10.904,24.355,24.354V297.598z&/&
&&&&&path&fill=&#9FBF3B&&d=&M140.396,175.489v177.915c0,10.566,8.566,19.133,19.135,19.133h22.633v54.744
&&&&&&&&c0,13.451,10.903,24.354,24.354,24.354c13.451,0,24.355-10.903,24.355-24.354v-54.744h37.371v54.744
&&&&&&&&c0,13.451,10.902,24.354,24.354,24.354s24.354-10.903,24.354-24.354v-54.744h22.633c10.569,0,19.137-8.562,19.137-19.133V175.489
&&&&&&&&H140.396z&/&
&&&&&path&fill=&#9FBF3B&&d=&M372.734,297.598c0,13.45,10.903,24.354,24.354,24.354l0,0c13.45,0,24.354-10.904,24.354-24.354V199.09
&&&&&&&&c0-13.45-10.904-24.354-24.354-24.354l0,0c-13.451,0-24.354,10.904-24.354,24.354V297.598z&/&
&/svg&看起来很乱，我们不需要知道其内部的细节，只把我们用得着的东西筛选出来就行了。&svg&&标签中定义了一些属性：画布以及视图区域大小为500&x&500&px，然后有一个&g&标签，里面定义了一个描边，忽略掉就是了。再后又是一个&g&标签，这个标签的id为“android”，这部分里面的东西才是机器人logo自身的数据，也是我们需要的数据。它包含了6个&path&&元素，分别定义head、左眼、右眼、左手、身体和脚、右手。每一个path中的fill&属性定义填充色（可以看到，除了眼睛为白色之外，所有的填充色都是绿色），fill属性之后是包含path数据的属性d。想了解d属性中数据定义的可以参考&，但是这个不重要，因为我们只需简单的把这里面的数据直接用在VectorDrawable中就可以了。&好了，我们来创建一个VectorDrawable：&?xml&version=&1.0&&encoding=&utf-8&?&
&vector&xmlns:android=&/apk/res/android&
&&&&android:viewportWidth=&500&
&&&&android:viewportHeight=&500&
&&&&android:width=&500px&
&&&&android:height=&500px&&
&&&&&group&android:name=&android&&
&&&&&&&&&path
&&&&&&&&&&&&android:name=&head&
&&&&&&&&&&&&android:fillColor=&#9FBF3B&
&&&&&&&&&&&&android:pathData=&M301.314,83.298l20.159-29.272c1.197-1.74,0.899-4.024-0.666-5.104c-1.563-1.074-3.805-0.543-4.993,1.199L294.863,80.53c-13.807-5.439-29.139-8.47-45.299-8.47c-16.16,0-31.496,3.028-45.302,8.47l-20.948-30.41c-1.201-1.74-3.439-2.273-5.003-1.199c-1.564,1.077-1.861,3.362-0.664,5.104l20.166,29.272c-32.063,14.916-54.548,43.26-57.413,76.34h218.316C355.861,126.557,333.375,98.214,301.314,83.298&&/&
&&&&&&&&&path
&&&&&&&&&&&&android:name=&left_eye&
&&&&&&&&&&&&android:fillColor=&#FFFFFF&
&&&&&&&&&&&&android:pathData=&M203.956,129.438c-6.673,0-12.08-5.407-12.08-12.079c0-6.671,5.404-12.08,12.08-12.08c6.668,0,12.073,5.407,12.073,12.08C216.03,124.03,210.624,129.438,203.956,129.438&&/&
&&&&&&&&&path
&&&&&&&&&&&&android:name=&right_eye&
&&&&&&&&&&&&android:fillColor=&#FFFFFF&
&&&&&&&&&&&&android:pathData=&M295.161,129.438c-6.668,0-12.074-5.407-12.074-12.079c0-6.673,5.406-12.08,12.074-12.08c6.675,0,12.079,5.409,12.079,12.08C307.24,124.03,301.834,129.438,295.161,129.438&&/&
&&&&&&&&&path
&&&&&&&&&&&&android:name=&left_arm&
&&&&&&&&&&&&android:fillColor=&#9FBF3B&
&&&&&&&&&&&&android:pathData=&M126.383,297.598c0,13.45-10.904,24.354-24.355,24.354l0,0c-13.45,0-24.354-10.904-24.354-24.354V199.09c0-13.45,10.904-24.354,24.354-24.354l0,0c13.451,0,24.355,10.904,24.355,24.354V297.598z&&/&
&&&&&&&&&path
&&&&&&&&&&&&android:name=&body&
&&&&&&&&&&&&android:fillColor=&#9FBF3B&
&&&&&&&&&&&&android:pathData=&M140.396,175.489v177.915c0,10.566,8.566,19.133,19.135,19.133h22.633v54.744c0,13.451,10.903,24.354,24.354,24.354c13.451,0,24.355-10.903,24.355-24.354v-54.744h37.371v54.744c0,13.451,10.902,24.354,24.354,24.354s24.354-10.903,24.354-24.354v-54.744h22.633c10.569,0,19.137-8.562,19.137-19.133V175.489H140.396z&&/&
&&&&&&&&&path
&&&&&&&&&&&&android:name=&right_arm&
&&&&&&&&&&&&android:fillColor=&#9FBF3B&
&&&&&&&&&&&&android:pathData=&M372.734,297.598c0,13.45,10.903,24.354,24.354,24.354l0,0c13.45,0,24.354-10.904,24.354-24.354V199.09c0-13.45-10.904-24.354-24.354-24.354l0,0c-13.451,0-24.354,10.904-24.354,24.354V297.598z&&/&
&&&&&/group&
&/vector&我们创建一个&vector&&元素，指定了宽和高，然后创建包含了6个&path&元素的&group&元素。这6个&path&元素的定义非常类似svg中的定义，只有非常小的差别，大部分内容都是直接从svg中copy的。我们还定义了name&属性来描述每个path的作用。这个文件保存下来仍然只有2412字节。下面我们可以就像一般drawable一样去使用上面定义的VectorDrawable了。&RelativeLayout&xmlns:android=&/apk/res/android&
&&&&xmlns:tools=&/tools&
&&&&android:layout_width=&match_parent&
&&&&android:layout_height=&match_parent&
&&&&android:paddingLeft=&@dimen/activity_horizontal_margin&
&&&&android:paddingRight=&@dimen/activity_horizontal_margin&
&&&&android:paddingTop=&@dimen/activity_vertical_margin&
&&&&android:paddingBottom=&@dimen/activity_vertical_margin&
&&&&tools:context=&.VectorDrawablesActivity&&
&&&&&ImageView
&&&&&&&&android:id=&@+id/android&
&&&&&&&&android:layout_width=&wrap_content&
&&&&&&&&android:layout_height=&wrap_content&
&&&&&&&&android:src=&@drawable/android&
&&&&&&&&android:contentDescription=&@null&&/&
&/RelativeLayout&运行结果如下：&有一个小问题：这个VectorDrawable渲染的非常好，但是我遇到过从其他的svg文件中复制的VectorDrawable&在Android&Studio中无法预览的情况（在真实设备中运行却是正常的），因此不管Android&Studio是否能正常预览，还是以真实设备为准吧，Android&Studio是有bug的。我用的是V1.0.2&版本，关于这个bug在这里有描述：。现在我们可以使用VectorDrawable大幅度的减小我们的apk了，而且这还让我们在维护app的时候容易的多，至少在使用VectorDrawable的资源上我们不需要因为要兼容新的设备而修改。这还只是VectorDrawable的一个用处，在后面的文章中我们将看到VectorDrawable是如何动画的。这篇文章的代码可以在这里得到：。&英文原文：& 本文由jcodecraeer翻译，欢迎转载，请注明出处：&
上一篇： 什么是 共享元素变换？ 元素共享式变换（ sharedelementtransition ） 决定了共享的 view 元素从一个 Activity/Fragment 到另一个 Activity/Fragmentt 的切换 中是如何动画变化的。共享元素在被调用 Activity 进入 和返回时播放动画， 共享元素在进入 和返回
下一篇： 转载自： 50个Android开发技巧(20 使用MVP模式) 注：本文的这种编程方法只能作为一种参考，并不一定要在程序中实践，而且mvc也好mvp也好，其实没有一个固定的模式，只要能实现解耦，就是好的模式，并且，在小程序中使用mvp是完全没必要的。 一、MVP介绍 随着13754人阅读
点滴纪录（5）
技术心得（5）
在安卓的发展历程中，由于设备碎片化的原故，谷歌在app中图标的适配上做出一步又一步的改进，大体有这么几个阶段：
首先有了drawable-(m|h|xh|xxh|xxxh)dpi
自android studio后，又有了mipmap-(m|h|xh|xxh|xxxh)dpi
随着android L的发布，带来了VectorDrawable,矢量图的支持
第一种方案大家都很熟悉， 但也是我们头痛的地方，因为每种icon都需要出几套不同分辨率，这无形的增加了app的容量，而且也增加了美工和开发人员的工作量，但是我们又不得不去做。
第二种是第一种的升级版， 没有实质上的区别，但是在缩放上提供了更好的性能和更少的内存占用。
第三种，矢量图，先大概解释下：矢量图在很久很久以前就已经应用起来了，是一种基于xml的图像，因为图片不提供具体的像素，只提供的是绘图的指令，所以好处是 占用内存非常小，性能高，可以任意缩放而不会失真，但是缺点也很明显，没有位图表达的色彩丰富。
然而现在app风格越来越扁平， 拟物化已经成了过去，矢量图成了越来越多人的选择。但是，android和ios对于矢量图的支持还非常弱.
android在最新的支持包中，已经加入了向下兼容的库：VectorDrawableCompat和AnimatedDrawableCompat，关于这两点的介绍网上很多，但是大多相同,但是有坑。今天我就围绕这个上代码，让未上车的猿们抓紧时间上车。
首先，去哪找合适的矢量图：
找到你需要的图标，并下载svg
在android中打开vector assert
点击Local SVG 选择路径，并命名drawable文件名字
就在drawable目录生成了如下图
ok， 一张可以任意缩放的图片有了。
接着看怎么引用，
先讲解一下， android L 以后矢量图是以vectorDrawable的形式来使用了， 但是这个库只支持L以后的，于是谷歌出了一个兼容包：
VectorDrawableCompat,AnimatedVectorDrawableCompat
As you may have seen on the Support Lib 23.2.0 , we now have compatible vector drawable implementations in the support libraries: VectorDrawableCompat and Animated VectorDrawableCompat.
意思是说 在appcompat 23.2.0开始，提供了以上两种支持库一个用于兼容矢量图,但是这个支持库要使用的话，还得在app的gradle里面加个这样的配置：
defaultConfig {
vectorDrawables.useSupportLibrary = true
defaultConfig {
generatedDensities = []
aaptOptions {
additionalParameters "--no-version-vectors"
ok , 配置完毕，下一步是怎么使用
&?xml version="1.0" encoding="utf-8"?&
xmlns:android="/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="10dp"
xmlns:app="/apk/res-auto"
android:layout_width="42dp"
android:layout_height="42dp"
app:srcCompat="@drawable/icon_shopping"/&
ok , 可以使用，试着改变下图标大小，会发现，完全一样，没有一点模糊 。
这里要说到，这种的局限性：
1.只能用于AppCompatImageView或者AppCompatImageButton或其子类,而且必须在app:srcCompat标签中，额，那我要用在TextView，Button上怎么办？我试试：
&android.support.v7.widget.AppCompatTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:drawableLeft="@drawable/icon_shopping"
android:text="我想要小图标"/&
Caused by: android.content.res.Resources$NotFoundException:
File res/drawable/icon_shopping.xml from drawable resource ID #0x7f02004d
at android.content.res.Resources.loadDrawable(Resources.java:2101)
at android.content.res.TypedArray.getDrawable(TypedArray.java:602)
at android.widget.TextView.&init&(TextView.java:806)
at android.support.v7.widget.AppCompatTextView.&init&(AppCompatTextView.java:60)
at android.support.v7.widget.AppCompatTextView.&init&(AppCompatTextView.java:56)
嗯，除了一大堆错误，没有别的效果， 怎么办？
You don’t have to use StateListDrawable. It also works with InsetDrawable, LayerDrawable, LevelListDrawable and RotateDrawable containers. The only rule is that the vector needs to be in a separate file.
在android官方推文中找到这句话 ， 意味着，我们要在普通控件上使用Vector,就必须依附于StateListDrawable,InsetDrawable,LayerDrawable,LevelListDrawable,RotateDrawable,所以我来试试？
&?xml version="1.0" encoding="utf-8"?&
xmlns:android="/apk/res/android"&
android:drawable="@drawable/icon_shopping"/&
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:drawableLeft="@drawable/shopping_res"
android:text="我想要小图标"/&
结果，相信有些哥们也尝试到这里了， 仍然是一大堆的错误。。。嗯，不是说包在那几个drawable里面就可以用了吗？忽悠人？这个帖子就此结束？
First up, this functionality was originally released in 23.2.0, but then we found some memory usage and Configuration updating issues so we it removed in 23.3.0. In 23.4.0 (technically a fix release)* we’ve re-added the same functionality but behind a flag which you need to manually enable.*
我英文不太好， 应该是说，在23.2.0中放出了这个功能，但是后来发现了一些bug ,在23.3.0里面又移除了，后来在23.4.0中修复这些bug , 但是我们没有默认开启了，你需要通过一个标志来启用，呵呵哒。。这就是报错的原因了。。
If you want re-enable this, just stick this at the top of your Activity:
AppCompatDelegate.setCompatVectorFromSourcesEnabled(true);
嗯，这句话简单， 就是说，你要想再用上， 就在你的activity里面加上这句来启用vector ，
结果怎样呢？
ok ~问题解决。嗯，到了这一步，我们已经可以自由的使用矢量图标了呢，
那怎么改变图标颜色呢？这个我要说声抱歉，我还没有想在xml里面设置图标背景的方法， 有人会说drawableTint，这个可以，但是只支持api23以上，嗯，所以：
1.对于vector，我只想到了在xml里面改变fillColor来改变颜色，但这样就不好了，几个颜色就要几个图片，
2.可以用代码在合适的位置设置：
VectorDrawableCompat a = VectorDrawableCompat.create(getResources(), R.drawable.icon_shopping, getTheme())
a.setTint(Color.RED)
a.setTintList(ColorStateList.valueOf(Color.RED))
DrawableCompat.setTint(a,Color.RED);
3.可以在AnimatedVectorDrawable中用动画来改变vector的颜色 ，
嗯，第三个方案涉及的知识又多了起来， 这个可以再起一个博客详细来说，先略过。
嗯，说好了爬坑，就不可能到这里就结束了。
前面所说的这个矢量图只能用在AppcomatImageView,AppcompatImageButton，
但实际上，用ImageView,ImageButton加上app:srcCompat也行， 为什么？因为你用了appcomat后，它会自动的把你的一部分控件转成AppCompatXxx的控件。
总结一下，这个矢量图的缺点吧：
1.麻烦， 需要下载-&vector asset转换-&用在非imageview中还要再写一个xml包裹起来才可用
2.不能随心所欲的在xml布局中任意切换图标颜色 ， 如果在vector的xml里面改fillcolor，则这个图标就不好复用了。我的意思则是一处创建，随意使用。
3.支持库正在更新的过程中， 可能出现各种各样bug,也可能出现前面改动api实现而掉坑的情况。
那怎么办？怎么办？
前面介绍的 :
对，就是它。后面要介绍的
它的原理是，把你想要的矢量图标打包成一个ttf，在android中应用这个ttf,就可以随心所欲了，怎么个随心所欲？
用TextView的setText设置图标， setTextSize设置大小， 用TextColor设置图标颜色 ，只要能显示String的控件，都可以用，这样说来如何 ？
&?xml version="1.0" encoding="utf-8"?&
xmlns:android="/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="10dp"
xmlns:app="/apk/res-auto"
android:layout_width="42dp"
android:layout_height="42dp"
app:srcCompat="@drawable/icon_shopping"/&
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:drawableLeft="@drawable/shopping_res"
android:text="我想要小图标"/&
android:layout_width="wrap_content"
android:layout_marginTop="10dp"
android:textSize="60sp"
android:textColor="#f00"
android:text="?"
android:layout_height="wrap_content" /&
这个IconfontView，是继承自TextView，在初始化的时候加载了字体而已，
& # xe725; 这个是上图图标的代码。
嗯，这个并不算是什么高科技， 只是一个字体而已， 我就不长篇大论了， 下面贴出获取的流程吧，图从官网拿的:
选中一堆需要的图标并加入购物车， 然后再这里点下载到本地，
其中iconfont.ttf就是我们需要的字体了， 其他的那些在web上用的， 可以忽略。把[* .ttf, .eot, .svg , *.woff]复制到项目中assets中，然后，
public class IconfontView extends TextView {
private static Typeface __cachedTypeFace = null;
public IconfontView(Context context) {
super(context);
initFont();
public IconfontView(Context context, AttributeSet attrs) {
super(context, attrs);
initFont();
public IconfontView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initFont();
private void initFont() {
if (__cachedTypeFace == null) {
final Typeface iconfont = Typeface.createFromAsset(getContext().getAssets(), "iconfont/iconfont.ttf");
__cachedTypeFace =
setTypeface(__cachedTypeFace);
这里就是初始化的时候指定一下字体 ， 这个iconfont什么的， 这个我由于写的是demo就写死的， 这里可以自定义一个属性，用来指定具体要用的字体 。
ok ， 现在打开解压目录的demo.html
每个图标下的& #xe000就是这个图标的代码， 可以在IconfontView的text中设置了， 看下效果，
&com.example.liufan.demo1.IconfontView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text=""
android:textColor="#f00"
android:textSize="200sp" /&
&com.example.liufan.demo1.IconfontView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text=""
android:textColor="#f0f"
android:textSize="200sp" /&
好了， 就是这些了， 基本全面， 如果帮忙您，希望您能帮我顶起来让更多人看到，
如果说的有误，希望我能收到您的指正。
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：20637次
排名：千里之外}