前言
作為個(gè)人開發(fā)者耕驰，沒有美工小姐姐的情況下捡需，項(xiàng)目中的圖標(biāo) icon 很是苦惱，之前用過阿里巴巴圖標(biāo)庫 Iconfont僵驰，后來發(fā)現(xiàn) Android studio 中有一個(gè)很牛逼的 icon 插件[Android Material design icon Genenerator]疮方，輕松生成自己需要的 icon控嗜，而且還是 Vector 矢量圖。
一骡显、插件介紹
1疆栏、先看下官方定義：
Android Studio & IntelliJ Plugin for Material Design Icon. This plugin help you to set material design icon in your app resources.
Android Studio & IntelliJ 插件 Material Design 風(fēng)格設(shè)計(jì)圖標(biāo)。這個(gè)插件幫助你在你的應(yīng)用程序資源中設(shè)置設(shè)計(jì)圖標(biāo)惫谤。
2壁顶、展示效果
下圖所示，作者使用 Android studio 4.0 版本演示溜歪，可以根據(jù)項(xiàng)目需求搜索 icon 圖標(biāo)若专，并且支持修改圖標(biāo)尺寸、顏色蝴猪、透明度
3富岳、Vector 矢量圖
在 Android 中指的是 Vector Drawable，也就是 Android 中的矢量圖拯腮，可以說 Vector 就是 Android 中的 SVG 實(shí)現(xiàn)。
- Android 5.0 發(fā)布的時(shí)候蚁飒，Google 提供了 Vector 的支持动壤，即：Vector Drawable 類。
- Vector Drawable 相對于普通的 Drawable 來說淮逻，有以下幾個(gè)好處：
- Vector 圖像可以自動進(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ù)雜的動畫簇搅。
- 成熟完域、穩(wěn)定，前端已經(jīng)非常廣泛的進(jìn)行使用了馍资。
二筒主、插件安裝
File > Settings... > IDE Settings > Plugins > Browse repositories > Android Material design icon Genenerator.
相信在 Android studio 上安裝過插件的小伙伴對上面操作并不陌生，找到插件安裝成功后 restart 重啟編輯器鸟蟹。
三乌妙、插件使用
1、生成 Vector 矢量圖
File > New > Vector Asset
根據(jù)自己的需求建钥，搜索出對應(yīng) icon藤韵，設(shè)置顏色、大小熊经、透明度屬性泽艘。
系統(tǒng)會在 res/drawable 文件夾下面生成對應(yīng)的 Vector 文件
<vector
xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:tint="#FFFFFF"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:fillColor="@android:color/white"
android:pathData="M11.99,2C6.47,2 2,6.48 2,12s4.47,10 9.99,10C17.52,22 22,17.52 22,12S17.52,2 11.99,2zM16.23,18L12,15.45 7.77,18l1.12,-4.81 -3.73,-3.23 4.92,-0.42L12,5l1.92,4.53 4.92,0.42 -3.73,3.23L16.23,18z"
/>
</vector>
以上 xml 文件對應(yīng)以下 icon 圖標(biāo)
2、布局文件中使用 Vector
使用方式很簡單镐依，跟加載普通 png 圖片一個(gè)方式匹涮，只不過加載對應(yīng)的 xml 文件即可。
<ImageView
android:src="@drawable/ic_baseline_stars_24"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
效果如下圖所示：
個(gè)人特別喜歡 Google 發(fā)布的 Material design 風(fēng)格控件槐壳，尤其這個(gè)插件 icon 也是 Material design 風(fēng)格的然低，真是愛不釋手，對于個(gè)人開發(fā)者而言，簡直就是福音雳攘。使用方式簡單带兜，又可以降低 image 占用內(nèi)存的苦惱，你還在等什么吨灭？
