Android svg 格式使用小结

目录

[toc]

使用SVG的方案

svg格式是一般UI能提供的矢量图片,优点是可以放大缩小不会失真,加载快速,减少存储.Android 从5.0开始支持矢量图.

对于客户提供的svg格式的图片,由于客户提供svg格式目的是,他们需要根据主题来更换颜色,我们该如何使用,目前我试出了几个方案:

1. 将svg格式转换为png格式,按照png格式图片来使用.由于需要跟换多种颜色,所以就需要将svg格式手动修改颜色值后保存多个png图片.
2. 将svg格式转换为android 能个使用的矢量图格式,然后建立多个矢量图xml文件,里面颜色值不同
3. 同样将svg格式转换未android 矢量图xml,xml中的颜色采用主题颜色,这个图片可以根据主题改变颜色

svg 转换 png

svg 转换成 png ,网上有很多资源,不在叙述. svg格式可以直接使用文本编辑器打开,可以修改里面颜色值,这样就可以保存未多个png图标,后续android 使用资源,安装png图片使用即可.

svg 转换 xml文件

android 5.0 以后添加了VectorDrawable 类对 svg格式进行支持,但android里面使用的矢量图格式与标准svg格式不一样,需要转换成android使用的xml文件.
可以采用两种方法来转换,

• 使用github上的开源项目,SVG2Android：这是Git上的开源项目，clone下来后在浏览器中打开index即可使用。也可以直接打开网页http://inloop.github.io/svg2android/ 在线提供转换
• 使用Android Studio 里面提供的工具,Vector Asset 也提供转换,但是我使用下来转换颜色值经常出错.具体使用路径:新建一个工程,在res目录右键 new -> Vector Asset -> local file
  [图片上传失败...(image-e0e850-1553590736765)]

使用导入后会生成一个xml文件:

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="100dp"
    android:height="100dp"
    android:viewportWidth="100"
    android:viewportHeight="100">

    <path
        android:fillColor="#1e9fe0"
        android:pathData="M50,0 C77.6142,0,100,22.3858,100,50 C100,77.6142,77.6142,100,50,100
C22.3858,100,0,77.6142,0,50 C0,22.3858,22.3858,0,50,0 Z" />
    <path
        android:fillColor="#fff"
        android:pathData="M84.39,47 L28.86,24.6 A3.56,3.56,0,0,0,24,28.52 L26.6,43.52
A3.09,3.09,0,0,0,29.4,46.07 L77.4,49.86 L29.4,53.64 A3.09,3.09,0,0,0,26.6,56.19
L24,71.19 A3.57,3.57,0,0,0,28.85,75.12 L84.39,52.7 A3.09,3.09,0,0,0,84.39,47 Z" />
</vector>

Android Studio 转换后 第二个path里面颜色值错了,应该是白色的,不清楚是怎么回事,但是在线转化是正确的,这个要人工检查下.

如果是需要修改颜色,修改里面fillcolor的代码就可以.

动态修改svg 颜色

如何动态修改矢量图的颜色,网上一般提供的方法是修改矢量图fillcolor(只适用与只有一个颜色代码)setColorFilter,或者图标的背景值.
如果有多个fillcolor需要动态修改,有两种方式修改:
1 github提供一个库,可以查找path name,然后update 该path的颜色.
AndroidStudio 可以使用第三方库，可以按名字提取出path，单独来改变属性：VectorChildFinder

2 采用主题 style的方式:
参考文章https://stackoverflow.com/questions/33126904/change-fillcolor-of-a-vector-in-android-programmatically/38418049#38418049
1.在style中声明属性：

    <declare-styleable name="LilyBackgroud">
        <attr name="svgbackgroud" format="color" />
        <attr name="svgfront" format="color" />
    </declare-styleable>

2.在style中预设样式：

    <style name="PinkScene" parent="AppTheme">
        <item name="svgbackgroud">#ee9fe0</item>
        <item name="svgfront">#fff</item>
    </style>

    <style name="BlueScene" parent="AppTheme">
        <item name="svgbackgroud">#1e9fe0</item>
        <item name="svgfront">#fff</item>
    </style>

3.更改VectorDrawable,
?attr/svgbackgroud ,
?attr/svgfront：

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="100"
    android:viewportHeight="100">

    <path
        android:fillColor="?attr/svgbackgroud"
        android:pathData="M50,0 C77.6142,0,100,22.3858,100,50 C100,77.6142,77.6142,100,50,100
C22.3858,100,0,77.6142,0,50 C0,22.3858,22.3858,0,50,0 Z" />
    <path
        android:fillColor="?attr/svgfront"
        android:pathData="M84.39,47 L28.86,24.6 A3.56,3.56,0,0,0,24,28.52 L26.6,43.52
A3.09,3.09,0,0,0,29.4,46.07 L77.4,49.86 L29.4,53.64 A3.09,3.09,0,0,0,26.6,56.19
L24,71.19 A3.57,3.57,0,0,0,28.85,75.12 L84.39,52.7 A3.09,3.09,0,0,0,84.39,47 Z" />
</vector>

4.代码中动态改变：

ib_image = (ImageButton) findViewById(R.id.imageButton2);

ib_image.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Log.d("wentao","adfadfasdf  touchState:"+touchState);
        changeColor(touchState);
        if(touchState){
            touchState = false;
            ContextThemeWrapper wrapper = new ContextThemeWrapper(mContext, R.style.BlueScene);
            final Drawable drawable = VectorDrawableCompat.create(getResources(), R.drawable.ic_sendiconon_pink, wrapper.getTheme());
            ib_image.setImageDrawable(drawable);

        }else{
            touchState = true;
            ContextThemeWrapper wrapper = new ContextThemeWrapper(mContext, R.style.PinkScene);
            final Drawable drawable = VectorDrawableCompat.create(getResources(), R.drawable.ic_sendiconon_pink, wrapper.getTheme());
            ib_image.setImageDrawable(drawable);
        }

    }
});

矢量图使用进阶

阿里的项目
Iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。
iconfont的简单使用,目前android使用还是有限制,只能支持单色,所以我们的项目还是支持不了
iconfont在Android中的使用官网已经做了非常详细介绍http://www.iconfont.cn/help/detail?helptype=code使用起来也很简单,我总结了几步：

• 首先在我的项目中新建一个自己的项目;
• 从iconfont平台选择要使用到的图标或者本地导入svg图片到项目中；
• 下载代码,把iconfont.svg和iconfont.ttf文件导入到项目中的assets文件夹中；
• 用TextView代替ImagerView，找到图标相对应的 HTML 实体字符码给textView设置；
• textview设置大小跟颜色，图标的大小颜色也会改变（这里大小最好用dp为单位，这样不会随着手机字体大小的改变而改变图标的大小）；
• 为Textview设置指定的ttf文字；