Android中使用SVG----入門

SVG 安卓開發 · 發表 2018-11-07 17:44:37

摘要： ▶ SVG是什麼？ SVG 指可伸縮向量圖形 (Scalable Vector Graphics) SVG 用來定義用於網路的基於向量的圖形 SVG 使用 XML 格式定義圖形 SVG 影象在放大或改變尺寸的情況下其圖形質量不會有所損失 ...

▶ SVG是什麼？

SVG 指可伸縮向量圖形 (Scalable Vector Graphics)
SVG 用來定義用於網路的基於 ofollow,noindex">向量的圖形
SVG 使用 XML 格式定義圖形
SVG 影象在放大或改變尺寸的情況下其圖形質量不會有所損失
SVG 是全球資訊網聯盟的標準
SVG 與諸如 DOM 和 XSL 之類的 W3C" target="_blank" rel="nofollow,noindex">W3C 標準是一個整體

▶ SVG有什麼優勢？

SVG 可被非常多的工具讀取和修改（比如記事本）
SVG 與 JPEG 和 GIF 影象比起來，尺寸更小，且可壓縮性更強。
SVG 是可伸縮的
SVG 影象可在任何的解析度下被高質量地列印
SVG 可在影象質量不下降的情況下被放大
SVG 影象中的文字是可選的，同時也是可搜尋的（很適合製作地圖）
SVG 可以與 Java 技術一起執行
SVG 是開放的標準
SVG 檔案是純粹的 XML

▶ SVG有什麼缺點？

相容不了4.0以下的版本。
它不可以被用來做自定義RatingBar（一個星星評分控制元件）的背景
SVG圖是不支援硬體加速的（所以它不能用來做圖片的佔位圖和錯誤圖）；

▶Android中如何使用？

一、 Android 5.0之後

Google在Android 5.X中提供了兩個新API支援SVG:

VectorDrawable 建立基於XML的SVG圖形

AnimatedVectorDrawable 實現動畫效果

▶VectorDrawable

①建立SVG的XML檔案

image.png

②點選建立會出現下面的介面：

選擇Android studio自帶的圖示，可以選擇顏色，但是如果是本地的SVG圖片，是不能在建立的時候更改圖片顏色的

image.png

系統自帶剪貼圖：

image.png

建立完成之後，生成的xml檔案如下：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:fillColor="#FF000000"
android:pathData="M20,11H7.83l5.59,-5.59L12,4l-8,8 8,8 1.41,-1.41L7.83,13H20v-2z"/>
</vector>

▶XML檔案中屬性說明

width，height 表示該SVG圖形的具體大小，
viewportHeight，viewportWidth 表示SVG圖形劃分比例

如果將24dp劃分為24份，如果在繪製圖形時使用座標(12,12)，則意味著該座標位於該SVG圖形正中間。

所以，如果width，height的比例與viewportHeight，viewportWidth的比例不一致，就會使圖形發生壓縮，形變。（此處參考文章： https://www.jianshu.com/p/5c81970ddf33 ）

path （X軸為橫向向右的座標軸，Y軸為豎向向下的座標軸，（0，0）為中心點）

M M = moveto(X,Y) ：將畫筆移動到（X,Y）座標位置

L L = lineto(X,Y) ：畫直線到（X,Y）座標位置

H H = horizontal lineto(X)：畫水平線到指定的X座標位置

V V = vertical lineto(Y)：畫垂直線到指定的Y座標位置

C C = curveto(X1,Y1,X2,Y2,ENDX,ENDY)：三階貝賽爾曲線

S S = smooth curveto(X2,Y2,ENDX,ENDY)

Q Q = quadratic Belzier curve(X,Y,ENDX,ENDY)：二階貝賽爾曲線

T T = smooth quadratic Belzier curveto(ENDX,ENDY)：對映

A A = elliptical Arc(RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧線

Z Z = closepath()：關閉路徑

▶XML 使用

和一般的圖片一樣，直接src呼叫就可以

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<ImageView
android:id="@+id/svg_img"
android:src="@drawable/ic_arrow_back_black_24dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

</android.support.constraint.ConstraintLayout>

▶不同主題更改顏色

package com.example.abc.svgtest;

import android.graphics.Color;
import android.support.graphics.drawable.VectorDrawableCompat;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {


@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

ImageView imageView = findViewById(R.id.svg_img);

VectorDrawableCompat vectorDrawableCompat = VectorDrawableCompat.create(getResources(),R.drawable.ic_arrow_back_black_24dp,getTheme());

//需要更改的顏色
vectorDrawableCompat.setTint(Color.GREEN);

imageView.setImageDrawable(vectorDrawableCompat);
}
}

或者可以在xml中更改顏色屬性：

例如，下圖是從本地選擇的一張SVG圖片

image.png

對應的xml如下，可以看到每個有顏色的區域都有對應的色值，可自行更改；

<vector android:height="24dp" android:viewportHeight="1024"
android:viewportWidth="1024" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="#967245" android:pathData="M497.66,236.03c-3.58,-0.51 -6.14,-3.07 -6.14,-6.66 -1.54,-21.5 -6.14,-93.7 8.19,-106.5 3.58,-3.58 23.55,1.02 33.79,3.58 3.58,1.02 6.14,4.61 5.12,8.7 -10.24,54.78 -5.63,70.14 -3.07,96.77 0.51,4.61 -3.58,8.7 -8.19,8.19l-29.7,-4.1z"/>
<path android:fillColor="#FFF278" android:pathData="M701.95,431.62c-17.92,-24.06 -23.55,-67.58 -26.11,-76.8 -38.91,-134.66 -162.82,-131.07 -162.82,-131.07S388.61,220.16 350.21,354.82c-2.56,8.7 -8.19,52.74 -26.11,76.8C266.24,508.93 107.01,823.81 422.4,950.78c16.9,6.66 31.74,12.8 53.76,7.68 12.29,-3.07 32.77,-3.58 37.38,-3.58 5.12,0 25.09,0.51 37.38,3.58 22.02,5.12 36.35,-0.51 53.76,-7.68 314.37,-126.98 155.14,-441.34 97.28,-519.17z"/>
<path android:fillColor="#353942" android:pathData="M513.54,242.69c11.26,0 112.13,3.07 145.41,118.27 0.51,1.02 1.02,4.61 1.54,7.17 3.58,18.43 10.75,52.74 27.65,74.75 34.3,46.08 115.71,193.54 79.36,324.1 -20.99,74.75 -77.82,131.07 -169.98,168.45 -10.75,4.61 -20.48,8.19 -30.72,8.19 -4.1,0 -7.68,-0.51 -12.29,-1.54 -14.34,-3.58 -36.35,-4.1 -41.47,-4.1s-27.14,0.51 -41.47,4.1c-4.1,1.02 -8.19,1.54 -12.29,1.54 -10.75,0 -19.97,-3.58 -30.72,-8.19 -91.65,-36.86 -148.99,-93.7 -169.98,-168.45 -36.35,-130.56 44.54,-278.02 79.36,-324.1 16.9,-22.53 23.55,-56.83 27.65,-74.75 0.51,-3.07 1.02,-6.14 1.54,-7.17C399.36,245.76 500.22,242.69 511.49,242.69h2.05m0,-17.41h-1.02,-1.02c-11.26,0 -125.44,3.07 -162.3,131.07 -2.56,8.7 -8.19,52.74 -26.11,76.8C265.22,510.46 105.98,825.34 421.38,952.32c12.29,5.12 23.55,9.73 37.38,9.73 5.12,0 10.24,-0.51 15.87,-2.05 12.29,-3.07 32.77,-3.58 37.38,-3.58 5.12,0 25.09,0.51 37.38,3.58 5.63,1.54 11.26,2.05 15.87,2.05 13.82,0 25.09,-4.61 37.38,-9.73 314.88,-126.98 156.16,-441.86 98.3,-519.17 -17.92,-24.06 -23.55,-67.58 -26.11,-76.8 -35.84,-128 -149.5,-131.07 -161.28,-131.07z"/>
<path android:fillColor="#353942" android:pathData="M510.46,139.78c2.56,0.51 5.63,1.02 9.73,1.54 -7.17,41.47 -5.12,59.9 -3.07,79.36l-8.7,-1.02c-2.56,-39.42 -1.02,-68.1 2.05,-79.87m-5.12,-17.92c-2.56,0 -4.61,0.51 -5.63,1.02 -14.34,13.31 -10.24,85.5 -8.19,106.5 0.51,3.58 3.07,6.14 6.14,6.66l29.7,3.58h1.02c4.1,0 7.68,-3.58 7.17,-8.19 -2.56,-27.14 -7.17,-41.98 3.07,-96.77 0.51,-3.58 -1.54,-7.68 -5.12,-8.7 -7.68,-1.54 -20.48,-4.1 -28.16,-4.1z"/>
<path android:fillColor="#60ED58" android:pathData="M523.26,135.68s68.1,-115.2 206.34,-40.96c0,0 -71.68,101.38 -206.34,40.96z"/>
<path android:fillColor="#353942" android:pathData="M637.95,64.51V81.92c20.48,0 43.01,6.14 66.05,17.92 -14.85,17.41 -45.06,44.54 -90.62,44.54 -19.97,0 -41.47,-5.12 -64,-15.36 14.34,-18.43 44.03,-47.1 89.09,-47.1l-0.51,-17.41m0,0c-76.8,0 -114.69,71.17 -114.69,71.17 34.3,19.46 64,26.62 89.6,26.62 78.34,0 116.22,-67.58 116.22,-67.58 -34.3,-22.02 -65.02,-30.21 -91.14,-30.21z"/>
<path android:fillColor="#BDFFB8" android:pathData="M548.86,129.02s69.63,-72.19 155.14,-28.67c0,0 -86.02,-56.83 -155.14,28.67z"/>
<path android:fillColor="#43CE38" android:pathData="M550.4,130.05s97.79,27.14 153.6,-29.7c0,0 -56.32,75.78 -153.6,29.7z"/>
<path android:fillColor="#FFF18D" android:pathData="M548.86,248.32s80.38,80.38 88.58,126.46 30.21,76.8 30.21,76.8 163.33,382.46 -54.78,477.7c0,0 122.88,-43.01 155.65,-165.89s-49.15,-286.72 -77.31,-315.39c-28.67,-28.67 -27.65,-81.92 -35.84,-102.4 -8.19,-20.48 -38.91,-83.97 -106.5,-97.28z"/>
<path android:fillColor="#FFF4FA" android:pathData="M548.86,248.32s91.65,34.3 102.4,122.88c5.63,46.59 35.84,86.53 35.84,86.53s188.93,270.85 -9.73,433.66c0,0 64,-27.65 90.62,-128 32.77,-122.88 -49.15,-286.72 -77.31,-315.39 -28.67,-28.67 -27.65,-81.92 -35.84,-102.4 -7.68,-20.48 -38.4,-83.97 -105.98,-97.28z"/>
<path android:fillColor="#FFE161" android:pathData="M442.37,260.61s-61.44,81.41 -58.88,111.62c3.07,32.77 -28.16,81.41 -33.79,84.99 -5.63,3.07 -114.18,257.54 31.23,456.7 0,0 -145.92,-69.12 -131.07,-239.1 12.8,-146.94 86.02,-224.77 89.6,-233.47s14.85,-27.14 26.11,-77.82c13.31,-58.88 56.32,-94.72 76.8,-102.91z"/>
</vector>

二、 Android 5.0之前

需要在專案的BaseActivity或Application中加入這句程式碼

static {
AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);
}

Android中使用SVG----入門

▶ SVG是什麼？

▶ SVG有什麼優勢？

▶ SVG有什麼缺點？

▶Android中如何使用？

一、 Android 5.0之後

▶VectorDrawable

▶XML檔案中屬性說明

width，height 表示該SVG圖形的具體大小，

viewportHeight，viewportWidth 表示SVG圖形劃分比例

path （X軸為橫向向右的座標軸，Y軸為豎向向下的座標軸，（0，0）為中心點）

▶XML 使用

▶不同主題更改顏色

例如，下圖是從本地選擇的一張SVG圖片

對應的xml如下，可以看到每個有顏色的區域都有對應的色值，可自行更改；

二、 Android 5.0之前

您可能也會喜歡…