Android 优化 图标文字 iconfont
使用图标文字代替图片的实践
进入项目的main文件夹创建一个assets文件夹,并在assets下创建fonts文件夹, 把非系统字体放在fonts下
Snip20170218_2.png
使用:
-
先在
.xml文件,设置好文本<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="50sp" android:text="\ue900" android:fontFamily="IconMoon-Free.ttf"/>
Snip20170218_5.png
-
在
.java文件中设置字体public class MainActivity extends AppCompatActivity { private TextView screenTitle; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // 设置TextView使用导入的文本 screenTitle = (TextView) findViewById(R.id.main_text); Typeface iconMoonFont = Typeface.createFromAsset(getAssets(), "fonts/IcoMoon-Free.ttf"); screenTitle.setTypeface(iconMoonFont); } }
Snip20170218_4.png
-
效果:
Snip20170218_7.png -
图标文本 & ImageView & TextView.drawableLeft 三者比较
Snip20170218_10.png
图标文本的使用
图标文本一般使用在导航栏或标签栏上, 以 天猫 为例
-
图标文本使用在导航栏上
Snip20170218_13.png
补充说明: 之所以方括号后面有说明文字是textview.contentDescription属性
Snip20170218_23.png -
在标签栏上使用图标文本
Snip20170218_18.png
注意: 上面的图标和下面的文字天猫都是文字 -
图标文本区别于
TextView.drawableTop等
Snip20170218_17.png
标签文本的使用需要满足一个条件: 该图标是纯色的
只有满足这个条件如果能使用图标文本就尽量使用, 而不要讲图标制作成.png图片.
为什么要使用图标文本代替图片
使用图标文本可以将多个图标放在一个字体文件中(我这里是.ttf格式的), 文件的尺寸是非常小的. 而如果将所有的图标制作成.png图片会比较大, 通过图标文本可以优化Apk(Android) / ipa(iOS) 的大小. 属于安装包的优化, 而这种思想也可以用在iOS的App制作中
如何制作字体
使用该软件: Birdfont
如果想要一些现成的图标字体可以在该网址上找: https://icomoon.io
Demo 地址: https://github.com/tackor/Android
