Android 使用SVG

2017-01-14 19:44:28来源:CSDN作者:qq_21146289人点击

第七城市

首先,什么是SVG?
SVG可缩放矢量图形(Scalable Vector Graphics):是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式。它由万维网联盟(w3c)制定,是一个开放标准。

为啥要用SVG?
因为SVG是矢量图,其占用的大小很小,且可以适配多分辨率,优点很明显。

1.那么android上如何使用SVG呢?

5.0开始,android提供了VectorDrawable来实现SVG,不过SVG的规则太多,VectorDrawable只实现了大部分,这对我们来说已经够用了。
那么5.0之前怎么使用SVG呢?
对于5.0之前的兼容,同样用的是VectorDrawable,兼容需要做到以下几点:
1.Android Plugin for Gradle 2.0 or higher
2.在项目的gradle文件中添加兼容库依赖23.2.0以上

dependencies {  compile 'com.android.support:appcompat-v7:23.2.0'}

3.还需要打开一个兼容vectorDrawables的开关

android {  defaultConfig {    vectorDrawables.useSupportLibrary = true  }}

完成以上3步,即可开始创建Vector了

2.创建VectorDrawable

1.使用AS内置的vector
Android Studio为我们提供了一堆MD的素材,我们可以直接拿过来使用,使用方式:
右键工程的drawable目录,如下图所示
这里写图片描述

这时会打开Asset Studio,我们点击Icon右边的图标即可选择内置的vector了,然后可以修改面板上的任意值来修改属性。
这里写图片描述
属性说明:
Size:实际vector的大小
Opacity:透明度
Enable auto mirroring for RTL layout:是否支持左右布局

点击next,设置保存路径,再点next即可生成一个vcetorDrawable的xml文件。

2.使用SVG图或PSD
同样打开Asset Studio,选择Local file,然后选择我们自己的SVG或PSD文件,如果文件没问题,和上一步一样的操作即可。如果有问题的话,会提示文件转换失败,那就是我们原图就存在问题了,需要找原因并调整原图。

注意:如果我们没有设置 vectorDrawables.useSupportLibrary = true 的话,则在build项目的时候,gradle会为vcetor创建不同分辨率下的png序列,即预栅格化我们的vector为真正的png图片并会被加入到apk中,无形中增加了apk的大小。这也是官方提到的另一种vector向后兼容的一种方式,如果对性能要求高的,对apk大小要求不高的,可以用这种方式,毕竟手机在将vector栅格化的时候需要一些时间,比直接加载png的费时。下图为gradle自动将vector转化为不同分辨率的png的位置截图:
这里写图片描述

3.使用VectorDrawable

我们说的是设置了vectorDrawables.useSupportLibrary = true的情况的使用方式,如果不设置vectorDrawables.useSupportLibrary = true的话,可以直接对Iamgeview设置src为vector的xml文件可以。

注意:如果需要对Vector染色,那么Vector的fillColor尽量设置为黑色的,这样染色的时候不会与默认颜色混杂

在xml中使用并染成红色(将src改为srcCompat):

<ImageView    android:id="@+id/image_view"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    app:srcCompat="@drawable/ic_android_black_24dp"    android:tint="#f00"    />

在代码中使用并染成红色:

 ImageView imageView = (ImageView) findViewById(R.id.image_view);        VectorDrawableCompat vectorDrawableCompat = VectorDrawableCompat.create(getResources(), R.drawable.ic_android_black_24dp, null);        Drawable wrapDrawable = DrawableCompat.wrap(vectorDrawableCompat);        DrawableCompat.setTint(wrapDrawable,0xffff0000);        imageView.setImageDrawable(wrapDrawable);
第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台