继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

【Android】教你使用字体图标

冯文议
关注TA
已关注
手记 82
粉丝 1.4万
获赞 707

以前写项目的时候,遇到图标,就会很头疼,因为这以为着要使用图片,随之而产生下面的问题:

  • 图片的适配

  • 图片的大小、颜色改变

所以,我想说字体图标最大的好处就是自适应了,而且是使用 TextView 不用去切图,是矢量图,灵活调用。

字体图标

APP

一款好的APP,图标是少不了的,那么,这个图标是怎么实现的呢?

你可以可以引入图片作为图标,还可以使用字体图标。

我相信,大家跟我一样,都很讨厌图片吧,虽好看,可以给我们的APP加不少分,但是使用起来,并不那么回事。

如果图标是字体又会怎样呢?

颜色,大小,兼容性等等以前用图片看似难处理的问题,可能都不是事。

跟着我写

第一步:新建一个 Android Module

第二步:写一个 IconView

package com.fengwenyi.app.icondemo.view;

import android.content.Context;
import android.graphics.Typeface;
import android.support.v7.widget.AppCompatTextView;
import android.util.AttributeSet;

/**
 * @author Wenyi Feng(xfsy_2015@163.com)
 */
public class IconView extends AppCompatTextView {

    public IconView(Context context) {
        super(context);
        init(context);
    }
    public IconView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }
    public IconView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context);
    }
    private void init(Context context) {
//        设置字体图标
        this.setTypeface(Typeface.createFromAsset(context.getAssets(),"icon/iconfont.ttf"));
    }

}

第三步:准备图标

你需要去找图标库,我用的是 阿里图标库

具体怎么做呢?大概分以下几步:

  • 打开阿里图标库,登录并新建一个项目
    找到新建项目的位置.png

新建项目.png

  • 首页搜索想要的图标,并加入购物车

购物车图标.png

  • 将购物车中的图标添加到新建的项目中

添加到项目中.png

  • 去项目中勾选并加入到购物车中,点击购物车,下载代码

项目中的图标.png

批量加入购物车.png

批量下载.png

  • 解压,将其中以 .ttf 结尾的文件拷贝

解压.png

  • 在 main 新建 assets 文件夹,再新建 icons 文件夹

assets.png

  • 粘贴到 icons 目录下

目录结构.png

至此,字体图标就可以用了就可以使用了

第四步:在XML中使用

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

   <com.fengwenyi.app.icondemo.view.IconView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_centerInParent="true"
       android:text="&#xe899;"
       android:textColor="#ED1C24"
       android:textSize="100sp"/>

</RelativeLayout>

看一下效果吧
效果.png

怎么样,还行吧,大小颜色都是可以随意调的,非常方便。

但是呢,有一个问题,在 java 代码赋值,不成功,如下:

XML

<com.fengwenyi.app.icondemo.view.IconView
       android:id="@+id/tvIcon"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_centerInParent="true"
       android:text="&#xe899;"
       android:textColor="#ED1C24"
       android:textSize="100sp"/>

Java

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        IconView tvIcon = findViewById(R.id.tvIcon);
        tvIcon.setText("&#xe899;");
    }
}

效果

无法显示效果.png

那要怎么办呢?

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        IconView tvIcon = findViewById(R.id.tvIcon);
//        tvIcon.setText("&#xe899;");
        tvIcon.setText(Html.fromHtml("&#xe899;"));
    }
}

我们再看效果:

之后的效果.png


【end】


下面是【一句话实现字体图标】

AppLib

闲话少说,看 AppLib 库是如何支持字体图标的。

1、引入
AppLib

build.gradle(Module:app) 中如下代码:

allprojects {
    repositories {
        maven { url 'https://jitpack.io' }
    }
}

dependencies {
    // ...
    compile 'com.github.fengwenyi:AppLib:0.0.11'
    // ...
}

更多内容,请点击:AppLib

2、图标
这里找一个图标
Apple

3、XML

    <com.fengwenyi.app.applib.view.IconFontTextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="&#xf179;"/>

运行效果
一行代码实现字体图标实例

没有骗你吧,就一行代码!那为什么有两个呢?

    <com.fengwenyi.app.applib.view.IconFontTextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="&#xf179;"/>

    <com.fengwenyi.app.applib.view.IconFontTextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="&#xf179;"
        android:textColor="#ff0000"
        android:textSize="48dp"
        android:layout_marginTop="20dp" />

我只是想告诉你,字体图片真的好用

TextView

有人觉得这个控件名字好长、好丑啊,并不想用,我就想用 TextView 怎么办?

其实我们也是支持的。

你可以这样

    <TextView
        android:id="@+id/icon_font_01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="&#xf179;"
        android:layout_marginTop="20dp"/>
        IconFontUtil.injectFont(icon_font_01)

还可以这样

        // IconFontUtil.injectFont(icon_font_01)
        icon_font_01.typeface = IconFontUtil.getTypeface(this)

效果是这样的
一行代码实现字体图标-03

问题

当你觉的字体图片非常好用,并且依赖上他是,你会发现,每次找图标,真心累,眼睛痛不说,很多都没有。

好吧,为了解决这个问题,于是有了这篇博文。

1、首先需要从阿里字体图标库下载需要的图标,如果不会,询问我,后面会给出链接教程。

Ali

2、下载并解压,将后缀名为 .ttf 的复制到如图的目录下
复制

粘贴目录如下

3、XML

    <TextView
        android:id="@+id/icon_font_02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="&#xe697;"
        android:textSize="36dp"
        android:textColor="#333333"
        android:layout_marginTop="20dp"/>

复制代码

4、Activity

        val path = Constant.FONTS_DIR + "/iconfont.ttf"
        icon_font_02.typeface = IconFontUtil.getTypeface(this, path)

看一下效果吧
Ali

参考文献

1、 Android怎么使用字体图标 自定义FontTextView字体图标控件-- 使用方法

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP