Android 使用自定义SVG

参考

1、Android SVG支持
2、svg在android上的应用
3、Android SVG
4、Android tint着色（优化，减小apk体积）

介绍

• SVG 意为可缩放矢量图形（Scalable Vector Graphics）。
• SVG 使用 XML 格式定义图像。
• XML-vector , 代码-VectorDrawable
• 主要优点：体积小、不失真、标准xml可多端读取使用
• 主要缺点：难以处理复杂图像，比如风景图片

工具

• 矢量图下载 阿里图库
• svg编辑软件
• svg转换
• AndroidStudio自带：File->New->VectorAsset

绘画使用-Path标签

1、大写都是绝对位置、小写都是相对位置
2、具体属性

• M = moveto(M X,Y)：将画笔移动到指定的坐标位置，但未发生绘制
• L = lineto(L X,Y)：画直线到指定的坐标位置
• H = horizontal lineto(H X)：画水平线到指定的X轴坐标
• V = vertical lineto(V Y)：画垂直线到指定的Y轴坐标
• C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY)：三次贝塞曲线
• S = smooth curveto(S X2,Y2,ENDX,ENDY)：三次贝塞曲线
• Q = quadratic Belzier curveto(Q X,Y,ENDX,ENDY)：二次贝塞曲线
• T = smooth quadratic Belzier curveto(T ENDX,ENDY)：映射前面路径后的终点
• A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧线
• Z = closepath()：关闭路径

实战-六边形

一、兼容支持

1、Android 5.0之后是默认支持的，之前的话需要添加库支持
build.gradle

android {
  defaultConfig {
    vectorDrawables.useSupportLibrary = true
  }
}

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

二、drawable-xml

1、width\height 相当于控件大小
2、viewportWidth\viewportHeight 相当于控件内画布大小，随意定义，主要方便绘画
3、pathData:路径值，可以画个坐标图，很快能做出简单图形的

三、layout-xml

1、控件不同大小，是否影响失真？ 在imageview下用src会失真，用background不会。想要不失真可用：app:srcCompat取代android:src
2、全用wrap_content的话以xml标注的尺寸为准，当然可以自定义大小
3、不规则图形布局，得自己计算位置等

image.png

四、Glide支持

1、清晰

RequestBuilder requestBuilder = GlideApp.with(this)
                .as(PictureDrawable.class)
                .transition(withCrossFade())
                .listener(new SvgSoftwareLayerSetter());
requestBuilder.load("http://www.webhek.com/wordpress/wp-content/uploads/2014/05/kiwi.svg").into(viewImage1);
requestBuilder.load(R.raw.spiral).into(viewImage2);

2、没那么清晰的

Glide.with(this).load("http://www.webhek.com/wordpress/wp-content/uploads/2014/05/kiwi.svg").into(viewImage3);
Glide.with(this).load(R.raw.spiral).into(viewImage4);

5、其他功能支持

1、将 VectorDrawable 用于 View 背景时，需要通过以下代码设定

Resources resources = context.getResources(Resources, int, Theme);
Theme theme = context.getTheme();
Drawable drawable = VectorDrawableCompat.create(resources, R.drawable.vector_drawable, theme);
view.setBackground(drawable);

2、代码中需要进行Drawable的实现类型转换时，可使用以下代码段执行：

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
   VectorDrawable vectorDrawable =  (VectorDrawable) drawable;
} else {
   BitmapDrawable bitmapDrawable = (BitmapDrawable) drawable;
}

3、矢量动画

//5.0原生
ImageView imageView = (ImageView) findViewById(R.id.imageView);
AnimatedVectorDrawable vectorDrawable = (AnimatedVectorDrawable) getResources().getDrawable(AnimatedVectorDrawableRes, Theme);
imageView.setImageDrawable(vectorDrawable);
vectorDrawable.start();

//Support Library支持库
ImageView imageView = (ImageView) findViewById(R.id.imageView);
AnimatedVectorDrawableCompat drawableCompat = AnimatedVectorDrawableCompat.create(context, AnimatedVectorDrawableRes);
imageView.setImageDrawable(drawableCompat);
drawableCompat.start();