目錄

[toc]

使用SVG的方案

svg格式是一般UI能提供的矢量圖片,優(yōu)點是可以放大縮小不會失真,加載快速,減少存儲.Android 從5.0開始支持矢量圖.

對于客戶提供的svg格式的圖片,由于客戶提供svg格式目的是,他們需要根據(jù)主題來更換顏色,我們該如何使用,目前我試出了幾個方案:

1. 將svg格式轉(zhuǎn)換為png格式,按照png格式圖片來使用.由于需要跟換多種顏色,所以就需要將svg格式手動修改顏色值后保存多個png圖片.
2. 將svg格式轉(zhuǎn)換為android 能個使用的矢量圖格式,然后建立多個矢量圖xml文件,里面顏色值不同
3. 同樣將svg格式轉(zhuǎn)換未android 矢量圖xml,xml中的顏色采用主題顏色,這個圖片可以根據(jù)主題改變顏色

svg 轉(zhuǎn)換 png

svg 轉(zhuǎn)換成 png ,網(wǎng)上有很多資源,不在敘述. svg格式可以直接使用文本編輯器打開,可以修改里面顏色值,這樣就可以保存未多個png圖標(biāo),后續(xù)android 使用資源,安裝png圖片使用即可.

svg 轉(zhuǎn)換 xml文件

android 5.0 以后添加了VectorDrawable 類對 svg格式進行支持,但android里面使用的矢量圖格式與標(biāo)準(zhǔn)svg格式不一樣,需要轉(zhuǎn)換成android使用的xml文件.
可以采用兩種方法來轉(zhuǎn)換,

• 使用github上的開源項目,SVG2Android：這是Git上的開源項目，clone下來后在瀏覽器中打開index即可使用。也可以直接打開網(wǎng)頁http://inloop.github.io/svg2android/ 在線提供轉(zhuǎn)換
• 使用Android Studio 里面提供的工具,Vector Asset 也提供轉(zhuǎn)換,但是我使用下來轉(zhuǎn)換顏色值經(jīng)常出錯.具體使用路徑:新建一個工程,在res目錄右鍵 new -> Vector Asset -> local file
  [圖片上傳失敗...(image-e0e850-1553590736765)]

使用導(dǎo)入后會生成一個xml文件:

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="100dp"
    android:height="100dp"
    android:viewportWidth="100"
    android:viewportHeight="100">

    <path
        android:fillColor="#1e9fe0"
        android:pathData="M50,0 C77.6142,0,100,22.3858,100,50 C100,77.6142,77.6142,100,50,100
C22.3858,100,0,77.6142,0,50 C0,22.3858,22.3858,0,50,0 Z" />
    <path
        android:fillColor="#fff"
        android:pathData="M84.39,47 L28.86,24.6 A3.56,3.56,0,0,0,24,28.52 L26.6,43.52
A3.09,3.09,0,0,0,29.4,46.07 L77.4,49.86 L29.4,53.64 A3.09,3.09,0,0,0,26.6,56.19
L24,71.19 A3.57,3.57,0,0,0,28.85,75.12 L84.39,52.7 A3.09,3.09,0,0,0,84.39,47 Z" />
</vector>

Android Studio 轉(zhuǎn)換后 第二個path里面顏色值錯了,應(yīng)該是白色的,不清楚是怎么回事,但是在線轉(zhuǎn)化是正確的,這個要人工檢查下.

如果是需要修改顏色,修改里面fillcolor的代碼就可以.

動態(tài)修改svg 顏色

如何動態(tài)修改矢量圖的顏色,網(wǎng)上一般提供的方法是修改矢量圖fillcolor(只適用與只有一個顏色代碼)setColorFilter,或者圖標(biāo)的背景值.
如果有多個fillcolor需要動態(tài)修改,有兩種方式修改:
1 github提供一個庫,可以查找path name,然后update 該path的顏色.
AndroidStudio 可以使用第三方庫，可以按名字提取出path，單獨來改變屬性：VectorChildFinder

2 采用主題 style的方式:
參考文章https://stackoverflow.com/questions/33126904/change-fillcolor-of-a-vector-in-android-programmatically/38418049#38418049
1.在style中聲明屬性：

    <declare-styleable name="LilyBackgroud">
        <attr name="svgbackgroud" format="color" />
        <attr name="svgfront" format="color" />
    </declare-styleable>

2.在style中預(yù)設(shè)樣式：

    <style name="PinkScene" parent="AppTheme">
        <item name="svgbackgroud">#ee9fe0</item>
        <item name="svgfront">#fff</item>
    </style>

    <style name="BlueScene" parent="AppTheme">
        <item name="svgbackgroud">#1e9fe0</item>
        <item name="svgfront">#fff</item>
    </style>

3.更改VectorDrawable,
?attr/svgbackgroud ,
?attr/svgfront：

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="100"
    android:viewportHeight="100">

    <path
        android:fillColor="?attr/svgbackgroud"
        android:pathData="M50,0 C77.6142,0,100,22.3858,100,50 C100,77.6142,77.6142,100,50,100
C22.3858,100,0,77.6142,0,50 C0,22.3858,22.3858,0,50,0 Z" />
    <path
        android:fillColor="?attr/svgfront"
        android:pathData="M84.39,47 L28.86,24.6 A3.56,3.56,0,0,0,24,28.52 L26.6,43.52
A3.09,3.09,0,0,0,29.4,46.07 L77.4,49.86 L29.4,53.64 A3.09,3.09,0,0,0,26.6,56.19
L24,71.19 A3.57,3.57,0,0,0,28.85,75.12 L84.39,52.7 A3.09,3.09,0,0,0,84.39,47 Z" />
</vector>

4.代碼中動態(tài)改變：

ib_image = (ImageButton) findViewById(R.id.imageButton2);

ib_image.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Log.d("wentao","adfadfasdf  touchState:"+touchState);
        changeColor(touchState);
        if(touchState){
            touchState = false;
            ContextThemeWrapper wrapper = new ContextThemeWrapper(mContext, R.style.BlueScene);
            final Drawable drawable = VectorDrawableCompat.create(getResources(), R.drawable.ic_sendiconon_pink, wrapper.getTheme());
            ib_image.setImageDrawable(drawable);

        }else{
            touchState = true;
            ContextThemeWrapper wrapper = new ContextThemeWrapper(mContext, R.style.PinkScene);
            final Drawable drawable = VectorDrawableCompat.create(getResources(), R.drawable.ic_sendiconon_pink, wrapper.getTheme());
            ib_image.setImageDrawable(drawable);
        }

    }
});

矢量圖使用進階

阿里的項目
Iconfont-國內(nèi)功能很強大且圖標(biāo)內(nèi)容很豐富的矢量圖標(biāo)庫,提供矢量圖標(biāo)下載、在線存儲、格式轉(zhuǎn)換等功能。
iconfont的簡單使用,目前android使用還是有限制,只能支持單色,所以我們的項目還是支持不了
iconfont在Android中的使用官網(wǎng)已經(jīng)做了非常詳細(xì)介紹http://www.iconfont.cn/help/detail?helptype=code使用起來也很簡單,我總結(jié)了幾步：

• 首先在我的項目中新建一個自己的項目;
• 從iconfont平臺選擇要使用到的圖標(biāo)或者本地導(dǎo)入svg圖片到項目中；
• 下載代碼,把iconfont.svg和iconfont.ttf文件導(dǎo)入到項目中的assets文件夾中；
• 用TextView代替ImagerView，找到圖標(biāo)相對應(yīng)的 HTML 實體字符碼給textView設(shè)置；
• textview設(shè)置大小跟顏色，圖標(biāo)的大小顏色也會改變（這里大小最好用dp為單位，這樣不會隨著手機字體大小的改變而改變圖標(biāo)的大?。?/li>
• 為Textview設(shè)置指定的ttf文字；