Android 使用Vector XML文件創建矢量圖片資源

http://blog.csdn.net/klxh2009/article/details/51121034 本文出自【付小華的博客】

Vector：矢量的意思

我們知道，在安卓開發過程中，經常使用到png格式的圖片資源，這種圖片需要有不同分辨率來做屏幕適配，當圖片數量很大時，被打包的圖片資源佔據了app的絕大部分容量，使用Vector來創建圖片，將大大減少png圖片的使用，提高開發性能。廢話不多說，可以先看下效果：

這就是一個矢量圖，下面我來講講怎麼來實現它吧：

所需工具：

1、阿里巴巴矢量圖庫(http://www.iconfont.cn/)

2、GIMP(GNU Image Manipulation Program)

其中，GIMP我提供了兩種下載方式：

官網：http://www.gimp.org/

百度網盤：http://pan.baidu.com/s/1sl9VnRZ

3、Android Studio

實現步驟：

1、從阿里巴巴矢量圖庫下載需要的svg矢量圖

(注意這裏的尺寸)

2、使用已經安裝好了的GIMP打開下載的這個矢量圖

3、選擇Tool Options下的魔棒點擊剛剛打開的五角星

（這是選中之後的效果，出現螞蟻線，，，會PS的同學應該對這個很明白的）

4、然後再按圖示操作：選擇【Select】-->【To Path】，就可以看到右邊的Brushes窗口下的Paths選項裏多了個路徑。

5、導出路徑

導出時選擇自己需要導出到的路勁，輸入文件名，建議導出使用xml格式的文件，我這裏爲“star.xml”，然後點擊save

6、打開star.xml文件，可以看到好多數字，在path節點下的d裏，這裏的值就是我們需要的

7、我們使用Android Studio來寫代碼，在drawable目錄下新建一個star_path.xml文件，內容如下：

其中需要注意這裏的viewportHeight和viewportWidth值，設置太小就不能看到它的預覽圖了

1. <?xml version="1.0" encoding="utf-8"?>
2. <vector xmlns:android="http://schemas.android.com/apk/res/android"
3. android:width="200dp"
4. android:height="200dp"
5. android:viewportHeight="200"
6. android:viewportWidth="200">
7. <path
8. android:fillColor="#00BB9C"
9. android:pathData="M 120.25,62.00
10. C 121.56,64.62 124.79,71.70 126.63,73.44
11. 129.39,76.04 138.05,76.58 142.00,77.13
12. 142.00,77.13 178.00,82.00 178.00,82.00
13. 174.13,90.18 158.14,103.06 150.99,110.04
14. 148.73,112.24 143.25,117.35 142.11,120.00
15. 140.83,122.98 142.80,131.54 143.42,135.00
16. 143.42,135.00 150.00,171.00 150.00,171.00
17. 142.14,169.53 124.31,158.91 116.00,154.75
18. 113.30,153.40 105.49,149.02 103.00,148.88
19. 99.54,148.69 91.24,153.75 88.00,155.58
20. 81.75,159.10 61.89,169.90 56.00,171.00
21. 56.00,171.00 61.80,136.00 61.80,136.00
22. 61.80,136.00 63.60,120.58 63.60,120.58
23. 63.60,120.58 53.00,109.00 53.00,109.00
24. 53.00,109.00 27.00,82.00 27.00,82.00
25. 27.00,82.00 63.00,77.13 63.00,77.13
26. 67.09,76.56 75.64,76.00 78.61,73.44
27. 81.01,71.37 84.64,63.21 86.25,60.00
28. 86.25,60.00 102.00,28.00 102.00,28.00
29. 106.72,32.72 116.58,54.66 120.25,62.00 Z
30. M 91.25,75.00
31. C 90.14,77.23 88.11,81.97 86.51,83.57
32. 83.98,86.09 79.42,86.24 76.00,86.73
33. 76.00,86.73 51.00,90.00 51.00,90.00
34. 51.00,90.00 68.00,108.00 68.00,108.00
35. 68.00,108.00 75.36,117.00 75.36,117.00
36. 75.36,117.00 74.41,128.00 74.41,128.00
37. 74.41,128.00 71.00,151.00 71.00,151.00
38. 75.21,149.77 88.51,142.63 93.00,140.14
39. 96.31,138.31 100.02,135.40 104.00,136.17
40. 104.00,136.17 135.00,151.00 135.00,151.00
41. 135.00,151.00 130.75,127.00 130.75,127.00
42. 130.75,127.00 130.11,116.00 130.11,116.00
43. 130.11,116.00 137.00,108.00 137.00,108.00
44. 137.00,108.00 155.00,90.00 155.00,90.00
45. 155.00,90.00 130.00,86.73 130.00,86.73
46. 130.00,86.73 119.39,84.15 119.39,84.15
47. 119.39,84.15 113.14,73.00 113.14,73.00
48. 113.14,73.00 103.00,53.00 103.00,53.00
49. 99.46,57.45 94.06,69.34 91.25,75.00 Z" />
50. </vector>

8、最後在佈局文件裏使用：

1. <?xml version="1.0" encoding="utf-8"?>
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. xmlns:tools="http://schemas.android.com/tools"
4. android:layout_width="match_parent"
5. android:layout_height="match_parent"
6. android:paddingBottom="@dimen/activity_vertical_margin"
7. android:paddingLeft="@dimen/activity_horizontal_margin"
8. android:paddingRight="@dimen/activity_horizontal_margin"
9. android:paddingTop="@dimen/activity_vertical_margin"
10. tools:context="com.shenhua.vectordemo.MainActivity">
12. <TextView
13. android:layout_width="wrap_content"
14. android:layout_height="wrap_content"
15. android:text="Hello World!" />
17. <ImageView
18. android:layout_width="wrap_content"
19. android:layout_height="wrap_content"
20. android:layout_centerInParent="true"
21. android:src="@drawable/star_path" />
22. </RelativeLayout>

目錄結構：