Android 中使用Font Awesome的方法

发布时间:2018-06-03作者:laosun阅读(1709)

Android

Font Awesome为您提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持的效果。今天我们来介绍一下Android 中使用Font Awesome的方法。

    官网地址,这里我们选择 Font Awesome 4.7.0 。

    因为下载非常慢,博主找了一个中文版的 Font Awesome 4.7.0

    下载后解压:找到font目录,进去后,如下所示,我们只用到 fontawesome-webfont.ttf 这个文件

    image.png

    好了,找到android的assets目录,没有的创建的,至于如何创建,这里就不绕过去说了,搜索引擎去找吧。

    然后我们创建工具类,如下所示,这个是扫描控件自动编译的。

    import android.content.Context;
    import android.graphics.Typeface;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.TextView;
    
    /**
     * Created by sun on 2018/6/2.
     */
    public class FontManager {
    
        public static Typeface getTypeface(Context context) {
            return Typeface.createFromAsset(context.getAssets(), "fontawesome-webfont.ttf");
        }
    
        public static void markAsIconContainer(View v, Typeface typeface) {
            if (v instanceof ViewGroup) {
                ViewGroup vg = (ViewGroup) v;
                for (int i = 0; i < vg.getChildCount(); i++) {
                    View child = vg.getChildAt(i);
                    markAsIconContainer(child, typeface);
                }
            } else if (v instanceof TextView) {
                ((TextView) v).setTypeface(typeface);
            }
        }
    
    }

    然后我们打开 res/values/string.xml

    增加两行,如下所示:

    <string name="fa_btn_save">&#xf0c7;保存</string>
    <string name="fa_user_icon">&#xf007;</string>

    上边的name是随便命名的,后边的&#x是固定写法,中间的f0c7和f007是Font Awesome的unicode编码。后边还有个;分号。

    unicode查找方式就去上边的站点去查找即可,找到自己需要的icon,点击进去就可以看到。如下所示:

    image.png

    另外在layout布局xml中,引用即可,如下所示:

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/main_axml"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
    
        <Button
            android:id="@+id/btn_fs1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:text="@string/fa_btn_save" />
    
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/btn_fs1"
            android:layout_centerHorizontal="true"
            android:text="@string/fa_user_icon"
            android:textSize="66dp" />
    </RelativeLayout>

    另外在MainActivitys中增加两行:

    import android.graphics.Typeface;
    import android.os.Bundle;
    import android.support.v7.app.AppCompatActivity;
    
    public class MainActivity extends AppCompatActivity {
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            //使用Font Awesome
            Typeface iconFont = FontManager.getTypeface(getApplicationContext());
            FontManager.markAsIconContainer(findViewById(R.id.main_axml), iconFont);
        }
    }

    测试一下效果图如下:

    image.png

1 +1

版权声明

 源码  android

 请文明留言

0 条评论