资讯专栏INFORMATION COLUMN

安卓android中小图标使用优化(svg矢量图与iconfiy)

church / 2754人阅读

摘要:在开发安卓中会遇到各种各样的小图片裁剪繁琐拉伸容易失真图片积累到一定量的时候使包的体积变大图与这个第三方库可以解决以上的问题但只试用于背景图片等还需要自己进行优化如何使用图下面的文章说的比较详细使用矢量图是文件一般是级别占用内存小矢量图只能

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

android如何使用svg图,
下面的文章说的比较详细:Android使用矢量图

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

根据个人使用svg经验,一般从资源网站下载的很小不超过kb级的小图片,ps一下直接能用的,就没必要使用svg跟iconfiy了,svg需要各种适配各种转换各种坑,而且文件大小不一定比png小,iconfiy虽然体积小,但毕竟多引入了一个包,一个包的大小至少200k以上。

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-entypo
entypo ttf下载地址
entypo图片搜索地址
android-iconify-fontawesome
fontawesome图片搜索地址
fontawesome ttf下载地址
android-iconify-ionicons
ionicons ttf下载与图片搜索地址
android-iconify-material
material ttf资源下载地址
material图片搜索地址
android-iconify-material-community
material-community下载与搜索地址
android-iconify-meteocons
meteocons资源
android-iconify-sample
iconify-sample下载与搜索地址
android-iconify-simplelineicons
simplelineicons ttf下载
simplelineicons 图片搜索
android-iconify-typicons
typicons ttf下载与图片搜索地址
android-iconify-weathericons
weathericons ttf下载与图片搜索地址

iconfiy官网说明中的
Icon options(字体后样式变化),与Show an icon where you need a?Drawable(在代码中的应用)也是很有用的,需要自己进行发挥;

注意:在开发时,如果直接从源码粘贴字体标志需要把"_"替换成"-":如

特别注意:在低版本的iconfiy中weathericons有问题,因为作者没有在WeathericonsIcons.java这个类中

的key()中替换成"-":
@Overridepublic String key() {??? return name().replace("_", "_");}

如果直接从资源网站找到则不需进行替换,直接黏贴一般可以使用,但是会有搜索出来的图片无法使用的情况,
这时就需要自定义iconfiy了;

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

IconToggleButton??也比较有意思,有兴趣可以试试:

       
       
     
     
     
     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
               }
           }
       });
   }

}

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/14675.html

相关文章

  • iconfont.cn 阿里出品的矢量图标

    摘要:是阿里巴巴推出的矢量图标库,其中涵盖了多个常用图标,并在持续更新中。目前已有图标,部分图标为用户上传,因此默认不公开,但是可以搜索到。下载图标制作模板图标制作规范项目主页编撰 Iconfont.cn是阿里巴巴推出的矢量图标库,其中涵盖了1000多个常用图标,并在持续更新中。(目前已有7000+图标,部分图标为用户上传,因此默认不公开,但是可以搜索到。) showImg(http://...

    wangtdgoodluck 评论0 收藏0
  • iconfont.cn 阿里出品的矢量图标

    摘要:是阿里巴巴推出的矢量图标库,其中涵盖了多个常用图标,并在持续更新中。目前已有图标,部分图标为用户上传,因此默认不公开,但是可以搜索到。下载图标制作模板图标制作规范项目主页编撰 Iconfont.cn是阿里巴巴推出的矢量图标库,其中涵盖了1000多个常用图标,并在持续更新中。(目前已有7000+图标,部分图标为用户上传,因此默认不公开,但是可以搜索到。) showImg(http://...

    刘厚水 评论0 收藏0
  • 应该了解的 Web 图标解决方案

    摘要:那么,在我们当下的前端开发中,最常见的图标解决方案有哪些呢大概是三种,图片和。 showImg(https://segmentfault.com/img/remote/1460000006774999);A picture is worth a thousand words, 一图胜千言。 没错,从 Web 诞生的那天开始,图标就成为视觉层面不可或缺的一个元素,在一个 Web 页面中,...

    zhangwang 评论0 收藏0
  • 应该了解的 Web 图标解决方案

    摘要:那么,在我们当下的前端开发中,最常见的图标解决方案有哪些呢大概是三种,图片和。 showImg(https://segmentfault.com/img/remote/1460000006774999);A picture is worth a thousand words, 一图胜千言。 没错,从 Web 诞生的那天开始,图标就成为视觉层面不可或缺的一个元素,在一个 Web 页面中,...

    ingood 评论0 收藏0
  • 安卓新建项目 - 收藏集 - 掘金

    摘要:经也要热更新掘金本文同步自的地方酒馆好久没写博客了。好了,说了这么多还没见到图从零开始搭建一个项目第章掘金鸡汤成功其实很简单,定下一个合理的计划,然后坚持按照计划执行。 用RecyclerView展示错误和空白界面 附加详情界面实践-MultiItem进阶 | 掘金技术征文 - 掘金前言 本文是MultiItem系列的进阶文章,讲解如何展示空白、错误等状态页,这个功能比较常用,实现的思...

    Sanchi 评论0 收藏0

发表评论

0条评论

church

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<