你的位置:首页 > 操作系统

[操作系统]Android多分辨率适配实践【1】使用字体图标(内含两枚神器)


目录

Android多分辨率适配实践【0】基础适配篇(撰写中)
Android多分辨率适配实践【1】使用字体图标,精准控制不同分辨率的图标样式(内含两枚神器)
Android多分辨率适配实践【2】Iconify中文使用说明
Android多分辨率适配实践【3】Iconify扩展,自制或导入SVG字体图标库(撰写中)
...
大约每周一篇的频率更新,算是学习实践笔记,喜欢请关注哦。


为什么要使用字体图标,字体图标的好处

一个优秀的开发者应该会很讨厌浪费时间在琐碎的事情上,比如为APP中的每个图标都制作并拷贝5种 (ldpi, mdpi, hdpi, xhdpi, xxhdpi) 尺寸的图片, 并把它们正确地放到5个不同的drawable目录,并且在想要改变颜色或者大小的时候重新重复这烦人的一切。而且在需要他们缩放的时候,一不留神图像就糊掉。
实际上在网页前端这个行当里面早就面临过类似的问题并且头疼过很久,考虑过不少方法(大图CSS缩小显示、类Android思路的多套图标适配、SVG矢量等)。经过他们实践出来了一种比较好的解决方案——图标字体化。在Android开发里面,也是完全适合采用这种方案的!
甚至除了减少文件体积和可轻易缩放外,字体图标还带来了额外的优点——

  • 轻易改变颜色
  • 轻易产生阴影
  • 动画支持

如何使用字体图标

字体图标是以字体的形式存在的,所以使用字体图标的第一步是先要找到这些字体,在后面我会提到去哪找甚至怎么自己制作。这里先关注如何使用。在Android上使用字体图标本来是不如网页方便的,但我们有神器——

神器1:越来越赞的Iconify

Iconify是一个让你在文本、ActionBar, 以及 EditTexts中轻易使用图标字体的开源库,并自带了海量字体图标合集(前端常用的FontAwesome, Entypo, Typicons等图标全都集成进去了)。上个月刚发布v2版,作者给v2版写的更新介绍Iconify just got a lot better本身就是最好的使用教程。或者看这篇可能是最好的中文说明(撰写中,喜欢请关注)。
它允许这样的编程:

<IconTextView    android:text="Welcome {fa-smile-o} {fa-hand-peace-o} !"   android:shadowColor="#22000000"   android:shadowDx="0"   android:shadowDy="5"   android:shadowRadius="1"   android:textSize="30sp"   android:textColor="#2A9BDA"   ... />

IconTextView会将所有的{..}替换为对应的图标。这些图标的特性跟字体/Text是一模一样的,你可以控制它的颜色,大小,阴影。而且无论多大,都不会糊掉!上面的代码{fa-smile-o}等是来自FontAwesome的图标,你还可以把它用在TextView, Button,甚至ToolBar菜单中(使用IconDrawable)。

效果

 

它看起来是这样的,很棒对吧,不需要处理任何图片哦!

对了,它本身就集成了多个图标库,连MaterialDesign图标都提供了!

噢,对了,它还支持旋转!
现在你还有什么理由不使用它么?快来10分钟入门(撰写中,喜欢请关注)。

所以它的原理是什么?

图标并不是真正的图片,而是特殊的字体,有一个特殊的编码, Iconify 为所有的IconTextView准备好这些字体,并且将{...}的部分映射到对应的字体。
uf039 <- fa_align_justify
uf036 <- fa_align_left
uf038 <- fa_align_right
uf270 <- fa_amazon
uf0f9 <- fa_ambulance
....

神器2:阿里巴巴图标库

在Iconify中没找到合适的图标怎么办?Iconify是支持导入自己的字体的。详细方法可以参照Android多分辨率适配实践【3】Iconify扩展,自制或导入SVG字体图标库(撰写中,喜欢请关注)。然后去哪里找字体呢?网上搜一下字体图标库会找到很多,这里强推阿里巴巴图标库,是中国第一个最大且功能最全的矢量图标库。

至此,万标俱备,快去得瑟吧!

问啊-定制化IT教育平台,牛人一对一服务,有问必答,开发编程社交头条 官方网站:www.wenaaa.com

QQ群290551701 聚集很多互联网精英,技术总监,架构师,项目经理!开源技术研究,欢迎业内人士,大牛及新手有志于从事IT行业人员进入!