图标字体化 android,Android 优化 图标文字 iconfont

Android 优化 图标文字 iconfont

使用图标文字代替图片的实践

进入项目的main文件夹创建一个assets文件夹,并在assets下创建fonts文件夹, 把非系统字体放在fonts下

Snip20170218_2.png

使用:

先在.xml文件,设置好文本

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