android svg 编辑器,Android svg 格式使用小结
目錄
[toc]
使用SVG的方案
svg格式是一般UI能提供的矢量圖片,優(yōu)點是可以放大縮小不會失真,加載快速,減少存儲.Android 從5.0開始支持矢量圖.
對于客戶提供的svg格式的圖片,由于客戶提供svg格式目的是,他們需要根據(jù)主題來更換顏色,我們該如何使用,目前我試出了幾個方案:
將svg格式轉換為png格式,按照png格式圖片來使用.由于需要跟換多種顏色,所以就需要將svg格式手動修改顏色值后保存多個png圖片.
將svg格式轉換為android 能個使用的矢量圖格式,然后建立多個矢量圖xml文件,里面顏色值不同
同樣將svg格式轉換未android 矢量圖xml,xml中的顏色采用主題顏色,這個圖片可以根據(jù)主題改變顏色
svg 轉換 png
svg 轉換成 png ,網(wǎng)上有很多資源,不在敘述. svg格式可以直接使用文本編輯器打開,可以修改里面顏色值,這樣就可以保存未多個png圖標,后續(xù)android 使用資源,安裝png圖片使用即可.
svg 轉換 xml文件
android 5.0 以后添加了VectorDrawable 類對 svg格式進行支持,但android里面使用的矢量圖格式與標準svg格式不一樣,需要轉換成android使用的xml文件.
可以采用兩種方法來轉換,
使用github上的開源項目,SVG2Android：這是Git上的開源項目，clone下來后在瀏覽器中打開index即可使用。也可以直接打開網(wǎng)頁http://inloop.github.io/svg2android/ 在線提供轉換
使用Android Studio 里面提供的工具,Vector Asset 也提供轉換,但是我使用下來轉換顏色值經(jīng)常出錯.具體使用路徑:新建一個工程,在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的代碼就可以.
動態(tài)修改svg 顏色
如何動態(tài)修改矢量圖的顏色,網(wǎng)上一般提供的方法是修改矢量圖fillcolor(只適用與只有一個顏色代碼)setColorFilter,或者圖標的背景值.
如果有多個fillcolor需要動態(tài)修改,有兩種方式修改:
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.代碼中動態(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-國內功能很強大且圖標內容很豐富的矢量圖標庫,提供矢量圖標下載、在線存儲、格式轉換等功能。
iconfont的簡單使用,目前android使用還是有限制,只能支持單色,所以我們的項目還是支持不了
iconfont在Android中的使用官網(wǎng)已經(jīng)做了非常詳細介紹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 格式使用小结的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 恩智浦智能车之开始
- 下一篇： android sina oauth2.