目錄

[toc]

使用SVG的方案

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

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

將svg格式轉換為png格式,按照png格式圖片來使用.由于需要跟換多種顏色,所以就需要將svg格式手動修改顏色值后保存多個png圖片.

將svg格式轉換為android 能個使用的矢量圖格式,然后建立多個矢量圖xml文件,里面顏色值不同

同樣將svg格式轉換未android 矢量圖xml,xml中的顏色采用主題顏色,這個圖片可以根據主題改變顏色

svg 轉換 png

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

svg 轉換 xml文件

android 5.0 以后添加了VectorDrawable 類對 svg格式進行支持,但android里面使用的矢量圖格式與標準svg格式不一樣,需要轉換成android使用的xml文件.

可以采用兩種方法來轉換,

使用github上的開源項目,SVG2Android：這是Git上的開源項目，clone下來后在瀏覽器中打開index即可使用。也可以直接打開網頁http://inloop.github.io/svg2android/ 在線提供轉換

使用Android Studio 里面提供的工具,Vector Asset 也提供轉換,但是我使用下來轉換顏色值經常出錯.具體使用路徑:新建一個工程,在res目錄右鍵 new -> Vector Asset -> local file

[圖片上傳失敗...(image-e0e850-1553590736765)]

使用導入后會生成一個xml文件:

android:width="100dp"

android:height="100dp"

android:viewportWidth="100"

android:viewportHeight="100">

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" />

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" />

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

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

動態修改svg 顏色

如何動態修改矢量圖的顏色,網上一般提供的方法是修改矢量圖fillcolor(只適用與只有一個顏色代碼)setColorFilter,或者圖標的背景值.

如果有多個fillcolor需要動態修改,有兩種方式修改:

1 github提供一個庫,可以查找path name,然后update 該path的顏色.

AndroidStudio 可以使用第三方庫，可以按名字提取出path，單獨來改變屬性：VectorChildFinder

2.在style中預設樣式：

#ee9fe0

#fff

#1e9fe0

#fff

3.更改VectorDrawable,

?attr/svgbackgroud ,

?attr/svgfront：

android:width="24dp"

android:height="24dp"

android:viewportWidth="100"

android:viewportHeight="100">

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" />

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" />

4.代碼中動態改變：

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-國內功能很強大且圖標內容很豐富的矢量圖標庫,提供矢量圖標下載、在線存儲、格式轉換等功能。

iconfont的簡單使用,目前android使用還是有限制,只能支持單色,所以我們的項目還是支持不了

iconfont在Android中的使用官網已經做了非常詳細介紹http://www.iconfont.cn/help/detail?helptype=code使用起來也很簡單,我總結了幾步：

首先在我的項目中新建一個自己的項目;

從iconfont平臺選擇要使用到的圖標或者本地導入svg圖片到項目中；

下載代碼,把iconfont.svg和iconfont.ttf文件導入到項目中的assets文件夾中；

用TextView代替ImagerView，找到圖標相對應的 HTML 實體字符碼給textView設置；

textview設置大小跟顏色，圖標的大小顏色也會改變(這里大小最好用dp為單位，這樣不會隨著手機字體大小的改變而改變圖標的大小)；

為Textview設置指定的ttf文字；

總結

以上是生活随笔為你收集整理的android svg 编辑器,Android svg 格式使用小结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。