android中小图片icon的优化(svg矢量图与iconfiy的使用)

在开发安卓中会遇到各种各样的小图片(icon),裁剪繁琐,拉伸容易失真,png图片积累到一定量的时候,使包的体积变大,svg图与iconfiy这个第三方库可以解决以上的问题,但只试用于icon,背景图片等还需要自己进行优化;

android如何使用svg图, 下面的文章说的比较详细:Android使用矢量图svg是xml文件一般是kb级别,占用内存小; svg矢量图只能在api>21,android5.0以后进行使用,往前也能兼容,不过api<15就不能兼容了,textview的使用矢量图需要自己填坑;虽然如此,根据奥卡姆剃刀原理,安卓原生api中提供了大量的矢量图可以使用,如果对风格要求不严,直接可以在img标签下引用原生的drawable矢量图.国内外的icon网站基本都有svg图下载,代码转换一下就可以直接使用了.

iconfiy的使用思路是用自定义的textview代替imgview,所以体积会更小:
具体使用方法见:github官网说明
dependencies {
compile ‘com.joanzapata.iconify:android-iconify-fontawesome:2.2.2’ // (v4.5)
//以上的资源足够用,下面的不同的库基本可以不用,有特殊需要再依赖也行,具体的图片资源的搜索,在下文会
//专门列出
compile ‘com.joanzapata.iconify:android-iconify-entypo:2.2.2’ // (v3,2015)
compile ‘com.joanzapata.iconify:android-iconify-typicons:2.2.2’ // (v2.0.7)
compile ‘com.joanzapata.iconify:android-iconify-material:2.2.2’ // (v2.0.0)
compile ‘com.joanzapata.iconify:android-iconify-material-community:2.2.2’ // (v1.4.57)
compile ‘com.joanzapata.iconify:android-iconify-meteocons:2.2.2’ // (latest)
compile ‘com.joanzapata.iconify:android-iconify-weathericons:2.2.2’ // (v2.0)
compile ‘com.joanzapata.iconify:android-iconify-simplelineicons:2.2.2’ // (v1.0.0)
compile ‘com.joanzapata.iconify:android-iconify-ionicons:2.2.2′ // (v2.0.1)
}
@Override
public void onCreate() {
super.onCreate();
Iconify
.with(new FontAwesomeModule())//常用
//以下的相似基本可以不用
.with(new EntypoModule())
.with(new TypiconsModule())
.with(new MaterialModule())
.with(new MaterialCommunityModule())
.with(new MeteoconsModule())
.with(new WeathericonsModule())//如果有天气需求就加上这个库
.with(new SimpleLineIconsModule())
.with(new IoniconsModule());
}
}

iconfiy的优点是体积小,使用方便,缺点是你需要知道对应的图片资源标识符如 {fa-smile-o},图片不好搜索,资源标识符更不好找到.没有图片资源,不知道如何引用字体,如无米之炊.以下按照iconfiy的依赖,分别找到ttf的下载资源与图片的搜索地址,大家可以根据项目的需求、自己爱好分别加载不同库;

iconify基本把国外的icon网站资源一网打尽.iconify资源网址

iconify资源不是很全,可以到他依赖的icon资源网站进行图片搜索:android-iconify-entypoentypo ttf下载地址entypo图片搜索地址android-iconify-fontawesomefontawesome图片搜索地址fontawesome ttf下载地址android-iconify-ioniconsionicons ttf下载与图片搜索地址android-iconify-materialmaterial ttf资源下载地址material图片搜索地址android-iconify-material-communitymaterial-community下载与搜索地址android-iconify-meteoconsmeteocons资源android-iconify-sampleiconify-sample下载与搜索地址android-iconify-simplelineiconssimplelineicons ttf下载simplelineicons 图片搜索android-iconify-typiconstypicons ttf下载与图片搜索地址android-iconify-weathericonsweathericons ttf下载与图片搜索地址
iconfiy官网说明中的Icon options(字体后样式变化),与Show an icon where you need a Drawable(在代码中的应用)也是很有用的,需要自己进行发挥;
注意:在开发时,如果直接从源码粘贴字体标志需要把’_’替换成’-‘:如
图片描述
特别注意:在低版本的iconfiy中weathericons有问题,因为作者没有在WeathericonsIcons.java这个类中的key()中替换成’-‘:@Overridepublic String key() {    return name().replace(‘_’, ‘_’);}替换注意2
如果直接从资源网站找到则不需进行替换,直接黏贴一般可以使用,但是会有搜索出来的图片无法使用的情况,这时就需要自定义iconfiy了;

自定义:支付宝支付等图标等国内特色的图片国外的资源一般没有,这时就需要自己阿里的图库中自定义字体了,比较不错的文章有(不再进行赘述):阿里图库的自定义iconFontello的自定义

IconToggleButton  也比较有意思,有兴趣可以试试:<com.joanzapata.iconify.widget.IconToggleButton  
android:layout_width=”wrap_content”    android:layout_height=”wrap_content”    android:textOff=”{fa-smile-o 20sp spin}”    android:textOn=”{icon-indemnity}”/>

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final IconToggleButton tb = findViewById(R.id.toggleBt);
findViewById(R.id.toggleBt).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
if (tb.isChecked()){
//逻辑1
}else {
//逻辑2
}
}
});
}
}

[1]: /img/bVbmXkk

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理