以前写项目的时候，遇到图标，就会很头疼，因为这以为着要使用图片，随之而产生下面的问题：
图片的适配
图片的大小、颜色改变
所以，我想说字体图标最大的好处就是自适应了，而且是使用 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=""
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=""
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("");
}
}
效果
无法显示效果.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("");
tvIcon.setText(Html.fromHtml(""));
}
}
我们再看效果：
之后的效果.png
【end】
下面是【一句话实现字体图标】
AppLib
闲话少说，看 AppLib 库是如何支持字体图标的。
1、引入
AppLib v20
在 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=""/>
运行效果
一行代码实现字体图标实例
没有骗你吧，就一行代码！那为什么有两个呢？
<com.fengwenyi.app.applib.view.IconFontTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""/>
<com.fengwenyi.app.applib.view.IconFontTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
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=""
android:layout_marginTop="20dp"/>
IconFontUtil.injectFont(icon_font_01)
还可以这样
// IconFontUtil.injectFont(icon_font_01)
icon_font_01.typeface = IconFontUtil.getTypeface(this)
效果是这样的
一行代码实现字体图标-03
问题
当你觉的字体图片非常好用，并且依赖上他是，你会发现，每次找图标，真心累，眼睛痛不说，很多都没有。
好吧，为了解决这个问题，于是有了这篇博文。
1、首先需要从阿里字体图标库下载需要的图标，如果不会，询问我，后面会给出链接教程。
Ali icon 01
2、下载并解压，将后缀名为 .ttf 的复制到如图的目录下
复制 .ttf
粘贴目录如下
3、XML
<TextView
android:id="@+id/icon_font_02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
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 字体图标库效果
