自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

如何使用Android的VectorDrawable類繪制矢量圖

譯文
作者：核子可樂(lè)譯
移動(dòng)開發(fā)
盡管Android系統(tǒng)并不能夠直接支持SVG（即可縮放矢量圖形），但Lollipop版本卻引入了一個(gè)名為VectorDrawable的新類，其允許設(shè)計(jì)人員及開發(fā)人員以純代碼方式生成類似的繪制效果。

繪制矢量圖形非難事——如何使用Android的VectorDrawable類

內(nèi)容概述

盡管Android系統(tǒng)并不能夠直接支持SVG（即可縮放矢量圖形），但Lollipop版本卻引入了一個(gè)名為VectorDrawable的新類，其允許設(shè)計(jì)人員及開發(fā)人員以純代碼方式生成類似的繪制效果。

在今天的文章中，我們將共同學(xué)習(xí)如何利用XML文件創(chuàng)建一個(gè)VectorDrawable，并將其以動(dòng)畫方式顯示在自己的項(xiàng)目當(dāng)中。這項(xiàng)功能只能在運(yùn)行有Android 5.0或者更高版本的設(shè)備上實(shí)現(xiàn)，而且目前還不具備任何支持庫(kù)實(shí)現(xiàn)。本篇教程中的相關(guān)源文件可以通過(guò)GitHub網(wǎng)站獲取。

1. 創(chuàng)建Vector Drawable

從相似角度來(lái)看，VectorDrawable與標(biāo)準(zhǔn)SVG圖形都是利用path值繪制完成的。不過(guò)如何利用SVG path繪制圖形并不在本篇文章的探討范圍之內(nèi)，大家可以點(diǎn)擊此處從W3C網(wǎng)站處獲取必要的說(shuō)明資料。在本文當(dāng)中，我們只需要了解到path標(biāo)簽的作用是進(jìn)行圖形繪制即可。讓我們首先從SVG文件入手，看看以下圖形是如何被繪制出來(lái)的：

這一圖形共由五個(gè)主要部分所組成：

一個(gè)圓角四邊形作為CPU主體，該四邊形由兩條拱狀弧線構(gòu)成。

四組各自包含五根線條的圖形，用于充當(dāng)CPU的外延線路。

以下代碼所示為如何以SVG方式繪制以上圖形：

  1. <?xml version="1.0" encoding="utf-8"?> 
  2.   
  3. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
  4. <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
  5.      width="512px" height="512px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"> 
  6. <path id="cpu" d=" 
  7.     M341.087,157.478c7.417,0,13.435,6.018,13.435,13.435v170.174 c0,7.417-6.018,13.435-13.435,13.435H170.913 c-7.417,0-13.435-6.018-13.435-13.435V170.913 c0-7.417,6.018-13.435,13.435-13.435H341.087z 
  8.     M390.348,157.478 c0-19.785-16.041-35.826-35.826-35.826H157.479c-19.785,0-35.826,16.041-35.826,35.826v197.043 c0,19.785,16.041,35.826,35.826,35.826h197.043c19.785 0,35.826-16.041,35.826-35.826V157.478z 
  9.   
  10.     M193.304,408.261V462h-17.913 v-53.739H193.304z 
  11.     M264.957,408.261V462h-17.914v-53.739H264.957z 
  12.     M300.783,408.261V462h-17.914v-53.739H300.783z 
  13.     M229.13,408.261 V462h-17.913v-53.739H229.13z 
  14.     M336.609,408.261V462h-17.914v-53.739H336.609z 
  15.   
  16.     M193.304,50v53.739h-17.913V50H193.304z 
  17.     M264.957,50 v53.739h-17.914V50H264.957z 
  18.     M300.783,50v53.739h-17.914V50H300.783z 
  19.     M229.13,50v53.739h-17.913V50H229.13z 
  20.     M336.609,50v53.739 h-17.914V50H336.609z 
  21.   
  22.     M408.261,318.695H462v17.914h-53.739V318.695z 
  23.     M408.261,247.043H462v17.914h-53.739V247.043z 
  24.     M408.261,211.217 H462v17.913h-53.739V211.217z 
  25.     M408.261,282.869H462v17.914h-53.739V282.869z 
  26.     M408.261,175.391H462v17.913h-53.739V175.391z 
  27.   
  28.     M50,318.695h53.739v17.914H50V318.695z 
  29.     M50,247.043h53.739v17.914H50V247.043z 
  30.     M50,211.217h53.739v17.913H50V211.217z 
  31.     M50,282.869 h53.739v17.914H50V282.869z 
  32.     M50,175.391h53.739v17.913H50V175.391z" /> 
  33. </svg> 

雖然看起來(lái)有點(diǎn)繁雜，但大家其實(shí)用不著糾結(jié)于以上代碼的具體含義，而且這完全不會(huì)影響到我們接下來(lái)要進(jìn)行的VectorDrawable繪制工作。不過(guò)需要強(qiáng)調(diào)的是，我將前面提到的五大圖形組成部分在代碼中作為獨(dú)立的區(qū)塊來(lái)處理，這是為了增強(qiáng)代碼內(nèi)容的可讀性。

首先，我們需要利用兩條拱形弧線來(lái)繪制出圓角四邊形，而在接下來(lái)的內(nèi)容中我們會(huì)探討如何分別表現(xiàn)出上、下、左、右四個(gè)方位的外延線條。為了將上述SVG代碼轉(zhuǎn)化為VectorDrawable，大家首先需要在XML當(dāng)中定義vector對(duì)象。以下代碼提取自本篇文章示例代碼當(dāng)中的vector_drawable_cpu.xml文件。

  1. <vector xmlns:android="http://schemas.android.com/apk/res/android" 
  2.     android:height="64dp" 
  3.     android:width="64dp" 
  4.     android:viewportHeight="600" 
  5.     android:viewportWidth="600" > 
  6.       
  7. </vector> 

在此之后，大家可以向其中添加path數(shù)據(jù)。下列代碼同樣被拆分成了五個(gè)不同的path標(biāo)簽而非將其作為整體處理，這當(dāng)然也是為了保證內(nèi)容的可讀性。

  1.  <vector xmlns:android="http://schemas.android.com/apk/res/android" 
  2.     android:height="64dp" 
  3.     android:width="64dp" 
  4.     android:viewportHeight="600" 
  5.     android:viewportWidth="600" > 
  6.   
  7.         <path 
  8.             android:name="cpu" 
  9.             android:fillColor="#000000" 
  10.             android:pathData=" 
  11.                 M341.087,157.478 c7.417,0,13.435,6.018,13.435,13.435 v170.174c0,7.417-6.018,13.435-13.435,13.435 H170.913 c-7.417,0-13.435-6.018-13.435-13.435V170.913c0-7.417,6.018-13.435,13.435-13.435H341.087z 
  12.                 M390.348,157.478 c0-19.785-16.041-35.826-35.826-35.826H157.479c-19.785,0-35.826,16.041-35.826,35.826v197.043 c0,19.785,16.041,35.826,35.826,35.826h197.043c19.785,0,35.826-16.041,35.826-35.826V157.478z" 
  13.         /> 
  14.   
  15.         <path 
  16.             android:name="wires_bottom" 
  17.             android:fillColor="#000000" 
  18.             android:pathData=" 
  19.                 M193.304,408.261V462h-17.913 v-53.739H193.304z 
  20.                 M264.957,408.261V462h-17.914v-53.739H264.957z 
  21.                 M300.783,408.261V462h-17.914v-53.739H300.783z 
  22.                 M229.13,408.261 V462h-17.913v-53.739H229.13z 
  23.                 M336.609,408.261V462h-17.914v-53.739H336.609z" 
  24.         /> 
  25.   
  26.         <path 
  27.             android:name="wires_top" 
  28.             android:fillColor="#000000" 
  29.             android:pathData=" 
  30.                 M193.304,50v53.739h-17.913V50H193.304z 
  31.                 M264.957,50 v53.739h-17.914V50H264.957z 
  32.                 M300.783,50v53.739h-17.914V50H300.783z 
  33.                 M229.13,50v53.739h-17.913V50H229.13z 
  34.                 M336.609,50v53.739 h-17.914V50H336.609z" 
  35.         /> 
  36.   
  37.         <path 
  38.             android:name="wires_right" 
  39.             android:fillColor="#000000" 
  40.             android:pathData=" 
  41.                 M408.261,318.695H462v17.914h-53.739V318.695z 
  42.                 M408.261,247.043H462v17.914h-53.739V247.043z 
  43.                 M408.261,211.217 H462v17.913h-53.739V211.217z 
  44.                 M408.261,282.869H462v17.914h-53.739V282.869z 
  45.                 M408.261,175.391H462v17.913h-53.739V175.391z" 
  46.         /> 
  47.           
  48.         <path 
  49.             android:name="wires_left" 
  50.             android:fillColor="#000000" 
  51.             android:pathData=" 
  52.                 M50,318.695h53.739v17.914H50V318.695z 
  53.                 M50,247.043h53.739v17.914H50V247.043z 
  54.                 M50,211.217h53.739v17.913H50V211.217z 
  55.                 M50,282.869 h53.739v17.914H50V282.869z 
  56.                 M50,175.391h53.739v17.913H50V175.391z" 
  57.         /> 
  58.   
  59. </vector> 

正如大家所見，每個(gè)path片段都只需要利用pathData屬性進(jìn)行繪制?，F(xiàn)在我們可以將VectorDrawable XML文件作為一個(gè)可繪制對(duì)象納入到標(biāo)準(zhǔn)ImageView當(dāng)中，而且其能夠根據(jù)應(yīng)用程序的實(shí)際需要任意進(jìn)行尺寸縮放——完全不需要再修改任何Java代碼。

2. 為Vector Drawables添加動(dòng)畫效果

現(xiàn)在我們已經(jīng)了解了如何以純代碼方式創(chuàng)建圖形，接下來(lái)要做的是找點(diǎn)樂(lè)子——為其添加動(dòng)畫效果。在以下動(dòng)畫中，大家會(huì)發(fā)現(xiàn)作為延伸線路的各組線條會(huì)不斷指向并遠(yuǎn)離CPU本體進(jìn)行移動(dòng)。

為了達(dá)到這一目標(biāo)，大家需要將包含動(dòng)畫效果的每個(gè)片段包含在一個(gè)<group>標(biāo)簽當(dāng)中。經(jīng)過(guò)修改的vector_drawable_cpu.xml版本將如下所示：

  1. <vector xmlns:android="http://schemas.android.com/apk/res/android" 
  2.     android:height="64dp" 
  3.     android:width="64dp" 
  4.     android:viewportHeight="600" 
  5.     android:viewportWidth="600" > 
  6.   
  7.     <group 
  8.         android:name="cpu_box"> 
  9.         <path 
  10.             android:name="cpu" 
  11.             android:fillColor="#000000" 
  12.             android:pathData=" 
  13.             M341.087,157.478 c7.417,0,13.435,6.018,13.435,13.435 v170.174c0,7.417-6.018,13.435-13.435,13.435 H170.913 c-7.417,0-13.435-6.018-13.435-13.435V170.913c0-7.417,6.018-13.435,13.435-13.435H341.087z 
  14.             M390.348,157.478 c0-19.785-16.041-35.826-35.826-35.826H157.479c-19.785,0-35.826,16.041-35.826,35.826v197.043 c0,19.785,16.041,35.826,35.826,35.826h197.043c19.785,0,35.826-16.041,35.826-35.826V157.478z "/> 
  15.     </group> 
  16.     <group 
  17.         android:name="bottom"> 
  18.         <path 
  19.             android:name="wires_bottom" 
  20.             android:fillColor="#000000" 
  21.             android:pathData=" 
  22.         M193.304,408.261V462h-17.913 v-53.739H193.304z 
  23.         M264.957,408.261V462h-17.914v-53.739H264.957z 
  24.         M300.783,408.261V462h-17.914v-53.739H300.783z 
  25.         M229.13,408.261 V462h-17.913v-53.739H229.13z 
  26.         M336.609,408.261V462h-17.914v-53.739H336.609z" /> 
  27.     </group> 
  28.     <group android:name="top"> 
  29.         <path 
  30.             android:name="wires_top" 
  31.             android:fillColor="#000000" 
  32.             android:pathData=" 
  33.         M193.304,50v53.739h-17.913V50H193.304z 
  34.         M264.957,50 v53.739h-17.914V50H264.957z 
  35.         M300.783,50v53.739h-17.914V50H300.783z 
  36.         M229.13,50v53.739h-17.913V50H229.13z 
  37.         M336.609,50v53.739 h-17.914V50H336.609z " /> 
  38.     </group> 
  39.     <group android:name="right"> 
  40.         <path 
  41.             android:name="wires_right" 
  42.             android:fillColor="#000000" 
  43.             android:pathData=" 
  44.         M408.261,318.695H462v17.914h-53.739V318.695z 
  45.         M408.261,247.043H462v17.914h-53.739V247.043z 
  46.         M408.261,211.217 H462v17.913h-53.739V211.217z 
  47.         M408.261,282.869H462v17.914h-53.739V282.869z 
  48.         M408.261,175.391H462v17.913h-53.739V175.391z" /> 
  49.     </group> 
  50.     <group android:name="left"> 
  51.         <path 
  52.             android:name="wires_left" 
  53.             android:fillColor="#000000" 
  54.             android:pathData=" 
  55.         M50,318.695h53.739v17.914H50V318.695z 
  56.         M50,247.043h53.739v17.914H50V247.043z 
  57.         M50,211.217h53.739v17.913H50V211.217z 
  58.         M50,282.869 h53.739v17.914H50V282.869z 
  59.         M50,175.391h53.739v17.913H50V175.391z" /> 
  60.     </group> 
  61.   
  62. </vector> 

接下來(lái)，我們需要為每個(gè)動(dòng)畫類型創(chuàng)建animator文件。在本次示例中，每組線路各使用一個(gè)animator，這就意味著共需要四個(gè)animator。以下代碼所示為上方線路的動(dòng)畫效果，大家還需要為下、左、右線路設(shè)定類似的效果。每個(gè)animator XML文件都被包含在了本項(xiàng)目的示例代碼當(dāng)中。

  1.  <?xml version="1.0" encoding="utf-8"?> 
  2. <set xmlns:android="http://schemas.android.com/apk/res/android"> 
  3.     <objectAnimator 
  4.         android:propertyName="translateY" 
  5.         android:valueType="floatType" 
  6.         android:valueFrom="0" 
  7.         android:valueTo="-10" 
  8.         android:repeatMode="reverse" 
  9.         android:repeatCount="infinite" 
  10.         android:duration="250" /> 
  11. </set> 

如大家所見，propertyName被設(shè)定為translateY，這意味著該動(dòng)畫將沿Y軸方向移動(dòng)。而valueFrom與valueTo則控制著位移的起點(diǎn)與終點(diǎn)。通過(guò)將repeatMode設(shè)置為reverse而repeatCount設(shè)置為infinite，整個(gè)動(dòng)畫會(huì)一直循環(huán)下去，其效果則在VectorDrawable處體現(xiàn)出來(lái)。該動(dòng)畫的duration被設(shè)定為250，其時(shí)長(zhǎng)單位為毫秒。

為了將該動(dòng)畫應(yīng)用到自己的可繪制文件當(dāng)中，大家需要?jiǎng)?chuàng)建一個(gè)新的animated-vector XML文件，從而將這些animator分配給各VectorDrawable組。以下代碼的作用是創(chuàng)建該animated_cpu.xml文件。

  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <animated-vector xmlns:android="http://schemas.android.com/apk/res/android" 
  3.     android:drawable="@drawable/vector_drawable_cpu"> 
  4.   
  5.     <target 
  6.         android:animation="@animator/pulse_top" 
  7.         android:name="top" /> 
  8.   
  9.     <target 
  10.         android:animation="@animator/pulse_right" 
  11.         android:name="right" /> 
  12.   
  13.     <target 
  14.         android:animation="@animator/pulse_left" 
  15.         android:name="left" /> 
  16.   
  17.     <target 
  18.         android:animation="@animator/pulse_bottom" 
  19.         android:name="bottom" /> 
  20. </animated-vector> 

當(dāng)所有必要的XML文件都已經(jīng)準(zhǔn)備完成后，大家就可以將animated_cpu.xml加入到ImageView當(dāng)中進(jìn)行顯示了。

  1. <ImageView 
  2.     android:id="@+id/cpu" 
  3.     android:layout_width="64dp" 
  4.     android:layout_height="64dp" 
  5.     android:src="@drawable/animated_cpu" /> 

要開始播放動(dòng)畫效果，大家需要從ImageView當(dāng)中獲取Animatable實(shí)例并調(diào)用start。

  1.  ImageView mCpuImageView = (ImageView) findViewById( R.id.cpu ); 
  2. Drawable drawable = mCpuImageView.getDrawable(); 
  3. if (drawable instanceof Animatable) { 
  4.     ((Animatable) drawable).start(); 
  5. } 

在start被調(diào)用之后，CPU圖形當(dāng)中的線路圖形就會(huì)開始移動(dòng)——整個(gè)過(guò)程只需要使用少量Java代碼即可實(shí)現(xiàn)。

3. Vector Drawables的變化方式

對(duì)于VectorDrawable來(lái)說(shuō)，最常見的一種使用方式就是將一個(gè)圖形轉(zhuǎn)化至另一個(gè)圖形，例如操作欄中的圖標(biāo)由漢堡變成箭頭。要做到這一點(diǎn)，源與目標(biāo)path二者都必須具備同樣的格式以保證元素?cái)?shù)量上的一致。在本次示例中，我們將如前文圖片所示嘗試將左箭頭轉(zhuǎn)化為右箭頭。

  1. <string name="left_arrow">M300,70 l 0,70 -70,-70 0,0 70,-70z</string> 
  2.  
  3. <string name="right_arrow">M300,70 l 0,-70 70,70 0,0 -70,70z</string> 

接下來(lái)，大家需要利用path為left_arrow建立一個(gè)初始drawable。在示例代碼中，我們將其命名為vector_drawable_left_arrow.xml。

  1. <vector xmlns:android="http://schemas.android.com/apk/res/android" 
  2.    android:height="64dp" 
  3.    android:width="64dp" 
  4.    android:viewportHeight="600" 
  5.    android:viewportWidth="600" > 
  6.  
  7.    <path 
  8.        android:name="left_arrow" 
  9.        android:fillColor="#000000" 
  10.        android:pathData="@string/left_arrow"/> 
  11. /vector> 

CPU動(dòng)畫與這里提到的圖形變化示例之間，最主要的區(qū)別就體現(xiàn)在animator_left_right_arrow.xml文件當(dāng)中。

  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <set xmlns:android="http://schemas.android.com/apk/res/android"> 
  3.   
  4.     <objectAnimator 
  5.         android:duration="1000" 
  6.         android:propertyName="pathData" 
  7.         android:valueFrom="@string/left_arrow" 
  8.         android:valueTo="@string/right_arrow" 
  9.         android:valueType="pathType" 
  10.         android:repeatMode="reverse" 
  11.         android:repeatCount="-1"/> 
  12.   
  13. </set> 

大家可能已經(jīng)注意到了，valueFrom與valueTo兩項(xiàng)屬性會(huì)引用左箭頭與右箭頭的path數(shù)據(jù)，valueType被設(shè)定為pathType而propertyName則被設(shè)定為pathData。當(dāng)以上設(shè)定完成之后，該animator將明確如何將一組path數(shù)據(jù)轉(zhuǎn)化為另一組。當(dāng)該animator結(jié)束之后，我們還需要利用新的animated-vector對(duì)象將VectorDrawable分配至objectAnimator。

  1.  <?xml version="1.0" encoding="utf-8"?> 
  2. <animated-vector xmlns:android="http://schemas.android.com/apk/res/android" 
  3.     android:drawable="@drawable/vector_drawable_left_arrow"> 
  4.   
  5.     <target 
  6.         android:name="left_arrow" 
  7.         android:animation="@animator/animator_left_right_arrows" /> 
  8. </animated-vector> 

***，大家還需要將該動(dòng)畫drawable分配至ImageView，而后在自己的Java代碼中開始運(yùn)行。

  1.  <ImageView  
  2.     android:id="@+id/left_right_arrow"  
  3.     android:layout_width="64dp"  
  4.     android:layout_height="64dp"  
  5.     android:layout_below="@+id/cpu"  
  6.     android:src="@drawable/animated_arrow" />  
  7.  mArrowImageView = (ImageView) findViewById( R.id.left_right_arrow );  
  8. drawable = mArrowImageView.getDrawable();  
  9. if (drawable instanceof Animatable) {  
  10.     ((Animatable) drawable).start();  
  11. } 

總結(jié)
正如大家所見，VectorDrawable類非常易于使用而且允許開發(fā)者以自定義方式實(shí)現(xiàn)大量簡(jiǎn)單的動(dòng)畫效果。盡管VectorDrawable類目前只適用于運(yùn)行有Android 5.0以及更高版本的設(shè)備，但隨著更多設(shè)備開始支持Lollipop及其后續(xù)Android版本，其必將發(fā)揮更為重要的作用。

責(zé)任編輯：chenqingxiang 來(lái)源： 51CTO
VectorDrawableAndroid
相關(guān)推薦

2015-09-09 09:12:28

ios矢量圖顏色

2021-03-22 10:05:03

算法可視化大數(shù)據(jù)

2024-03-04 00:06:00

位圖GIF矢量圖

2010-06-08 10:35:38

UML圖

2020-12-20 08:22:05

PythonCOVID-19全球擴(kuò)散圖

2010-06-09 08:59:30

UML活動(dòng)圖

2010-06-09 18:56:44

UML用例圖

2013-09-09 15:29:50

設(shè)計(jì)師圖標(biāo)集

2024-10-08 10:30:00

AI生成技術(shù)

2023-11-08 11:00:56

Graphite開源

2010-06-29 11:16:02

UML畫類圖

2015-07-13 18:13:47

Xcode矢量圖像代碼片段

2010-07-12 11:36:32

UML活動(dòng)圖

2013-07-23 14:07:13

矢量圖標(biāo)設(shè)計(jì)師圖標(biāo)集

2012-03-18 19:52:47

Web設(shè)計(jì)

2013-04-26 11:17:48

2013-04-26 10:26:08

2024-04-08 10:30:58

模型AI

2013-12-04 16:07:27

Android游戲引擎libgdx教程

2024-08-20 16:44:15

人工智能大腦地圖
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)