Android中使用SVG

简介

可缩放矢量图形（英语：Scalable Vector
Graphics，SVG）是一种基于可扩展标记语言（XML），用于描述二维矢量图形的图形格式。SVG由W3C制定，是一个开放标准。——摘自维基百科

它和位图（Bitmap）相对，SVG不会像位图一样因为缩放而让图片质量下降。图像与分辨率无关，收放自如，适配安卓机坑爹的分辨率真是一劳永逸。它的优点在于节约空间，使用方便

Android也在5.0中新增了对使用svg矢量图支持

文章开始前，先墙裂安利一个网站，阿里的iconfont，海量在线矢量图，早收藏早致富

VectorDrawable

VectorDrawable是Android 5.0系统中引入了 VectorDrawable 来支持矢量图(SVG)，同时还引入了 AnimatedVectorDrawable 来支持矢量图动画

首先在iconfont下载一个svg图片

用Editplus打开以后，格式化看到的样式是

新建Vector Asset文件

New -> Vector Asset

我们先选择Local File选择本地svg文件进行导入，然后下一步，finish

查看刚才新增的文件：

*它虽然是个类，但是一般通过配置xml再设置到要使用的控件上。在Android工程中，在资源文件夹res/drawable/的目录下，通过标签描述

ImageView使用

   <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_arrows_down_line"/>

TextView使用

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawableRight="@drawable/ic_arrows_down_line"
        android:drawablePadding="4dp"
        android:text="drawable right"/>

MenuItem
MenuItem是可以完美支持矢量图的，可以查看以下文章链接的最后一个栗子
https://blog.csdn.net/u010356768/article/details/80429766

属性

width, height：图片的宽高。可手动修改到需要尺寸
viewportHeight, viewportWidth：对应将上面height width等分的份数。以ic_arrows_down_line举例，可以想象将长宽都为24dp的正方形均分为1024x1024的网格，在这个网格中就可以很方便地描述点的坐标，图像就是这些点连接起来构成的
fillColor：填充颜色。最好直接在这里写明色值#xxxxxxxx，而不要用@color/some_color的形式，避免某些5.0以下机型可能会报错
pathData：在2中描述的网格中作画的路径。具体语法不是本文的重点，故不展开

VectorDrawable 转 Bitmap

public Bitmap getBitmapFromVectorDrawable(Context context, int drawableId) {
        Drawable drawable = ContextCompat.getDrawable(context, drawableId);
        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
            drawable = (DrawableCompat.wrap(drawable)).mutate();
        }

        Bitmap bitmap = Bitmap.createBitmap(drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight(),
                Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);
        drawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
        drawable.draw(canvas);

        return bitmap;
    }

iconfont的使用

iconfont在Android中的使用官网已经做了非常详细介绍

我这里再总结一下：
1、找到图标，下载代码

2、把下载下来的ttf文件放到assets文件夹下

3、打开下载文件中的demo_unicode.html，查找需要的字符码

4、给TextView赋值

    <TextView
        android:id="@+id/tv_down_load"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="&#xeb80;"
        android:textSize="30dp"
        android:textColor="#ff0000"/>

iconfont封装
每次都给TextView设置指定文字是不是也很繁琐,而且一直不断的在读取iconfont.ttf文字,也很浪费内存,我们完全可以把这个抽离出来

首先我们要读取到的是assets目录下的iconfont.ttf文件；这里我把它放到自定义的Application中，这样就只要读取一次，代码如下

public class Myapplication extends Application {
    public static Typeface iconfont;

    public static Typeface getIconfont(Context context) {
        if (iconfont != null) {
            return iconfont;
        } else {
            iconfont = Typeface.createFromAsset(context.getAssets(), "iconfont.ttf");
        }
        return iconfont;
    }
}

这里就实例化了iconfont。然后给每TextView设置Typeface，这肯定不是我们想要的，所以我们自定义一个TextView然后初始化时setTypeface就可以了代码如下

public class TextViewIcon extends AppCompatTextView {
    public TextViewIcon(Context context) {
        super(context);
        init(context);
    }

    public TextViewIcon(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    public TextViewIcon(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context);
    }

    private void init(Context context) {
        setTypeface(Myapplication.getIconfont(context));
    }
}

直接在layout文件中使用

  <com.example.xx.myapplication.TextViewIcon
        android:id="@+id/tv_down_load"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="&#xeb80;"
        android:textSize="30dp"
        android:textColor="#ff0000"/>

效果和刚才是一样的

iconfont动态设置

        textView.setTextColor(Color.parseColor("#0000ff"));
        textView.setTextSize(30);
        textView.setText("\ueb68;");

值得注意的是

setText的时候   "&#x" 替换成 "\u"，用 unicode 字符来表示

最后

矢量图的优点一大把，但也不是万能的。矢量图特别适合icon图标的应用场景，但是不能用于比如加载相册时，设置的placeholder或者error这类需要频繁切换回收的应用场景，否则会造成非常明显的卡顿，因为矢量图是不被硬件加速支持的

参考：

https://blog.csdn.net/dick_zeng/article/details/72473591