Android使用字体图标(Icon Font)自定义FontIconView

一.简介

    在现在这个Android的开发环境之下有许多比较严重的性能优化以及手机适配等等问题。
    而在这之中,图片的适应问题也很严重,一般都是配置市面上主要机型的屏幕尺寸大小的图片来进行图片的自适应。但是这样做会出现各种各样的问题,比如:
    手机的屏幕分辨率不符合配置的大小。
    图片越来越多,apk打包后生成的大小越来越庞大。
    图片样式需要根据需求不断制作,更新复杂,冗杂性比较高。
    ........
    等等问题

所以下面我要介绍的就是我们现在要介绍的字体图标了。而什么是字体图标呢?说的简单点字体图标是指将图标做成字体文件(.ttf),从而代替传统的png等图标资源。
优点:

    1. 可以高度自定义图标的样式(包括大小和颜色),对于个人开发者尤其适用
    1. 可以减少项目和安装包的大小(特别你的项目中有很多图片icon时,效果将是M级)
    1. 几乎可以忽略屏幕大小和分辨率,做到更好的适配
    1. 使用简单
      ...............

缺点:

    1. 只能是一些简单的icon,不能代替如背景图、9图等资源
    1. 一些需要文字说明的icon,图片资源将会是更好的选择
    1. 对设计的要求更高,不同icon可能拥有不同的边距,这时要切换icon时还要设置大小
    1. 由于边距的存在可能存在无法填满控件的情况
    1. 无法在android studio中进行实时预览
      ……

但是总体对我们开发者而言,这个字体图标的利还是大于弊,就一个使用很方便,并且屏幕自适应和较少apk的大小就能够让我们难以割舍了。

二.字体图标使用

1.生成.ttf格式的字体文件

这里我一般获取字体图标都是通过阿里巴巴矢量图标库因为这里面不仅有很多各式各样的字体图标,并且很多都十分适合开发者,用起来也很方便。

字体图标样式

下载字体图标里之后生成的zip,解压之后会有这样的一个文件

ttf格式的字体图标

2.字体文件的配置

把它放到android的assets文件夹底下。

iconfont.ttf位置

我在工程中怎么找到这些图标?

正如前面所说 我们其实已经知道怎么来代表一个图标了,但是还是需要知道怎么在工程中用,其实也很简单我们在res --> values --> string.xml中添加字符串如图:

string

添加样式

<string name="font1">&#xe665;</string>

这个样式是如何获取的呢

这个样式是如何获取的呢

很简单就是点击如图复制代码,再在string中粘贴即可。

string中的字符串

3.字体文件的使用

TextView中

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <!-- activity_main.xml 中用来显示图标 -->
    <TextView
        android:id="@+id/tvShow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />

</RelativeLayout>

在activity中使用Typeface来进行字体文件格式的调用

import android.app.Activity;
import android.graphics.Typeface;
import android.os.Bundle;
import android.widget.TextView;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        TextView tvShow = (TextView) findViewById(R.id.tvShow);
        Typeface font = Typeface.createFromAsset(getAssets(), "iconfont.ttf"); 
        tvShow.setTypeface(font);
        tvShow.setText(getResources().getString(R.string.font1));
    }
}

这些图标怎么设置颜色和具体大小?

就相当于对这个其实变成了字一样进行其TextView的文字的颜色大小设置一样

可以在xml中进行设置

<TextView
        android:id="@+id/tvShow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" 
        android:gravity="center"
        android:textColor="#00ff00"
        android:textSize="80sp"/>

也可以动态用代码在activity中设置

tvShow.setTextSize(80); //设置大小
tvShow.setTextColor(Color.parseColor("#00ff00")); //设置颜色

三.自定义FontIconView来进行代码的代码优化

  • 理解的上面的我们就可以自定义一个字体图标的控件 FontIconView
  • 在工程目录下新建一个继承TextView 的class 起名为FontIconView
import android.content.Context;
import android.graphics.Typeface;
import android.util.AttributeSet;
import android.widget.TextView;

/**
 * 
 * 自定义字体图标
 * @author M.Z
 *
 */
public class FontIconView extends TextView{

    
    /*
     * 控件在xml加载的时候是调用两个参数的构造函数 ,为了自定义的控件的完整性我们可以
     * 都把构造函数写出来
     */
    public FontIconView(Context context) {
        super(context);
        init(context);
    }
    
    public FontIconView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    public FontIconView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init(context);
    }

    /**
     * 初始化
     * @param context
     */
    private void init(Context context) {
        //设置字体图标
        Typeface font = Typeface.createFromAsset(context.getAssets(), "iconfont.ttf"); 
        this.setTypeface(font);
    }
}

xml中使用

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    
    <com.example.views.FontIconView
        android:id="@+id/fontView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world"
        />

</LinearLayout>

动态代码设置

 FontIconViewfontView= (FontIconView) findViewById(R.id.fontView);
        fontView.setText(getResources().getString(R.string.font1));
        fontView.setTextSize(15);
        fontView.setTextColor(Color.parseColor("#ff0000"));  //设置颜色

这样会不会发现以前比较困难的图片自适应问题是不是变得迎刃而解了,并且在这之中,我们会发现这个自定义FontIconView之后代码的使用率也很高,并且什么样的颜色和大小的只要简简单单的设置一下就好了,所以相信对开发者而言,这种功能性十分方便,并且开发过程也变得简单多了。

注意

AndroidStudio在windows系统和苹果系统里面路径不同

苹果系统中的路径配置
windows系统中的路径配置
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 160,026评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,655评论 1 296
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,726评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,204评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,558评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,731评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,944评论 2 314
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,698评论 0 203
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,438评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,633评论 2 247
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,125评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,444评论 3 255
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,137评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,103评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,888评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,772评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,669评论 2 271

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,574评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,620评论 4 59
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,209评论 0 17
  • 蒙特梭利教育法的特点在于十分重视儿童的早期教育,她为此从事了半个多世纪的教育实验与研究;她的教学方法从智力训练、感...
    想好了再改名阅读 3,043评论 0 2
  • 票选2012年奥运举办城市之前,也许是为了增加胜算吧,法国总统希拉克轻蔑地说:“英国的食物差不多是世界上最糟糕的,...
    刘淼阅读 1,290评论 1 13