IconFont在Android中的使用介绍

iconfont介绍

常用iconfont字体库

https://www.iconfont.cn/
http://fontawesome.dashgame.com/
https://ionicons.com/

优点：

1.IconFont是矢量图标,可以随意设置大小。

2.体积小可以减小APK的体积。

3.一套图标资源可以在不同平台使用(android ,ios,web)

4.很容易实现图文混排，因为都是Icon也被看做为文字.

缺点：

1.添加图标是需要重新制作ttf文件

2.只能支持单色（不支持渐变色图标）

ttf文件中每个图片对应的一个unicode码。TextView设置文字的时候，使用对应的unicode码就能显示出图片。

具体使用

下载iconfont.ttf文件，放在项目main/assets/iconfont/下

方式一

xml中

<TextView
    android:id="@+id/tv1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/home"
    android:textColor="@android:color/holo_orange_light"
    android:textSize="50sp" />
    

strings中Unicode

<string name="home">&#xe664;</string>

最后直接设置

Typeface iconfont1 = Typeface.createFromAsset(getAssets(), "iconfont/iconfont.ttf");
TextView textview1 = findViewById(R.id.tv1);
textview1.setTypeface(iconfont1);

方式二

自定义TextView

public class IconFontView extends AppCompatTextView {

    private Context context;
    private boolean isFirst = true;
    private String text;
    private int textColor;
    private String clicked_text;
    private int clicked_textColor;

    public IconFontView(Context context) {
        this(context, null);
    }

    public IconFontView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public IconFontView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        this.context = context;
        init(attrs);
    }

    /** 初始化 */
    private void init(AttributeSet attrs){
        // 设置字体类型
        setTypeface(Typeface.createFromAsset(context.getAssets(), "iconfont/iconfont.ttf"));
        // 获取配置信息（text && textColor）
        getAttrs(attrs);
    }

    /** 获得配置信息 */
    private void getAttrs(AttributeSet attrs) {
        TypedArray taCustom = context.obtainStyledAttributes(attrs, R.styleable.IconFontViewAttr);
        clicked_text = taCustom.getString(R.styleable.IconFontViewAttr_clicked_text);
        clicked_textColor = taCustom.getColor(R.styleable.IconFontViewAttr_clicked_textColor, 0);
        taCustom.recycle();
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (event.getAction() == MotionEvent.ACTION_DOWN){
            text = getText().toString();
            textColor = getCurrentTextColor();
        }
        return super.onTouchEvent(event);
    }

    @Override
    protected void dispatchSetPressed(boolean pressed) {
        super.dispatchSetPressed(pressed);
        if (isDuplicateParentStateEnabled()) {
            if (pressed){
                if(clicked_text != null)
                    this.setText(clicked_text);
                if(clicked_textColor != 0)
                    this.setTextColor(clicked_textColor);
            }else {
                this.setText(text);
                this.setTextColor(textColor);
            }
        }
    }
}

在res/values/attrs中定义属性

<!-- IconFontView属性 -->
<declare-styleable name="IconFontViewAttr">
    <attr name="clicked_text" format="string" />
    <attr name="clicked_textColor" format="color" />
</declare-styleable>

使用

<com.example.iconfont.IconFontView
    android:id="@+id/tv2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/hot"
    android:textColor="@android:color/holo_red_dark"
    android:textSize="50sp" />
    

strings中Unicode

<string name="hot">&#xe614;</string>

补充

可以图文混用

<string name="my">我可以图文混用&#xe624;啦！！</string>

使用阿里iconfont可以在demo_index.html文件中查找对应的Unicode

fontawesome查找Unicode对照表

https://fontawesome.com/cheatsheet?from=io