目录
[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文件:
<?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 转换后 第二个path里面颜色值错了,应该是白色的,不清楚是怎么回事,但是在线转化是正确的,这个要人工检查下.
如果是需要修改颜色,修改里面fillcolor的代码就可以.
动态修改svg 颜色
如何动态修改矢量图的颜色,网上一般提供的方法是修改矢量图fillcolor(只适用与只有一个颜色代码)setColorFilter,或者图标的背景值.
如果有多个fillcolor需要动态修改,有两种方式修改:
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中预设样式：
<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.代码中动态改变：
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文字；
网友评论