????今天我在看某腦SVG視頻和網(wǎng)上查資料時(shí),發(fā)現(xiàn)了和某位大佬的寫文章的某種巧合(報(bào)以微妙的笑容)铡恕。因?yàn)閺?qiáng)迫癥琢感,所以我想總結(jié)性的抄襲一下。不論是否被發(fā)現(xiàn)探熔,一切榮譽(yù)歸屬于大佬驹针。
????抄襲對象大佬: Android Vector曲折的兼容之路
引導(dǎo):
概念
SVG
????即Scalable Vector Graphics 可伸縮矢量圖形,這種圖像格式在前端中已經(jīng)使用的非常廣泛了诀艰。詳見WIKI:https://en.wikipedia.org/wiki/Scalable_Vector_Graphics
????什么是矢量圖像柬甥,什么是位圖圖像?
- 矢量圖像:SVG是W3C 推出的一種開放標(biāo)準(zhǔn)的文本式矢量圖形描述語言,他是基于XML的其垄、專門為網(wǎng)絡(luò)而設(shè)計(jì)的圖像格式苛蒲,SVG是一種采用XML來描述二維圖形的語言,所以它可以直接打開xml文件來修改和編輯绿满。
-
位圖圖像:位圖圖像的存儲(chǔ)單位是圖像上每一點(diǎn)的像素值臂外,因而文件會(huì)比較大,像GIF、JPEG漏健、PNG等都是位圖圖像格式嚎货。
????在android開發(fā)中,不能直接使用SVG文件作為圖片文件蔫浆,否則就會(huì)這樣:
????這個(gè)時(shí)候殖属,我們就需要用到Vector。
Vector
????在Android中指的是Vector Drawable瓦盛,也就是Android中的矢量圖洗显,可以說Vector就是Android中的SVG實(shí)現(xiàn)(并不是支持全部的SVG語法,現(xiàn)已支持的完全足夠用了)詳見:https://developer.android.com/reference/android/graphics/drawable/VectorDrawable.html
????補(bǔ)充:Vector圖像剛發(fā)布的時(shí)候,是只支持Android 5.0+的原环,但是在之后挠唆,谷歌進(jìn)行了兼容:
1. Gradle Plugin 1.5的兼容
????從Gradle Plugin 1.5開始,Google支持了一種兼容方式扮念,即在Android L之上,使用Vector碧库,而在L之下柜与,則使用Gradle將Vector生成PNG圖像。
????Android gradle plugin 1.5發(fā)布以后嵌灰,加入了一個(gè)跟VectorDrawable有關(guān)的新功能弄匕。Android build tools 提供了另外一種解決兼容性的方案,如果編譯的版本是5.0之前的版本沽瞭,那么build tools 會(huì)把VectorDrawable生成對應(yīng)的png圖片迁匠,這樣在5.0以下的版本則使用的是生成的png圖,而在5.0以上的版本中則使用VectorDrawable.在build.gradle添加generatedDensities配置驹溃,可以配置生成的png圖片的密度城丧。
2. AppCompat23.2的兼容
????從com.android.support:appcompat-v7的版本為23.2.0起,Vector可以兼容到Android 2.1以上的所有系統(tǒng)豌鹤,只需要
compile 'com.android.support:appcompat-v7:23.2.0'//及以上
????23.2.0及以上的版本就可以了亡哄。
????注意事項(xiàng):所謂的兼容并非能夠使用SVG了,本質(zhì)還是生成了PNG圖片來使用布疙。
Vector Drawable:
????Android 5.0發(fā)布的時(shí)候蚊惯,Google提供了Vector的支持,即:Vector Drawable類灵临。
????Vector Drawable相對于普通的Drawable來說截型,有以下幾個(gè)好處:
- Vector圖像可以自動(dòng)進(jìn)行適配,不需要通過分辨率來設(shè)置不同的圖片儒溉,這在我眼里是最好的地方宦焦。
- Vector圖像可以大幅減少圖像的體積,同樣一張圖,用Vector來實(shí)現(xiàn)赶诊,可能只有PNG的幾十分之一笼平,這從減少apk大小上很有意義,但有大佬發(fā)現(xiàn)舔痪,其實(shí)并不是完全就能減少寓调,當(dāng)PNG只有十幾k,用Vector反而變大了锄码。
- 使用簡單夺英,很多設(shè)計(jì)工具如PhotoShop、Illustrator滋捶,都可以直接導(dǎo)出SVG圖像痛悯,從而轉(zhuǎn)換成Vector圖像,夠靈活重窟,不用寫很多代碼就可以實(shí)現(xiàn)非常復(fù)雜的動(dòng)畫载萌。
- 成熟、穩(wěn)定巡扇,前端已經(jīng)非常廣泛的進(jìn)行使用了扭仁。
Vector 語法簡介
????Android以一種簡化的方式對SVG進(jìn)行了兼容,這種方式就是通過使用它的Path標(biāo)簽厅翔,通過Path標(biāo)簽乖坠,幾乎可以實(shí)現(xiàn)SVG中的其它所有標(biāo)簽,雖然可能會(huì)復(fù)雜一點(diǎn)刀闷,但這些東西都是可以通過工具來完成的熊泵,所以,不用擔(dān)心寫起來會(huì)很復(fù)雜甸昏。
- Path指令解析如下所示:
M = moveto(M X,Y) :將畫筆移動(dòng)到指定的坐標(biāo)位置顽分,相當(dāng)于 android Path 里的moveTo()
L = lineto(L X,Y) :畫直線到指定的坐標(biāo)位置,相當(dāng)于 android Path 里的lineTo()
H = horizontal lineto(H X):畫水平線到指定的X坐標(biāo)位置
V = vertical lineto(V Y):畫垂直線到指定的Y坐標(biāo)位置
C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY):三次貝賽曲線
S = smooth curveto(S X2,Y2,ENDX,ENDY) 同樣三次貝塞爾曲線施蜜,更平滑
Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY):二次貝賽曲線
T = smooth quadratic Belzier curveto(T ENDX,ENDY):映射 同樣二次貝塞爾曲線怯邪,更平滑
A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y):弧線 ,相當(dāng)于arcTo()
Z = closepath():關(guān)閉路徑(會(huì)自動(dòng)繪制鏈接起點(diǎn)和終點(diǎn))
- 使用原則:
- 坐標(biāo)軸為以(0,0)為中心花墩,X軸水平向右悬秉,Y軸水平向下
- 所有指令大小寫均可。大寫絕對定位冰蘑,參照全局坐標(biāo)系和泌;小寫相對定位,參照父容器坐標(biāo)系
- 指令和數(shù)據(jù)間的空格可以省略
- 同一指令出現(xiàn)多次可以只用一個(gè)
????注意事項(xiàng):
- ’M’處理時(shí)祠肥,只是移動(dòng)了畫筆武氓, 沒有畫任何東西。
- 關(guān)于這些語法,開發(fā)者不需要全部精通县恕,而是能夠看懂即可东羹,這些path標(biāo)簽及數(shù)據(jù)生成都可以交給美工工具和網(wǎng)上的網(wǎng)站來實(shí)現(xiàn):
1)可以使用SVG的編輯器來進(jìn)行SVG圖像的編寫,例如:http://editor.method.ac/
2)有些網(wǎng)站可以找到SVG資源
SVG下載地址: http://www.shejidaren.com/8000-flat-icons.html
http://www.flaticon.com/
阿里的iconfont :http://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.1
我個(gè)人喜歡后面那個(gè)忠烛。
3)對SVG文件用http://inloop.github.io/svg2android/ 生成 VectorDrawable xml代碼
4)使用Android Studio自帶功能Vector Asset Studio属提,完成SVG添加,將SVG文件轉(zhuǎn)成Vector美尸。
補(bǔ)充:也可參考網(wǎng)址http://www.reibang.com/p/d6c39f2dd5e7
靜態(tài)Vector圖像
- 生成圖片
????例如: 我們用as生成一個(gè)矩形
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="200dp"
android:height="200dp"
android:viewportHeight="500"
android:viewportWidth="500">
<path
android:name="square"
android:fillColor="#000000"
android:pathData="M100,100 L400,100 L400,400 L100,400 z"/>
</vector>
????解釋頭部的幾個(gè)標(biāo)簽:
????android:width /android:height:定義圖片的寬高
????android:viewportHeight / android:viewportWidth:定義圖像被劃分的比例大小,例如例子中的500师坎,即把200dp大小的圖像劃分成500份恕酸,后面Path標(biāo)簽中的坐標(biāo),就全部使用的是這里劃分后的坐標(biāo)系統(tǒng)胯陋。
????這樣做有一個(gè)非常好的作用蕊温,就是將圖像大小與圖像分離,后面可以隨意修改圖像大小遏乔,而不需要修改PathData中的坐標(biāo)义矛。
- 在控件中使用
- 使用ImageView,就當(dāng)普通的圖片使用就可以了按灶。
<ImageView
android:id="@+id/iv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/vector_image"/>
????或者代碼設(shè)置:
ImageView iv = (ImageView) findViewById(R.id.iv);
iv.setImageResource(R.drawable.vector_image);
iv.setBackgroundResource(R.drawable.vector_image);//setBackgroundResource也是可以設(shè)置Vector的API
????注意事項(xiàng):
-
當(dāng)我的minSdkVersion 小于21時(shí)症革,不在5.0+筐咧,則不能對Vector直接使用app:srcCompat鸯旁,否則會(huì)報(bào)錯(cuò),需要去build.gradle里去設(shè)置一下量蕊。后面會(huì)在兼容里講【1】铺罢。如果是minSdkVersion>=21,當(dāng)然是不會(huì)報(bào)錯(cuò)的了残炮。
- 使用的都是普通的ImageView韭赘,而沒有改成AppcomatImageView,這是因?yàn)槭褂昧薃ppcomat后势就,系統(tǒng)會(huì)自動(dòng)把ImageView轉(zhuǎn)換為AppcomatImageView泉瞻。
- 如果是Button,則不能直接使用app:srcCompat來直接使用Vector圖像苞冯,需要通過Selector來進(jìn)行使用袖牙,首先,創(chuàng)建兩個(gè)圖像舅锄,用于Selector的兩個(gè)狀態(tài)(寫兩個(gè)SVG的Drawable):
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/selector1" android:state_pressed="true"/>
<item android:drawable="@drawable/selector2"/>
</selector>
????非常簡單鞭达,只是把普通的Selector中的圖像換成了Vector圖像而已,接下來,在Button中使用這個(gè)Selector即可:
<Button
android:id="@+id/btn"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="@drawable/selector"/>
????然后運(yùn)行時(shí)又會(huì)發(fā)現(xiàn)有個(gè)兼容的坑畴蹭,也在下面講【2】坦仍。
動(dòng)態(tài)Vector
????動(dòng)態(tài)Vector才是Android Vector Drawable的重點(diǎn)。
????動(dòng)態(tài)的Vector需要通過animated-vector標(biāo)簽來進(jìn)行實(shí)現(xiàn)叨襟,它就像一個(gè)粘合劑繁扎,將控件與Vector圖像粘合在了一起,一個(gè)基礎(chǔ)的animated-vector代碼如下所示:
<animated-vector
xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/XXXXX1">
<target
android:name="left"
android:animation="@animator/XXXXX2"/>
</animated-vector>
????舉例:
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/path_tick" >
<target
android:name="tickCrossGroup"
android:animation="@animator/anim_path_tick2cross" />
</animated-vector>
????設(shè)置了初始顯示時(shí)的“path_tick”Vector圖像锻离,然后,target目標(biāo)是最終達(dá)到“anim_path_tick2cross”效果墓怀。
????注意事項(xiàng) :
????animated-vector在Android Studio中實(shí)際上是會(huì)報(bào)錯(cuò)的汽纠,但這個(gè)并不影響編譯和運(yùn)行,屬于Android Studio的Bug傀履。
????path_tick代碼為:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:height="120dp"
android:width="120dp"
android:viewportWidth="24"
android:viewportHeight="24">
<group>
<path
android:name="tickCrossGroup"
android:pathData="M19.6,7 L10.4,16.2 M4.8,13.4 L9,17.6"
android:strokeColor="#000"
android:strokeWidth="2"/>
</group>
</vector>
????path_tick是目標(biāo)Vector圖像虱朵,也就是靜態(tài)的Vector圖像。
????可以發(fā)現(xiàn)钓账,這里的Vector圖像有個(gè)group標(biāo)簽碴犬。group標(biāo)簽的作用有兩個(gè):
- 對Path進(jìn)行分組问潭,由于我們后面需要針對Path進(jìn)行動(dòng)畫虑啤,所以可以讓具有同樣動(dòng)畫效果的Path在同一個(gè)Group中带族。
- 拓展動(dòng)畫效果荆陆,單個(gè)的path標(biāo)簽是沒有translateX和translateY屬性的禀挫,因此無法使用屬性動(dòng)畫來控制path translateY榜掌,而group標(biāo)簽是有的檐春,所以我們需要先將相關(guān)的path標(biāo)簽元素包裹在一個(gè)個(gè)的group標(biāo)簽中况芒。
????anim_path_tick2cross代碼為為:
<set xmlns:android="http://schemas.android.com/apk/res/android">
<objectAnimator
android:duration="300"
android:propertyName="pathData"
android:valueFrom="M19.6,7 L10.4,16.2 M4.8,13.4 L9,17.6"
android:valueTo="M17.6,6.4 L6.4,17.6 M6.4,6.4 L17.6,17.6"
android:valueType="pathType"/>
</set>
????anim_path_tick2cross實(shí)際上就是利用屬性動(dòng)畫來實(shí)現(xiàn)的動(dòng)畫效果唠椭。
????android:propertyName屬性名跳纳,上文里為pathData,指的是path_tick里的
android:pathData="M19.6,7 L10.4,16.2 M4.8,13.4 L9,17.6"
????從 android:valueFrom動(dòng)畫效果到 android:valueTo贪嫂。
????當(dāng)然寺庄,也可以android:propertyName="translationX"這樣換別的動(dòng)畫屬性。
寫好了動(dòng)態(tài)Vector力崇,作為動(dòng)畫斗塘,肯定是要開啟執(zhí)行動(dòng)畫。怎么搞亮靴?
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="anim"
app:srcCompat="@drawable/path_tick2cross_anim"/>
public void anim(View view) {
ImageView imageView = (ImageView) view;
AnimatedVectorDrawableCompat animatedVectorDrawableCompat = AnimatedVectorDrawableCompat.create(this, R.drawable.path_tick2cross_anim);
imageView.setImageDrawable(animatedVectorDrawableCompat);
Drawable drawable = imageView.getDrawable();
if (drawable instanceof Animatable) {
((Animatable) drawable).start();
}
}
????判斷imageView的圖片是個(gè)動(dòng)圖馍盟,即屬于Animatable,則強(qiáng)轉(zhuǎn)并啟動(dòng)動(dòng)畫台猴。這樣不再需要?jiǎng)討B(tài)寫代碼動(dòng)畫來搞了朽合,向美工御姐撒撒嬌就好了俱两。
????注意事項(xiàng) :如果是兩個(gè)SVG進(jìn)行動(dòng)畫,path元素中從一個(gè)形狀轉(zhuǎn)變到另一個(gè)形狀曹步,這兩個(gè)形狀必須滿足:要有一致的命令(command)個(gè)數(shù)(逗號(hào)分割開的為命令)宪彩,并且每個(gè)命令的參數(shù)個(gè)數(shù)也必須一致。
版本兼容
????VectorDrawableCompat依賴于AAPT的一些功能讲婚,它能保持最近矢量圖使用的添加的屬性ID尿孔,以便他們可以在L版本之前被引用。
????在Android 5.0之前使用Vector筹麸,需要aapt來對資源進(jìn)行一些處理活合,這一過程可以在aapt的配置中進(jìn)行設(shè)置,如果沒有啟用這樣一個(gè)flag物赶,那么在5.0以下的設(shè)備上運(yùn)行就會(huì)發(fā)生android.content.res.Resources$NotFoundException白指。
- 最重要的是添加appcompat的支持,如:
compile 'com.android.support:appcompat-v7:25.3.1'
????同時(shí)酵紫,確保你使用的是AppCompatActivity而不是普通的Activity告嘲。
- 你需要在項(xiàng)目的build.gradle腳本中,增加對Vector兼容性的支持奖地,代碼如下所示:
????使用Gradle Plugin 2.0以上:
android {
defaultConfig {
vectorDrawables.useSupportLibrary = true
}
}
????使用Gradle Plugin 2.0以下橄唬,Gradle Plugin 1.5以上:
android {
defaultConfig {
// Stops the Gradle plugin’s automatic rasterization of vectors
generatedDensities = []
}
// Flag to tell aapt to keep the attribute ids around
aaptOptions {
additionalParameters "--no-version-vectors"
}
????這種兼容方式實(shí)際上是先關(guān)閉AAPT對pre-L版本使用Vector的妥協(xié),即在L版本以上参歹,使用Vector仰楚,而在L版本前,使用Gradle生成相應(yīng)的PNG圖片犬庇,generatedDensities這個(gè)數(shù)組僧界,實(shí)際上就是要生成PNG的圖片分辨率的數(shù)組,使用appcompat后就不需要這樣了械筛。
????這就是解決了【1】的問題捎泻。
- 版本不同飒炎,對DrawableContainers兼容性問題
????Google的一位開發(fā)者在博客中寫到:
First up, this functionality was originally released in 23.2.0, but then we found some memory usage and Configuration updating issues so we it removed in 23.3.0. In 23.4.0 (technically a fix release) we’ve re-added the same functionality but behind a flag which you need to manually enable.
????實(shí)際上埋哟,他們的這個(gè)改動(dòng),就影響了類似DrawableContainers(DrawableContainers which reference other drawables resources which contain only a vector resource)這樣的類郎汪,它的一個(gè)典型赤赊,就是Selector(StateListDrawable也是)。這個(gè)開發(fā)者在文中提到的flag煞赢,就是下面的這段代碼抛计,放在Activity的前面就可以了:
static {
AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);
}
????開啟這個(gè)flag后,你就可以正常使用Selector這樣的DrawableContainers了照筑。同時(shí)吹截,你還開啟了類似android:drawableLeft這樣的compound drawable的使用權(quán)限瘦陈,以及RadioButton的使用權(quán)限,以及ImageView的src屬性波俄。
????這就是解決了【2】的問題晨逝。
- 動(dòng)態(tài)Vector動(dòng)畫兼容性問題
????1) 向下兼容問題
????一說到兼容,就不得不提到坑懦铺,幾乎所有的為了兼容而做的改動(dòng)捉貌,都會(huì)留下一些不可填滿的坑,動(dòng)態(tài)Vector動(dòng)畫也不例外冬念,雖然Google已經(jīng)對Vector圖像進(jìn)行了Android 2.1以上的兼容趁窃,但對于動(dòng)態(tài)Vector動(dòng)畫,還是有很多限制的急前,例如:
????Path Morphing醒陆,即路徑變換動(dòng)畫,在Android pre-L版本下是無法使用的裆针。
???? Path Interpolation统求,即路徑插值器,在Android pre-L版本只能使用系統(tǒng)的插值器据块,不能自定義码邻。
????Path Animation,即路徑動(dòng)畫另假,這個(gè)一般使用貝塞爾曲線來代替像屋,所以沒有太大影響。
????2) 向上兼容問題
????除了在低版本上的兼容性問題边篮,在L版本以上己莺,也存在兼容性問題,即繼承了AppCompatActivity的界面戈轿,如果直接設(shè)置ImageView的srcCompat凌受,那么Path Morphing動(dòng)畫是無法生效的,因?yàn)槟J(rèn)的AppCompatActivity已經(jīng)默認(rèn)使用ImageViewCompat給轉(zhuǎn)換了思杯,但是AnimatedVectorDrawableCompat是不支持Path Morphing動(dòng)畫的胜蛉,所以,在AppCompatActivity界面里面就無效了色乾。
????解決辦法很簡單誊册,即使用代碼來給ImageView添加動(dòng)畫:
ImageView imageView = (ImageView) view;
AnimatedVectorDrawable morphing = (AnimatedVectorDrawable) getDrawable(morphing);
imageView.setImageDrawable(morphing);
if (morphing != null) {
morphing.start();
}
????注意:不要使用AnimatedVectorDrawableCompat即可。
- 抽取string兼容問題
????開發(fā)者有時(shí)候?yàn)榱舜a簡潔可能會(huì)把Vector圖像中的pathData放到string.xml中暖璧,然后在Vector圖像中引用string案怯。
????但這種方式如果通過生成png來兼容5.0以下機(jī)型的話,會(huì)報(bào)pathData錯(cuò)誤澎办,編譯器不會(huì)去讀取string.xml嘲碱,只能把pathData寫到Vector圖像中金砍,動(dòng)畫文件中也是一樣。 - 其它兼容問題
????其它非常奇怪麦锯、詭異捞魁、不能理解的兼容性問題,只能通過版本文件夾的方式來進(jìn)行兼容了离咐,例如drawable-v21和drawable谱俭,分別創(chuàng)建兩個(gè)文件名相同的資源在兩個(gè)文件夾下,這樣在21以上版本宵蛀,會(huì)使用drawable-v21的資源昆著,而其它會(huì)使用drawable下的資源。 - 即時(shí)有了兼容方式术陶,但是凑懂,還是會(huì)有一些Vector動(dòng)畫是不能兼容Android pre-L版本的,只能兼容L+梧宫。
學(xué)習(xí)Vector
????大佬的Vector動(dòng)畫Demo庫接谨,地址如下所示:
https://github.com/xuyisheng/VectorDemo
????這個(gè)Demo分為兩部分,一部分是可以兼容Android pre-L版本和L+版本的Vector動(dòng)畫塘匣,另一部分(通過Actionbar的按鈕切換)是只能兼容L+的Vector動(dòng)畫脓豪。
????注意事項(xiàng):這個(gè)能兼容和不能兼容,是因?yàn)閂ector動(dòng)畫本身的效果不能在pre-L版本兼容忌卤。不是代碼沒設(shè)置扫夜。
????每個(gè)Vector動(dòng)畫,基本都包含四部分內(nèi)容驰徊,即:
Vector:圖像資源
Animated-vector:動(dòng)畫笤闯、圖像粘合劑
ObjectAnimator:動(dòng)畫資源
代碼:啟動(dòng)動(dòng)畫
每個(gè)Vector動(dòng)畫通過這四個(gè)部分去進(jìn)行分析,就非常清晰了棍厂。
這里展示下Demo的效果圖:
VectorDrawable的性能問題:
- Bitmap的繪制效率并不一定會(huì)比Vector高颗味,它們有一定的平衡點(diǎn),當(dāng)Vector比較簡單時(shí)牺弹,其效率是一定比Bitmap高的浦马,所以,為了保證Vector的高效率例驹,Vector需要更加簡單捐韩,PathData更加標(biāo)準(zhǔn)退唠、精簡鹃锈,當(dāng)Vector圖像變得非常復(fù)雜時(shí),就需要使用Bitmap來代替了
- Vector適用于ICON瞧预、Button屎债、ImageView的圖標(biāo)等小的ICON仅政,或者是需要的動(dòng)畫效果,由于Bitmap在GPU中有緩存功能盆驹,而Vector并沒有圆丹,所以Vector圖像不能做頻繁的重繪
- Vector圖像過于復(fù)雜時(shí),不僅僅要注意繪制效率躯喇,初始化效率也是需要考慮的重要因素
參考
https://www.youtube.com/watch?v=wlFVIIstKmA&feature=youtu.be&t=6m3s
https://medium.com/@shemag8/animated-vector-drawable-e4d7743d372c#.3vkt12j20 https://github.com/jpuderer/AnimatedButton
Android vector標(biāo)簽 PathData 畫圖超詳解
Android Vector曲折的兼容之路
有個(gè)加急項(xiàng)目來了辫封,所以留待以后再更進(jìn)一步研究。