Android 开发 VectorDrawable 矢量图 (一)了解Android矢量图与获取矢量图

VectorDrawable 矢量图 三部曲:

Android 开发 VectorDrawable 矢量图 (一)了解Android矢量图与获取矢量图

Android 开发 VectorDrawable 矢量图 (二)了解矢量图属性与绘制

Android 开发 VectorDrawable 矢量图 (三)矢量图动画

简述

Android应用的不断发展带来了安装包过大的尴尬,而Android之前一直都不支持矢量图形,是引起尴尬的一个重要原因。其实Android绘制界面时也是通过各种类似矢量图形命令操作完成的,所以Android最终在Lolliop引入矢量图形既是大势所趋,也是水到渠成的一件事情。矢量图有很多标准,Android支持的是SVG标准(可缩放矢量图形Scalable Vector Graphics)。但不是全量支持,准确的说Android支持的是SVG标准中Path相关的部分。

SVG是通用的矢量图标准,我们可以很轻易的从Photoshop之类的软件导出想要的图形。导出的文件后缀是*.svg,这个文件的内容是文本格式的,用txt文件查看就可以打开,其内部是一系列遵循SVG规范的命令列表。

关于版本兼容

因为谷歌是从5.0才开始支持VectorDrawable,那么如果是5.0以下的系统需要进行一些简单的配置才可以加载静态VectorDrawable资源

前提: gradle版本在1.2以上

    defaultConfig {
      vectorDrawables.useSupportLibrary = true
        }

然后我们要在加载这个布局的Activity中写一个静态代码块

    static {
 
        AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);
    }

获取矢量图的途径

第一种:在Android studio上添加自带的矢量图:

第二种:在其他网站获取矢量图

http://www.flaticon.com/  

http://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.da2e3581b&type=1

第三种:位图转换矢量图

Image Vectorizer  在线位图转换矢量图简单牛逼好用(png的图片图层,也可以很好的转换,效果十分细腻)

处理矢量图的工具

1.将其他矢量图格式转换成为VectorDrawable xml文件

http://inloop.github.io/svg2android/

2.矢量图在线编辑器

https://c.runoob.com/more/svgeditor/

配置矢量图

将ImaveView配置矢量图资源文件

 <ImageView
        android:layout_gravity="center_horizontal"
        android:layout_width="35dp"
        android:layout_height="40dp"
        app:srcCompat="@drawable/ic_access_alarm_black_24dp"/>

那么这是静态的组件我们这样配置,如果是一个Button的话 我们这样配置是无效的

给Button配置矢量图资源我们需要通过selector来间接的完成~

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_access_alarm_black_24dp" android:state_pressed="true"/>
        <item android:drawable="@drawable/ic_check_box_outline_blank_black_24dp" android:state_pressed="false"/>
    </selector>

然后把这个selctor设置给button

     <Button
            android:layout_gravity="center_horizontal"
            android:background="@drawable/bg_btn"
            android:layout_width="50dp"
            android:layout_height="50dp" />

猜你喜欢

转载自blog.csdn.net/qq_37217804/article/details/82225216