Android自定义字体实践

写在开始

对比ios系统,Android中默认的字体在中文显示上是十分难看的,尤其是字号比较大的时候,默认字体样式都会感觉比较粗,所以一般对于产品有追求的设计,都会考虑换一套字体样式,那么过程中就需要知道一些自定义字体的知识。这里的自定义系列翻译于一个看过比较好的系列,因为原文每篇的篇幅有点少,所以将几篇文章合在一起翻译。

原文地址

为什么自定义字体

Android系统默认使用的是一款叫Roboto的字体。如果你想要突出一个元素,那么会有很多的选择:颜色,大小,样式(粗体,斜体,普通),另一种方式就是使用不同于系统的字体来装饰你的view。

单个用法的最快实现

首先你需要去找一些想使用的 ttf 文件,比较好的地方有1001 Free Fonts或者是Google Fonts
然后,将这个文件放在Android项目的 assets 文件夹下面。

font files in our eat foody project

然后就是将这个字体运用到你想要改变的 TextView 上面。

TextView textview = (TextView) findViewById(R.id.your_referenced_textview);
 // adjust this line to get the TextView you want to change

Typeface typeface = Typeface.createFromAsset(getAssets(),"SourceSansPro-Regular.ttf"); // create a typeface from the raw ttf  
textview.setTypeface(typeface); // apply the typeface to the textview 

然后就结束了,如果想要改变一个Textview的字体就是这么简单,最好的情况就是上面的代码在 onCreate() 方法中进行调用。
如果你只想用在单个实例上那么这种方法是足够的,但是如果你想要给app中成千上万的view都使用自定义字体的话,这可能就不是一个好方法了,毕竟我们不可能在每个初始化的地方都去加上上面那一段。

提供字体内存缓存

虽然Android现在已经很流畅,但是我们依然应该考虑优化性能。所以,我们应该把自定义的字体缓存起来,这样就不用每次去初始化,在 britzl on stackoverflow上有一个比较好的答案。

public class FontCache {

    private static HashMap<String, Typeface> fontCache = new HashMap<>();

    public static Typeface getTypeface(String fontname, Context context) {
        Typeface typeface = fontCache.get(fontname);

        if (typeface == null) {
            try {
                typeface = Typeface.createFromAsset(context.getAssets(), fontname);
            } catch (Exception e) {
                return null;
            }

            fontCache.put(fontname, typeface);
        }

        return typeface;
    }
}

缓存下字体就能让我们不用一直去操作 Assets 文件夹,接下来就能实现一个继承自 TextView 的类。

继承TextView

首先来创建一个类继承自 TextView,这样就能在 XML 中来使用,它继承了 TextView所有的属性和功能,然后再加上自定义的字体。

public class EatFoodyTextView extends TextView {

    public EatFoodyTextView(Context context) {
        super(context);

        applyCustomFont(context);
    }

    public EatFoodyTextView(Context context, AttributeSet attrs) {
        super(context, attrs);

        applyCustomFont(context);
    }

    public EatFoodyTextView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);

        applyCustomFont(context);
    }

    private void applyCustomFont(Context context) {
        Typeface customFont = FontCache.getTypeface("SourceSansPro-Regular.ttf", context);
        setTypeface(customFont);
    }
}

开始的三个都是构造函数,里面都调用了 applyCustomFont() 方法,然后从上面的 FontCache 类中拿到缓存的字体文件,这样就不用每个view都去重复的从 Assets中取字体,节约了资源,最后将取到的字体设置到 setTypeface() 中。

使用自定义类

现在我们只需要在XML中直接使用,不需要再写其他的java代码,

<RelativeLayout  
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.futurestudio.foody.views.EatFoodyTextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/eat_foody_green_dark"
        android:textSize="20sp"
        android:text="Future Studio Blog"
        android:layout_marginBottom="24dp"/>

</RelativeLayout> 

我们可以依然使用TextView的其他属性,(textSize,textColor之类的),只需要把 <TextView/> 替换成 <com.futurestudio.foody.views.EatFoodyTextView/> ,这个前面的是全部的包名,然后就会自己应用字体。
但是使用中会发现,虽然一些TextView的属性比如 textSize 能正常的显示,但是 textStyle 这个属性并不能正常的生效。

添加每个ttf文件

首先将同一个系列的三种样式的 ttf 文件都加到 assets

Assets Folder with Font Files for Each Style

在XML中使用textStyle属性

在前面已经讲解了自定义view的使用

<io.futurestud.tutorials.customfont.CustomFontTextView  
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="12dp"
    android:text="http://futurestud.io/blog/"
    android:textSize="18sp"
    android:textStyle="bold"/>

一般情况下,我们更希望使用的是标准的 android:textStyle 而不是用一个自定义的属性 customfont:textStyle 。但是像上面这样的属性直接放上去肯定是不能生效的,还需要再加一些代码才行。
提示:如果你对使用 customfont:textStyle 的方式比较感兴趣,那么下一篇文章中会介绍如何使用。

实现CustomFontTextView

为了能继续的使用系统的 android:textStyle 属性,需要一些步骤。
首先需要在代码拿到这个属性的信息,这只需要一行代码:

int textStyle = attrs.getAttributeIntValue(ANDROID_SCHEMA, "textStyle", Typeface.NORMAL); 

attr 这个值是来自 TextView 的第二个构造函数中的参数,我们可以使用这个对象的 getAttributeIntValue() 方法获取XML的属性。
先看一下上面代码中的 ANDROID_SCHEMA 这个参数,这个是一个常量,定义在XML的最顶部中(xmlns:android="http://schemas.android.com/apk/res/android" ),第二个参数就是定义的属性名,最后一个参数是默认值,如果这个属性没有设置,那么就会选择 Typeface.NORMAL
当我们考虑了样式之后,完善一下代码,全部的代码看起来就像下面这样。

public class CustomFontTextView extends TextView {

    public static final String ANDROID_SCHEMA = "http://schemas.android.com/apk/res/android";

    public CustomFontTextView(Context context, AttributeSet attrs) {
        super(context, attrs);

        applyCustomFont(context, attrs);
    }

    public CustomFontTextView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);

        applyCustomFont(context, attrs);
    }

    private void applyCustomFont(Context context, AttributeSet attrs) {
        int textStyle = attrs.getAttributeIntValue(ANDROID_SCHEMA, "textStyle", Typeface.NORMAL);

        Typeface customFont = selectTypeface(context, textStyle);
        setTypeface(customFont);
    }

    private Typeface selectTypeface(Context context, int textStyle) {
        /*
        * information about the TextView textStyle:
        * http://developer.android.com/reference/android/R.styleable.html#TextView_textStyle
        */
        switch (textStyle) {
            case Typeface.BOLD: // bold
                return FontCache.getTypeface("SourceSansPro-Bold.ttf", context);

            case Typeface.ITALIC: // italic
                return FontCache.getTypeface("SourceSansPro-Italic.ttf", context);

            case Typeface.BOLD_ITALIC: // bold italic
                return FontCache.getTypeface("SourceSansPro-BoldItalic.ttf", context);

            case Typeface.NORMAL: // regular
            default:
                return FontCache.getTypeface("SourceSansPro-Regular.ttf", context);
        }
}

这样我们的自定义字体就能使用标准的应用字体样式 textStyle

看看成果

首先我们在XML中写一些布局,包括原生的 Roboto 字体以及不同形式的自定义字体。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="12dp"
        android:text="http://futurestud.io/blog/"
        android:textSize="18sp"/>

    <io.futurestud.tutorials.customfont.CustomFontTextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="12dp"
        android:text="http://futurestud.io/blog/"
        android:textSize="18sp"/>

    <io.futurestud.tutorials.customfont.CustomFontTextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="12dp"
        android:text="http://futurestud.io/blog/"
        android:textSize="18sp"
        android:textStyle="bold"/>

    <io.futurestud.tutorials.customfont.CustomFontTextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="12dp"
        android:text="http://futurestud.io/blog/"
        android:textSize="18sp"
        android:textStyle="italic"/>

</LinearLayout> 

这个文件在模拟器上显示的效果就像下面这样。

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

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,825评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,066评论 4 62
  • 知道思维导图缘于《最强大脑》这档节目,知道了原来有记忆法和思维导图这两样工具,也听说了思维导图有助于提高逻辑、记忆...
    文魁大脑孙承君阅读 368评论 0 0
  • 早上准备上班前打开手机,看到微信上她的留言。有关绘本,有关阅读的导向性,还有有关喜欢与否等等问题。现在有个习惯,看...
    hattie_pan阅读 397评论 0 0
  • 今天我和妈妈在儿童公园打秋千。一个铁管儿上挂着四个秋千。有两个隔着远的铁管。人多,大家都在玩儿,所以没有空...
    山药粉阅读 723评论 4 2