image

前言

作為個人開發(fā)者，沒有美工小姐姐的情況下，項目中的圖標 icon 很是苦惱，之前用過阿里巴巴圖標庫 Iconfont，后來發(fā)現(xiàn) Android studio 中有一個很牛逼的 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 風格設計圖標。這個插件幫助你在你的應用程序資源中設置設計圖標。

2、展示效果

下圖所示，作者使用 Android studio 4.0 版本演示，可以根據(jù)項目需求搜索 icon 圖標，并且支持修改圖標尺寸、顏色、透明度

image

3、Vector 矢量圖

在 Android 中指的是 Vector Drawable，也就是 Android 中的矢量圖，可以說 Vector 就是 Android 中的 SVG 實現(xiàn)。

• Android 5.0 發(fā)布的時候，Google 提供了 Vector 的支持，即：Vector Drawable 類。
• Vector Drawable 相對于普通的 Drawable 來說，有以下幾個好處：
• Vector 圖像可以自動進行適配，不需要通過分辨率來設置不同的圖片，這在我眼里是最好的地方。
• Vector 圖像可以大幅減少圖像的體積，同樣一張圖，用 Vector 來實現(xiàn)，可能只有 PNG 的幾十分之一，這從減少 apk 大小上很有意義，但有大佬發(fā)現(xiàn)，其實并不是完全就能減少，當 PNG 只有十幾 k，用 Vector 反而變大了。
• 使用簡單，很多設計工具如 PhotoShop、Illustrator，都可以直接導出 SVG 圖像，從而轉(zhuǎn)換成 Vector 圖像，夠靈活，不用寫很多代碼就可以實現(xiàn)非常復雜的動畫。
• 成熟、穩(wěn)定，前端已經(jīng)非常廣泛的進行使用了。

二、插件安裝

File > Settings... > IDE Settings > Plugins > Browse repositories > Android Material design icon Genenerator.

相信在 Android studio 上安裝過插件的小伙伴對上面操作并不陌生，找到插件安裝成功后 restart 重啟編輯器。

image

三、插件使用

1、生成 Vector 矢量圖

File > New > Vector Asset

image

根據(jù)自己的需求，搜索出對應 icon，設置顏色、大小、透明度屬性。

image

系統(tǒng)會在 res/drawable 文件夾下面生成對應的 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 文件對應以下 icon 圖標

image

2、布局文件中使用 Vector

使用方式很簡單，跟加載普通 png 圖片一個方式，只不過加載對應的 xml 文件即可。

    <ImageView
android:src="@drawable/ic_baseline_stars_24"
android:layout_width="match_parent"
android:layout_height="match_parent"/>

效果如下圖所示：

image

個人特別喜歡 Google 發(fā)布的 Material design 風格控件，尤其這個插件 icon 也是 Material design 風格的，真是愛不釋手，對于個人開發(fā)者而言，簡直就是福音。使用方式簡單，又可以降低 image 占用內(nèi)存的苦惱，你還在等什么？