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

薪资倒挂
• 阅读 3287

在开发安卓中会遇到各种各样的小图片(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(在代码中的应用)也是很有用的,需要自己进行发挥;

  • 注意:在开发时,如果直接从源码粘贴字体标志需要把'_'替换成'-':如
    安卓android中小图标使用优化(svg矢量图与iconfiy)
    特别注意:在低版本的iconfiy中weathericons有问题,因为作者没有在WeathericonsIcons.java这个类中

的key()中替换成'-':
@Overridepublic String key() {??? return name().replace('_', '_');}
安卓android中小图标使用优化(svg矢量图与iconfiy)
如果直接从资源网站找到则不需进行替换,直接黏贴一般可以使用,但是会有搜索出来的图片无法使用的情况,
这时就需要自定义iconfiy了;

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

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

}

点赞
收藏
评论区
推荐文章
非常实用的GitHub项目
CoilCoil是Android上的一个全新的图片加载框架,它的全名叫做coroutineimageloader,即协程图片加载库。与传统的图片加载库Glide,Picasso或Fresco等相比。该具有轻量(只有大约1500个方法)、快、易于使用、更现代的API等优势。它支持GIF和SVG,并且可以执行四个默认转换:模糊,圆形裁剪,灰度和圆角。示例如
Dax Dax
4年前
前端性能优化
前端性能优化1、减少资源的请求次数和大小压缩合并js和css文件,减少http请求次数和请求资源的大小;在项目中使用webpackglup等打包编译工具2、尽量使用字体图标或者svg图标代替传统的png(jpg)图渲染更快,减少代码体积,且放大不会出现变形等3、使用图片懒加载目的是减少页面第一次加载的http请求次数,实现思路:
希望的天 希望的天
4年前
Android-图片加载库Coil使用教程
框架介绍Coil是Android上的一个全新的图片加载框架,它的全名叫做coroutineimageloader,即协程图片加载库。与传统的图片加载库Glide,Picasso或Fresco等相比。该具有轻量(只有大约1500个方法)、快、易于使用、更现代的API等优势。它支持GIF和SVG,并且可以执行四个默认转换:模糊,圆形裁剪,灰度和圆角。
Wesley13 Wesley13
3年前
java将svg图片转换为png格式图片
java将svg图片转换为png格式图片博客分类:java 有时候在客户端使用svg画图,而在服务器端需要同样的图片,在服务器端重新画一遍是非常费事的。这时候我们就可以利用已有的svg直接通过下面的类转换成png格式。使用这个方法需要引用batic相关的包,mavenpom文件如下:<!svg生成png格式图片<
晴空闲云 晴空闲云
3年前
svg绘制六种基本形状
svg简介svg意为可缩放矢量图形(ScalableVectorGraphics),最大的特点就是伸缩不会失真。svg是用xml进行描述的,在前端方面现在应用越来越广泛,各大浏览器支持越来越好了。这边尝试记录一下用svg画各种形状。svg标签要使用svg,需要先引入svg标签:html其中:width表示图片的宽。height表示图片的高。画长
Easter79 Easter79
3年前
Taro小程序自定义顶部导航栏
微信自带的顶部导航栏是无法支持自定义icon和增加元素的,在开发小程序的时候自带的根本满足不了需求,分享一个封装好的组件,支持自定义icon、扩展dom,适配安卓、ios、h5,全面屏。我用的是京东的Taro多端编译框架写的小程序,原生的也可以适用,用到的微信/taro的api做调整就行,实现效果如下。!在这里插入图片描述(https://i
Stella981 Stella981
3年前
SVG动画制作工具 , 从此抛弃臃肿的gif
VG简介只要是程序员的你,你不得不知道svg图片,它可以无限任意放大拉伸都不会损失画质,就像系统字体一样可以无限矢量放大,svg更高级是可以用来制作矢量动画,现在各大浏览器和系统基本对svg已经支持很好了SVG与Gif的比较SVG图片:矢量放大,动画也是矢量,体积极小,相当于一个.txt文本的体积,几b到几kb
Easter79 Easter79
3年前
SVG动画制作工具 , 从此抛弃臃肿的gif
VG简介只要是程序员的你,你不得不知道svg图片,它可以无限任意放大拉伸都不会损失画质,就像系统字体一样可以无限矢量放大,svg更高级是可以用来制作矢量动画,现在各大浏览器和系统基本对svg已经支持很好了SVG与Gif的比较SVG图片:矢量放大,动画也是矢量,体积极小,相当于一个.txt文本的体积,几b到几kb
Stella981 Stella981
3年前
SVG矢量动画
一、概述相较于png、jpg等位图通过存储像素点来记录图像,svg(ScalableVectorGraphics)拥有一套自己的语法,通过描述的形式来记录图形。Android并不直接使用原始的svg格式图片,而是将其转化为VectorDrawable。VectorDrawable是一个xml格式的drawable,是矢量图在Android
Easter79 Easter79
3年前
SVG矢量动画
一、概述相较于png、jpg等位图通过存储像素点来记录图像,svg(ScalableVectorGraphics)拥有一套自己的语法,通过描述的形式来记录图形。Android并不直接使用原始的svg格式图片,而是将其转化为VectorDrawable。VectorDrawable是一个xml格式的drawable,是矢量图在Android
Stella981 Stella981
3年前
JOptionPane修改图标
1.在Linux平台下.JOptionPane会显示Java默认的图标,在window平台不显示图标,如何替换这个图标了?2JOptionPane.setIcon(Icon)修改的是内容区域的icon,而不是左上角的Icon.所以需要通过修改Jdialog/Frame的图标来达到修改默认图标的问题.3.代码:if(JOptio
薪资倒挂
薪资倒挂
Lv1
回眸一笑百媚生,六宫粉黛无颜色。
文章
4
粉丝
0
获赞
0