android开发游记:VectorDrawable矢量图兼容性问题的解决方案

安卓5.0Lollipop发布以来VectorDrawable作为安卓环境下的矢量化图形的方式一直由于兼容性问题而很少被用到,由于只能用于5.0以上系统,导致现在多少安卓机无法使用而一直被开发人员无限搁置。在官方给出兼容性的解决方案之前,开发者社区已经有几个解决方案了。比如:

https://github.com/trello/victor

https://github.com/telly/MrVector

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

但是就效果和易用性而言,我个人并不看好,其中MrVector已经停止维护,而vector-compat也已经很长时间没有更新过,而且经博主测试发现仅适用于Android gradle plugin 1.4以下的版本,1.5以后存在无法正确编译的问题。

官方也一直没有给出一个 VectorDrawableCompat 支持库来解决兼容性问题。

Android gradle plugin 1.5发布以后,加入了一个跟VectorDrawable有关的新功能。Android build tools 提供了另外一种解决兼容性的方案,如果编译的版本是5.0之前的版本,那么build tools 会把VectorDrawable生成对应的png图片,这样在5.0以下的版本则使用的是生成的png图,而在5.0以上的版本中则使用VectorDrawable

在build.gradle添加generatedDensities配置,可以配置生成的png图片的密度:

    defaultConfig {
        applicationId "com.liaoinstan.vectordrawablesupport"
        minSdkVersion 15
        targetSdkVersion 23
        versionCode 1
        versionName "1.0"
        generatedDensities = [‘hdpi‘, ‘xhdpi‘]
    }

不配置,默认全部生成。

那么,接下来测试一下:

创建一个支持5.0以下版本的工程,我这里最低支持到15,不配置generatedDensities 默认全部生成

    defaultConfig {
        applicationId "com.liaoinstan.vectordrawablesupport"
        minSdkVersion 15
        targetSdkVersion 23
        versionCode 1
        versionName "1.0"
    }

在drawable下创建一个vector.xml配置一张矢量图:

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/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>

然后在布局中添加一个ImageView引用该矢量图:

<ImageView
     android:id="@+id/imageView"
     android:layout_width="300dp"
     android:layout_height="300dp"
     android:src="@drawable/vector" />

效果如下:

然后打包编译,从工程目录下找到编译生成的apk文件,路径如下:

VectorDrawableSupport\app\build\outputs\apk

然后将apk使用解压软件解压,在res文件夹下可以找到生成的各个屏幕密度对应的资源文件:

里面分别为不同分辨率的屏幕生成了不同规格的png图片

这种方案缺失解决了目前存在的VectorDrawable 的向下兼容的问题,但是为VectorDrawable 提供了各种复杂动画效果的AnimatedVectorDrawable依然无法在5.0以下的机型使用。

目前也没有什么较好的解决方案,一般通过机型的适配来为不同安卓版本制作2种资源,一种是支持动画的给5.0以上机器使用,一种是不支持动画的给5.0以下的机型使用。在使用AnimatedVectorDrawable的时候,把 AnimatedVectorDrawable资源放到 drawable-v21 目录中,并且在 drawable 中提供一个和 AnimatedVectorDrawable 同名字的资源来在 5.0之前的版本使用,在这个 xml 文件中可以使用一个 selector 来替代这个动画。

注意有时候为了简洁可能会把VectorDrawable下的pathData放到string.xml中,然后在VectorDrawable下引用,如:

<path
    android:name="right_arm"
    android:fillColor="#9FBF3B"
    android:pathData="@string/mypath" />

如果通过生成png来兼容5.0以下机型的话,会报pathData错误,编译器不会去读取string.xml,我也不知道为啥要这样限制,总之只能把pathData写到VectorDrawable下。

<path
    android:name="head"
    android:fillColor="#9FBF3B"
    android:pathData="M 12, 4 L 10.59, 13 L 18.99, 13 L 12, 20z" />

AnimatedVectorDrawable确实是一个非常实用的工具,能够通过配置来实现各种复杂的动画效果,让人眼前一亮,但是目前的兼容性问题却很让人头疼,改天再写写AnimatedVectorDrawable吧。

时间: 2024-10-06 23:00:02

android开发游记:VectorDrawable矢量图兼容性问题的解决方案的相关文章

Android开发,使用背景图(xml drawable)为view 设置边框

Android 开发中,遇到需要设置边框的情景,使用背景图来实现,代码如下: <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <!-- 连框颜色值 --> <item> <shape> <solid android:color="#CCCCCC" /> </shape> </item>

Android开发调试中遇到的Waiting for HOME解决方案

今晚由于种种未知的原因,陪伴了我两年的系统终于被我给格了.在整理硬盘资料过程中发现之前搭建的Android开发环境也没了.唉,C盘划的少的孩子伤不起啊,硬盘小的孩子更伤不起啊.索性就心血来潮把Android的开发环境给搭起来,运行了一个久违的HelloAndroid程序.我嘞个去,启动居然足足让我等了将近三分多钟啊,网上有些哥们说他等了N个小时,吃了顿饭回来结果还在Waiting for HOME....呢,唉,悲催啊: 我刚开始以为是android模拟器第一次运行要慢一些,然后关掉模拟器重新再

Android开发之点九图的制作说明

总结: 左边的点代表垂直拉伸的区域, 上边的点代表水平拉伸的区域. 右边的点代表文字等的垂直可可显示区域, 下边的点代表文字等的水平可显示区域. 左上重合的区域就是拉伸区域. 右下重合的区域就是显示区域. 以下是转载: "点九"是andriod平台的应用软件开发里的一种特殊的图片形式,文件扩展名为:.9.png 智能手机中有自动横屏的功能,同一幅界面会在随着手机(或平板电脑)中的方向传感器的参数不同而改变显示的方向,在界面改变方向后,界面上的图形会因为长宽的变化而产生拉伸,造成图形的失

android开发游记:ItemTouchHelper 使用RecyclerView打造可拖拽的GridView

以下是RecyclerView结合ItemTouchHelper实现的列表和网格布局的拖拽效果. 效果图例如以下:(gif图有点顿卡,事实上执行是非常流畅的) demo下载地址: DragRecyclerView 怎样实现 那么是怎样实现的呢?主要就要使用到ItemTouchHelper ,ItemTouchHelper 是support-v7包中加入的一个帮助开发人员处理拖拽和滑动的实现类,它能够让你非常easy实现側滑删除.拖拽的功能. 我们仅仅须要实例化一个ItemTouchHelper.

android开发游记:SpringView 下拉刷新的高效解决方案,定制你自己风格的拖拽页面

关于下拉刷新/上拉加载更多的解决方案网上已经有很多了,浏览了目前主流的下拉控件比如PullToRefresh库等,第一:大多数实现库都难以进行动画和样式的自定义.第二:不能很好的兼容多种滚动控件,它们都对listView.RecyclerView等进行了不同程度的重新实现,你在项目中就得使用库提供的PullToRefreshListView.PullToRefreshRecyclerView等来代替源生的listView.RecyclerView等,这样的方式其实并不好,随着android版本的

Android开发游记:RecycleView 实现复杂首页布局三种方式

做过电商类应用的朋友可能都会遇到一个比较头疼的问题:复杂的首页布局如何实现.参考百度糯米,美团,bilibili等应用,都会发现其首页的布局相对复杂,例如下图bilibili的首页(第二张是demo实现的效果图),可以看到在同一个页面中先是有列表布局出现,然后出现了2列的网格布局,接着3列的网格布局,最后还出现了瀑布流式布局: 这样的效果该怎么做呢?是使用LinearLayoutManager.GridLayoutManager还是StaggeredGridLayoutManager?还是根本不

android开发游记:meterial design 5.0 开源控件整套合集 及使用demo

android 的5.0发布不光google官方给出了一些新控件,同时还给出了一套符合material design风格的设计标准,这套标准将未来将覆盖google所有产品包括pc端,网站,移动端.在android端上陆续出现了许多开源的控件库开始以google的以 material design为指导而设计的新风格控件库,对比了多个库之后这里推荐一套比较齐全且效果比较好的控件库,使用方法和传统控件高度一致,并向下兼容,附上使用方式和demo下载. 效果图: 这是由rey5137发布的mater

Android开发学习——简单类图

1.类A继承于类B    (B 是父类,A是 子类) 2.小汽车.自行车 实现车的接口 3.A中有B这个成员变量,单向关联 4.聚合,整体与部分的关系.has-a  B中的构造函数(或set方法)需要A作为传入参数. 公司与员工的关系 5.复合  组合,整体与部分的关系.contains-a  B中构造函数将A进行了实例化. 你和你的大脑  书和书页的关系. 组合>聚合>关联>依赖

Android 矢量图详解

官方文档 关于 Vector,在官方开发指南中介绍.本文章是由个人翻译官方指南然后添加个人理解完成. 由于个人精力有限,多个渠道发布,排版上可能会有问题,如果影响查看,请移步 Android 开发者家园 Vector Drawables 概述 VectorDrawable 和 AnimatedVectorDrawable 是在 Android 5.0 系统中第一次加入,当然我们可以使用 Android 的支持库,来支持旧的版本,通过 VectorDrawableCompat 和 AnimateV