参考
1、Android SVG支持
2、svg在android上的应用
3、Android SVG
4、Android tint着色（优化，减小apk体积）
介绍
- SVG 意为可缩放矢量图形（Scalable Vector Graphics）。
- SVG 使用 XML 格式定义图像。
- XML-vector , 代码-VectorDrawable
- 主要优点：体积小、不失真、标准xml可多端读取使用
- 主要缺点：难以处理复杂图像，比如风景图片
工具
绘画使用-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:路径值，可以画个坐标图，很快能做出简单图形的
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="200dp"
android:height="173dp"
android:viewportWidth="400"
android:viewportHeight="346">
<path
android:fillColor="#000000"
android:pathData="M0,173 l100,-173 200,0 100,173 -100,173 -200,0 -100,-173z"
/>
</vector>
三、layout-xml
1、控件不同大小，是否影响失真？ 在imageview下用src会失真，用background不会。想要不失真可用：app:srcCompat取代android:src
2、全用wrap_content的话以xml标注的尺寸为准，当然可以自定义大小
3、不规则图形布局，得自己计算位置等
image.png
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:textSize="18sp"
android:textColor="@color/blue"
android:text="1、3种尺寸使用svg图片当做背景的按钮，并且还用了tint着色，一点也不失真哦"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:layout_width="24dp"
android:layout_height="24dp"
android:src="@drawable/ic_alarm_black_24dp"/>
<ImageView
android:layout_width="48dp"
android:layout_height="48dp"
android:src="@drawable/ic_alarm_black_24dp"
android:tint="@color/red"/>
<!--app:srcCompat-->
<ImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:src="@drawable/ic_alarm_black_24dp"
android:tint="@color/blue"/>
<ImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:background="@drawable/ic_alarm_black_24dp"
android:backgroundTint="@color/blue"/>
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:textSize="18sp"
android:textColor="@color/blue"
android:text="2、自定义一个svg图片"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/svg_6_1" />
<ImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:background="@drawable/svg_6_2"
android:backgroundTint="@color/blue"/>
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:textSize="18sp"
android:textColor="@color/blue"
android:text="3、不规则图形的组合"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="@+id/ib_svg_green"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@drawable/svg_6_2"
android:backgroundTint="@color/green"
android:text="Green"
android:textColor="@color/white"
android:textSize="15sp"/>
<Button
android:id="@+id/ib_svg_red"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@drawable/svg_6_2"
android:backgroundTint="@color/red"
android:layout_marginStart="80dp"
android:layout_marginTop="50dp"
android:text="Red"
android:textColor="@color/white"
android:textSize="15sp"/>
<Button
android:id="@+id/ib_svg_blue"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@drawable/svg_6_2"
android:backgroundTint="@color/blue"
android:layout_marginStart="160dp"
android:text="Blue"
android:textColor="@color/white"
android:textSize="15sp"/>
</RelativeLayout>
</LinearLayout>
四、Glide支持
1、清晰
RequestBuilder<PictureDrawable> 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();
网友评论