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:路徑值，可以畫個座標圖，很快能做出簡單圖形的

<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、不規則圖形佈局，得自己計算位置等

<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();