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可多端读取使用
  • 主要缺点:难以处理复杂图像,比如风景图片

工具

绘画使用-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、不规则图形布局,得自己计算位置等

《Android 使用自定义SVG》 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();
    原文作者:Kandy_JS
    原文地址: https://www.jianshu.com/p/46bc6a6ed466
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞