Android怎么使用字體圖標 自定義FontTextView字體圖標控件-- 使用方法

首先我想說明一下字體圖標的好處，最大的好處就是自適應了，而且是使用TextView 不用去切圖，是矢量圖 靈活調用

第一步我要說明一下一般字體圖標的來源，我這里使用的是  --阿里巴巴矢量圖標庫 -網址 ：http://www.iconfont.cn  （申明這不是廣告哈~）

 

1.首先我們的自己創建一個自己的圖標庫，可以自己創建一些字體圖標，也可以在公共的圖標庫中加載到自己的庫中（這些操作不用我說了吧~）

這個時候我們創建了一個自定義的庫（為了保護隱私我特意打了碼 啊哈哈哈哈哈哈哈。。。。。），好了回歸正題，這時我們點擊上面的圖片中的   下載到本地  按鈕   然后會下載到一個這樣的包  

 

解壓這個包會看到里面的一個文件夾  打開，里面會看到這樣的目錄 仔細看里面有個demo.html,還有個demo.css ,至於css我們先不管，這時打開demo.html 

你會看到如下：

 

 這時還有幾個問題 ：1.我怎么把這些放入我的工程？  2.我在工程中怎么找到這些圖標？  3.這些圖標怎么設置顏色和具體大小？

 

首先我們來看一個地方 在網頁中 鼠標點擊右鍵 選中查看源

 

這時看到html中的紅色方框和網頁中的圖標是一一對應的 所以這個“ &#xe667 ”其實就是圖標,這樣就知道了圖標在什么地方 ，細心的同學可以發現，網頁中每個圖標下面都有三行文字，其中第二行就是，所以其實不用看html源碼，但是得知道為什么，對吧。

 

好了知道了這些我們開始完成第一點 ：1.我怎么把這些放入我的工程？

解答：

 　　　　其實很簡單 在剛才解壓的目錄中 選擇后綴名為.ttf的文件放入你的Android工程下的assets文件夾下 這樣就可以了（其他的我們不用管）。

 

2.我在工程中怎么找到這些圖標？

解答：  正如前面所說 我們其實已經知道怎么來代表一個圖標了，但是還是需要知道怎么在工程中用，其實也很簡單我們在res --> values  --> string.xml中添加字符串

如下：

對應的是網頁的前三個這樣我們做好了第一步。

第二步：

在activity_main.xml中給TextView加上上id

<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>

在MainActivity.java中填寫代碼

package com.example.ztestfonticon;

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));
//        tvShow.setText(getResources().getString(R.string.font2));  //可以試試我們添加的其他兩個圖標
//        tvShow.setText(getResources().getString(R.string.font3));
    }
}

這樣就完成了使用，現在可以看看運行效果了

 看到這個圖標顯示出來了，表示我們成功了。

 

3.這些圖標怎么設置顏色和具體大小？

解答： 其實很簡單，你怎么操作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"/>

java 代碼設置: 

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

效果:

 

理解的上面的我們就可以自定義一個字體圖標的控件 FontTextView

在工程目錄下新建一個繼承TextView 的class 起名為FontTextView

FontTextVew.java 代碼：

package com.example.views;

import android.content.Context;
import android.graphics.Typeface;
import android.util.AttributeSet;
import android.widget.TextView;

/**
 * 
 * 自定義字體圖標
 * @author M.Z
 *
 */
public class FontTextView extends TextView{

    
    /*
     * 控件在xml加載的時候是調用兩個參數的構造函數 ，為了自定義的控件的完整性我們可以
     * 都把構造函數寫出來
     */
    public FontTextView(Context context) {
        super(context);
        init(context);
    }
    
    public FontTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    public FontTextView(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" >

    <TextView
        android:id="@+id/tvShow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" 
        />
    
    <com.example.views.FontTextView
        android:id="@+id/fontView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world"
        />

</LinearLayout>

MainActivity.java

package com.example.ztestfonticon;

import com.example.views.FontTextView;

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

public class MainActivity extends Activity {

    private FontTextView fontView;
    @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));
//        tvShow.setText(getResources().getString(R.string.font2));  //可以試試我們添加的其他兩個圖標
//        tvShow.setText(getResources().getString(R.string.font3));
        
        tvShow.setTextSize(80);  //設置大小
        tvShow.setTextColor(Color.parseColor("#00ff00"));  //設置顏色
        
        fontView = (FontTextView) findViewById(R.id.fontView);
        fontView.setText(getResources().getString(R.string.font3));
        fontView.setTextSize(80);
        fontView.setTextColor(Color.parseColor("#ff0000"));  //設置顏色
    }
}

效果：

 

demo下載地址:  http://pan.baidu.com/s/1i4Adyip