什么是矢量圖
矢量圖 svg 是 W3C（World Wide Web ConSortium 國(guó)際互聯(lián)網(wǎng)標(biāo)準(zhǔn)組織）在2000年8月制定的一種新的二維矢量圖形格式，也是規(guī)范中的網(wǎng)絡(luò)矢量圖形標(biāo)準(zhǔn)修赞。矢量圖像用點(diǎn)和線來(lái)描述物體蛾坯，所以文件會(huì)比較小鸿脓，同時(shí)也能提供高清晰的畫(huà)面。用戶可以任意縮放圖像顯示汪茧，而不會(huì)破壞圖像的清晰度署尤、細(xì)節(jié)等∈蓖遥總體來(lái)講，SVG文件比那些GIF和JPEG格式的文件要小很多厅瞎，因而下載也很快饰潜。
只要跟著本文章的步驟保證你能很快的集成到項(xiàng)目中使用
其它文章
OkHttp3簡(jiǎn)單使用和封裝使用
Retrofit2.0+RxJava2.0封裝使用
Android開(kāi)發(fā) 多語(yǔ)言、指紋登錄和簸、手勢(shì)登錄
Android Studio 使用SVN 主干和分支合并代碼
優(yōu)缺點(diǎn)
文件小彭雾，圖像中保存的是線條和圖塊的信息，所以矢量圖形文件與分辨率和圖像大小無(wú)關(guān)锁保，只與圖像的復(fù)雜程度有關(guān)薯酝，圖像文件所占的存儲(chǔ)空間較小。
圖像可以無(wú)級(jí)縮放爽柒，對(duì)圖形進(jìn)行縮放吴菠，旋轉(zhuǎn)或變形操作時(shí)，圖形不會(huì)產(chǎn)生鋸齒效果浩村。
矢量圖縮放自由且不會(huì)失真做葵，完全適配于任何分辨率的屏幕。
最大的缺點(diǎn)是難以表現(xiàn)色彩層次豐富的逼真圖像效果心墅。
跨平臺(tái)酿矢，因?yàn)槭噶繄D是純文本格式來(lái)描述的，所以不受平臺(tái)的限制怎燥。
6.在xml中無(wú)法實(shí)時(shí)顯示圖片瘫筐。
為什么要用IconFont矢量圖標(biāo)
開(kāi)發(fā)app時(shí)候?yàn)榱诉m配不同的手機(jī)屏幕，需要切很多套圖铐姚，然后我們很繁瑣的給圖標(biāo)命名策肝，然之后放入不同的drawable文件夾，要做很多得無(wú)用功谦屑，而現(xiàn)在阿里巴巴給我們提供了矢量圖標(biāo)庫(kù)驳糯，給我節(jié)省了大量的麻煩而又無(wú)用的工作，我們不再需要往res下的資源文件夾放各種圖標(biāo)
先看一下某網(wǎng)迭代了五年項(xiàng)目的Analyze APK詳情氢橙，res資源下的圖片占據(jù)了二十多MB,這些圖片圖標(biāo)都是會(huì)用到的酝枢，所以都會(huì)打包到APK中，無(wú)疑增大了APK的大小悍手。
Analyze APK
Android 使用阿里巴巴IconFont圖標(biāo)
1. 第一步：打開(kāi)阿里巴巴IconFont官網(wǎng) ,登陸后的首頁(yè)（不用解釋怎么登陸的了吧）帘睦。
2. 第二步：點(diǎn)擊第一步 三八節(jié)項(xiàng)圖標(biāo)后袍患，然后選擇你想要的圖標(biāo)后點(diǎn)擊加入購(gòu)物車。
3. 第三步：在第二步中選擇想要的圖標(biāo)加入購(gòu)物車后點(diǎn)擊右上角的購(gòu)物車圖后竣付，點(diǎn)擊添加至項(xiàng)目诡延，如果沒(méi)有項(xiàng)目先創(chuàng)建一個(gè)項(xiàng)目。
4. 第四步：點(diǎn)擊第三步中的添加至項(xiàng)目按鈕后古胆，會(huì)跳到我的項(xiàng)目中肆良，我們后續(xù)加入圖標(biāo)都會(huì)在這里。然后點(diǎn)擊下載至本地按鈕把資源下載到本地磁盤(pán)逸绎。
5. 第五步：打開(kāi)下載的資源包惹恃，拿到iconfont.ttf文件，此文件就是我們所需要的資源棺牧。將iconfont.ttf文件復(fù)制粘貼到我們Android Studio項(xiàng)目assets文件夾中巫糙。
6. 第六步：打開(kāi)IconFont我的項(xiàng)目，找到圖標(biāo)的代碼颊乘，或者打開(kāi)我們下載的資源包中的demo_index.html也可以看到圖標(biāo)代碼参淹。
7. 第七步：把IconFont我的項(xiàng)目中的圖標(biāo)代碼添加到AndroidStudio的string.xml中。
8. 第八步：測(cè)試一波乏悄，在xml中寫(xiě)一個(gè)TextView浙值，然后再Activity中設(shè)置下Typeface。
在xml中檩小，text值設(shè)置string.xml中的name亥鸠，textSize可以設(shè)置圖標(biāo)大小，textColor可以設(shè)置圖標(biāo)的顏色识啦。
在Activity中代碼：首先通過(guò)assets中的iconfont.ttf創(chuàng)建Typeface類负蚊，然后給具體的TextView設(shè)置setTypeface。
Typeface font = Typeface.createFromAsset(getAssets(), "iconfont.ttf");
womanIcon.setTypeface(font);
womanIcon.setText(getResources().getString(R.string.woman));
到這我們看下效果圖
有什么問(wèn)題呢
- 每次都要給TextView設(shè)置Typeface颓哮。
進(jìn)一步封裝
9. 第九步：我們封裝一個(gè)類家妆，不需要手動(dòng)設(shè)置Typeface。
package com.kelin.iconfont;
import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Typeface;
import android.util.AttributeSet;
import android.widget.TextView;
/**
* 創(chuàng)建： PengJunShan on 2019-02-26 14:52 描述：
*/
@SuppressLint("AppCompatCustomView")
public class FontIconView extends TextView {
public FontIconView(Context context) {
super(context);
init(context);
}
public FontIconView(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
}
public FontIconView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init(context);
}
/**
* 初始化
* @param context
*/
private void init(Context context) {
//設(shè)置字體圖標(biāo)
Typeface font = Typeface.createFromAsset(context.getAssets(), "iconfont.ttf");
this.setTypeface(font);
}
}
在xml中直接使用冕茅，無(wú)需在Activity中手動(dòng)設(shè)置Typeface了伤极。
上傳圖標(biāo)到項(xiàng)目
在實(shí)際工作中IconFont圖標(biāo)無(wú)法提供我們想要的圖標(biāo)怎么辦？可以讓公司ui做一個(gè)SVG矢量圖姨伤，我們把這個(gè)圖標(biāo)上傳到IconFont中我的項(xiàng)目中哨坪，然后就可以普通的圖標(biāo)一樣使用了。
在我的項(xiàng)目中點(diǎn)擊上傳圖標(biāo)到項(xiàng)目按鈕乍楚，然后選擇一張svg矢量圖上傳当编。上傳成功后再我的項(xiàng)目中可以看到自己上傳的圖標(biāo)，然后下載至本地在AS中替換iconfont.ttf文件 在string.xml中添加新的圖標(biāo)名字 就可以使用了
