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

7次阅读

共计 3316 个字符,预计需要花费 9 分钟才能阅读完成。

在开发安卓中会遇到各种各样的小图片 (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

正文完
 0