Android-自定義TextView（彩色字體與霓虹燈字體以及TextView的多項字體效果）

很多時候我們也需要制作一些彩色字體的文本，文本的霓虹燈效果，以及鏈接字體哈，字體背景色，下標之類的，而很多時候我們卻用多個textview去達到這個效果，可以說是很浪費時間浪費經精力的，這時候怎么辦呢？下面就有詳解。

文章結構：1.自定義TextView實現彩色字體與霓虹燈字體 2.一個可以字體實現多項效果的類（封裝好了，可直接使用）

先上圖看看我們要做的效果
這里寫圖片描述

一、自定義TextView之彩色字體,直接上代碼解釋

package com.demo.myview.colourfulFontOrNeonTextView;

import android.content.Context;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.Shader;
import android.util.AttributeSet;
import android.widget.TextView;

/**
 * Created by 符柱成 on 2016/8/19.
 */
public class ColourfulFontTextview extends TextView {

    int TextViewWidth;                      //TextView的寬度
    private LinearGradient mLinearGradient;     //渲染器
    private Paint paint;


    public ColourfulFontTextview(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        //在 onSizeChanged 方法中獲取到寬度，并對各個類進行初始化
        if (TextViewWidth == 0) {
            TextViewWidth = getMeasuredWidth();
            if (TextViewWidth > 0) {
                //得到 父類 TextView 中寫字的那支筆
                paint = getPaint();
                //初始化線性渲染器
                mLinearGradient = new LinearGradient(0, 0, TextViewWidth, 0,
                        new int[]{Color.BLUE, Color.YELLOW, Color.RED, Color.GREEN, Color.GRAY}, null, Shader.TileMode.CLAMP);
                //把渲染器給筆套上
                paint.setShader(mLinearGradient);

            }
        }
    }
}

2.在xml中的引用：

<?xml version="1.0" encoding="utf-8"?>
<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:background="@color/white"
    android:orientation="vertical"
    tools:context=".colourfulFontOrNeonTextView.ColourfulFontOrNeonAcitivity">

    <com.demo.myview.colourfulFontOrNeonTextView.colourfulFontTextview
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:text="彩色字體!彩色字體!彩色字體!"
        android:textSize="28sp" />

<!-- 霓虹燈字體，一會就不貼xml了-->
    <com.demo.myview.colourfulFontOrNeonTextView.NenoTextview
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:text="霓虹燈字體！霓虹燈字體！霓虹燈字體！"
        android:textSize="28sp" />
<!-- 多項字體效果，一會就不貼xml了-->

    <TextView
        android:id="@+id/tv_content"
        android:layout_width="match_parent"
        android:layout_height="130dp"
        android:layout_marginTop="10dp"
        android:background="@color/colorPrimary"
        android:text="baiduoryouku正常粗體斜體粗斜體上標下標前景色背景色圖片"
        android:textSize="25sp"/>

</LinearLayout>

二、自定義TextView之霓虹燈字體，直接上代碼解釋啦

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.Shader;
import android.util.AttributeSet;
import android.widget.TextView;

/**
 * Created by 符柱成 on 2016/8/19.
 */
public class NenoTextview extends TextView {
    int mViewWidth;                          //TextView的寬度
    private LinearGradient mLinearGradient;     //渲染器
    private Matrix mMatrix;         //圖片變換處理器
    private Paint mPaint;           //字體的筆
    int mTranslate=0;       //表示平移的速度

    public NenoTextview(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        //在 onSizeChanged 方法中獲取到寬度，并對各個類進行初始化
        if (mViewWidth == 0) {
            mViewWidth = getMeasuredWidth();

            if (mViewWidth > 0) {
                //得到 父類 TextView 中寫字的那支筆.，注意是繼承Textview
                mPaint = getPaint();
                //初始化線性渲染器 不了解的請看上面連接
                mLinearGradient = new LinearGradient(0, 0, mViewWidth, 0,
                        new int[]{Color.BLUE, Color.YELLOW, Color.RED, Color.GREEN}, null, Shader.TileMode.CLAMP);
                //把渲染器給筆套上
                mPaint.setShader(mLinearGradient);
                //初始化 Matrix，Matrix的原意是對一個Bitmap的圖片變化進行處理，它本身不能對圖像或者View進行變換，但是可以與其他的API結合進行圖形和View的變換，比如Canvas
                mMatrix = new Matrix();

            }
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        //先讓父類方法執行，由于上面我們給父類的 Paint 套上了渲染器，所以這里出現的文字已經是彩色的了
        super.onDraw(canvas);

        if (mMatrix != null) {
            //利用 Matrix 的平移動作實現霓虹燈的效果，這里是每次滾動1/10
            mTranslate += mViewWidth / 10;
            //如果滾出了控件邊界，就要拉回來重置開頭，這里重置到了屏幕左邊的空間
            if (mTranslate >  mViewWidth) {
                mTranslate = -mViewWidth/2;
            }
            //設置平移距離
            mMatrix.setTranslate(mTranslate, 0);
            //平移效果生效
            mLinearGradient.setLocalMatrix(mMatrix);
            //延遲 100 毫秒再次刷新 View 也就是再次執行本 onDraw 方法
            postInvalidateDelayed(50);

        }
    }
}

xml中的引用已經在上面給出了。

三、多項字體效果，下面將給出一個封裝好的類以及調用方法

package com.demo.myview.colourfulFontOrNeonTextView;

import android.content.Context;
import android.graphics.Color;
import android.graphics.drawable.Drawable;
import android.text.SpannableString;
import android.text.Spanned;
import android.text.TextPaint;
import android.text.style.AbsoluteSizeSpan;
import android.text.style.BackgroundColorSpan;
import android.text.style.ForegroundColorSpan;
import android.text.style.ImageSpan;
import android.text.style.StyleSpan;
import android.text.style.SubscriptSpan;
import android.text.style.SuperscriptSpan;
import android.text.style.TypefaceSpan;
import android.text.style.URLSpan;
import android.text.style.UnderlineSpan;

import com.demo.myview.R;

/**
 * Created by 符柱成 on 2016/8/19.
 */

//封裝好了Textview多種字體
public class SpannableStringFont {
    public static SpannableString changeFont(Context context, String content) {
        SpannableString ss = new SpannableString(content);
        // flag:標識在 Span 范圍內的文本前后輸入新的字符時是否把它們也應用這個效果
        //  Spanned.SPAN_EXCLUSIVE_EXCLUSIVE(前后都不包括)、
        //  Spanned.SPAN_INCLUSIVE_EXCLUSIVE(前面包括，后面不包括)、
        // Spanned.SPAN_EXCLUSIVE_INCLUSIVE(前面不包括，后面包括)、
        // Spanned.SPAN_INCLUSIVE_INCLUSIVE(前后都包括)
        //設置字體(default,default-bold,monospace,serif,sans-serif)
        ss.setSpan(new TypefaceSpan("monospace"), 6, 7, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        // 設置網絡超鏈接
        ss.setSpan(new URLSpan("http://www.baidu.com"), content.indexOf("baidu"), content.indexOf("or"), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        ss.setSpan(new URLSpan("http://www.youku.com"), content.indexOf("youku"), content.indexOf("正常"), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        // 設置字體顏色
        ss.setSpan(new ForegroundColorSpan(Color.parseColor("#ff0000")), content.indexOf("baidu"), content.indexOf("or"), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        ss.setSpan(new ForegroundColorSpan(Color.parseColor("#0000FF")), content.indexOf("or"), content.indexOf("youku"), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        ss.setSpan(new ForegroundColorSpan(Color.parseColor("#ff00ff")), content.indexOf("youku"), content.indexOf("正常"), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        // 設置字體大小
        ss.setSpan(new AbsoluteSizeSpan(sp2px(context, 25)), content.indexOf("baidu"), content.indexOf("or"), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        ss.setSpan(new AbsoluteSizeSpan(sp2px(context, 30)), content.indexOf("youku"), content.indexOf("正常"), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        // 設置下劃線
        ss.setSpan(new MyUnderlineSpan(), content.indexOf("youku"), content.indexOf("正常"), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        //設置字體樣式正常，粗體，斜體，粗斜體
        ss.setSpan(new StyleSpan(android.graphics.Typeface.NORMAL), content.indexOf("正常"), content.indexOf("粗體"), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);  //正常
        ss.setSpan(new StyleSpan(android.graphics.Typeface.BOLD), content.indexOf("粗體"), content.indexOf("斜體"), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);  //粗體
        ss.setSpan(new StyleSpan(android.graphics.Typeface.ITALIC), content.indexOf("斜體"), content.indexOf("粗斜體"), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);  //斜體
        ss.setSpan(new StyleSpan(android.graphics.Typeface.BOLD_ITALIC), content.indexOf("粗斜體"), content.indexOf("上標"), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);  //粗斜體

        //設置上下標
        ss.setSpan(new SubscriptSpan(), content.indexOf("上標"), content.indexOf("下標"), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);     //下標
        ss.setSpan(new SuperscriptSpan(), content.indexOf("下標"), content.indexOf("前景色"), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);   //上標

        //設置字體前景色
        ss.setSpan(new ForegroundColorSpan(Color.MAGENTA), content.indexOf("前景色"), content.indexOf("背景色"), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);  //設置前景色為洋紅色

        //設置字體背景色
        ss.setSpan(new BackgroundColorSpan(Color.CYAN), content.indexOf("背景色"), content.indexOf("圖片"), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);  //設置背景色為青色
//設置圖片
        Drawable drawable = context.getDrawable(R.drawable.home_serve_dot_pressed);
        drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
        ss.setSpan(new ImageSpan(drawable), content.indexOf("圖片"), ss.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        return ss;
    }

    //這里是干嘛的呢？為了設置下劃線唄
    static class MyUnderlineSpan extends UnderlineSpan {

        @Override
        public void updateDrawState(TextPaint ds) {
            ds.setUnderlineText(true);
        }
    }

    //這又是干嘛的呢？計算字體大小嘛
    private static int sp2px(Context context, float spValue) {
        final float fontScale = context.getResources().getDisplayMetrics().scaledDensity;
        return (int) (spValue * fontScale + 0.5f);
    }
}

嗯，，還缺個調用，為了方便新手使用，下面也貼出來：

public class ColourfulFontOrNeonAcitivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_colourful_font_or_neon_acitivity);
        initView();
    }
    private void initView(){
        TextView textView = (TextView) findViewById(R.id.tv_content);
        String content = textView.getText().toString();
        textView.setText(SpannableStringFont.changeFont(ColourfulFontOrNeonAcitivity.this,content));
        textView.setMovementMethod(LinkMovementMethod.getInstance());

    }
}

好了，彩色字體與霓虹燈字體以及TextView的多項字體效果都寫清楚了，歡迎大家在下方指出錯誤，共同學習！

轉載請注明：【JackFrost的博客】

更多精彩的內容，可以訪問JackFrost的博客

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,067評論 25贊 708
  • 發現 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,198評論 4贊 61
  • 要求： 完成注冊界面 完成注冊模塊的功能（將數據成功的插入數據庫中） 進行數據驗證（包括數據的完整性，密碼是否一致...
    LYF閑閑閑閑閱讀 329評論 1贊 1
  • 我向往那風， 當風撫動你耳旁的亂發， 你會閉上眼睛享受， 而不會像一只受驚的小兔一樣逃開， 讓我能親吻你的臉龐， ...
    Ice的夢閱讀 245評論 0贊 0
  • 特別懷念小時候，媽媽蒸的花卷，糖包。父母年紀大了，這些事兒不能勞煩她們了。自己動手，豐衣足食。好吧~_~廢話少說，...
    尋蕓閱讀 803評論 11贊 19