快捷導(dǎo)航

Android自定義控件打造閃閃發(fā)光字體

更新時(shí)間：2017年01月09日 16:38:18 作者：aNotFound404

這篇文章主要為大家詳細(xì)介紹了Android自定義控件打造閃閃發(fā)光字體，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

介紹

在小米的開機(jī)動(dòng)畫和一些歡迎界面中，我們經(jīng)?？吹竭@種閃閃發(fā)光的流光字體?？雌饋砗莒趴幔鋵?shí)實(shí)現(xiàn)原理相當(dāng)簡(jiǎn)單，我們只需要寫自定義控件繼承TextView,然后使用渲染器Gradient設(shè)置顏色漸變和Paint的setShadowLayer方法設(shè)置陰影，然后不斷刷新改變位移即可。

實(shí)現(xiàn)

首先寫一個(gè)shineTextView類繼承自TextView.

public class ShineTextView extends TextView
{

  // 線性漸變渲染 
  private LinearGradient mLinearGradient;
  //環(huán)形漸變渲染 
  private RadialGradient mRadialGradient;
  // 渲染矩陣
  private Matrix mGradientMatrix;
  // 畫筆
  private Paint mPaint;
  private int mViewWidth = 0;
  // 亮度位移距離
  private int mTranslate = 0;


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

在這段代碼中，我們定義了兩個(gè)顏色渲染器

// 線性漸變渲染 
private LinearGradient mLinearGradient; 
//環(huán)形漸變渲染 
private RadialGradient mRadialGradient;

LinearGradient 是線性漸變渲染，代表顏色的漸變呈直線方向遞變。
我們可以使用LinearGradient 來實(shí)現(xiàn)上面第二張圖中的效果

RadialGradient 是環(huán)形漸變渲染，代表顏色的漸變呈圓環(huán)形遞變。

我們可以使用RadialGradient 來實(shí)現(xiàn)上面第一張圖中小米開機(jī)動(dòng)畫的效果。

我們通過控制mTranslate 亮度位移距離來使顏色產(chǎn)生動(dòng)態(tài)變化的效果。

OnSizeChanged

@Override
  protected void onSizeChanged(int w, int h, int oldw, int oldh)
  {
    super.onSizeChanged(w, h, oldw, oldh);
    if (mViewWidth == 0 || mViewHeight==0)
    {
      mViewWidth = getMeasuredWidth();
      mViewHeight=getMeasuredHeight();
      if (mViewWidth > 0 || mViewHeight>0 )
      {
        mPaint = getPaint();
         // 創(chuàng)建RadialGradient對(duì)象 
        // 第一個(gè),第二個(gè)參數(shù)表示漸變圓中心坐標(biāo) 
        // 第三個(gè)參數(shù)表示半徑 
        // 第四個(gè),第五個(gè),第六個(gè)與線性渲染相同 
        mRadialGradient = new RadialGradient(50, 50,30, new int[] {
            0x11FEB726, 0xffFEB726, 0x33FEB726 }, new float[] { 0,
            0.5f, 1 }, Shader.TileMode.CLAMP);

        // 創(chuàng)建LinearGradient對(duì)象
        // 起始點(diǎn)坐標(biāo)（-mViewWidth, 0） 終點(diǎn)坐標(biāo)（0，0）
        // 第一個(gè),第二個(gè)參數(shù)表示漸變起點(diǎn) 可以設(shè)置起點(diǎn)終點(diǎn)在對(duì)角等任意位置 
        // 第三個(gè),第四個(gè)參數(shù)表示漸變終點(diǎn) 
        // 第五個(gè)參數(shù)表示漸變顏色 
        // 第六個(gè)參數(shù)可以為空,表示坐標(biāo),值為0-1 
        // 如果這是空的，顏色均勻分布，沿梯度線。 
        // 第七個(gè)表示平鋪方式 
        // CLAMP重復(fù)最后一個(gè)顏色至最后 
        // MIRROR重復(fù)著色的圖像水平或垂直方向已鏡像方式填充會(huì)有翻轉(zhuǎn)效果 
        // REPEAT重復(fù)著色的圖像水平或垂直方向 
        mLinearGradient = new LinearGradient(-mViewWidth, 0, 0, 0,
            new int[] { 0x33ffffff, 0xffffffff, 0x33ffffff },
            new float[] { 0, 0.5f, 1 }, Shader.TileMode.CLAMP);
        mPaint.setShader(mRadialGradient);
        mPaint.setColor(Color.parseColor("#ffffffff"));
        //設(shè)置字體陰影效果
        //第一個(gè)參數(shù)代表陰影的半徑
        //第二個(gè)參數(shù)代表陰影在X方向的延伸像素
        //第三個(gè)參數(shù)代表陰影在Y方向的延伸像素

        mPaint.setShadowLayer(3, 2, 2, 0xFFFF00FF);
        mGradientMatrix = new Matrix();
      }
    }
  }

在OnSizeChange方法中，我們主要完成一些初始化操作，比如獲取控件寬高、初始化顏色渲染器和設(shè)置字體陰影效果。

onDraw

接下來最后一步，我們只需要在onDraw方法中繪制效果，并且通過Matrix矩陣來使?jié)u變效果產(chǎn)生位移就可以了。

@Override
  protected void onDraw(Canvas canvas)
  {
    super.onDraw(canvas);
    if ( mGradientMatrix != null)
    {
      mTranslateX += mViewWidth / 10;
      mTranslateY += mViewHeight / 10;
      if (mTranslateX > 2 * mViewWidth || mTranslateY >2*mViewHeight)
      {
        mTranslateX = -mViewWidth;
        mTranslateY = -mViewHeight;
      }
      mGradientMatrix.setTranslate(mTranslateX, mTranslateY);

      // mLinearGradient.setLocalMatrix(mGradientMatrix);
      mRadialGradient.setLocalMatrix(mGradientMatrix);
      postInvalidateDelayed(50);
    }
  }

源碼下載：http://xiazai.jb51.net/201701/yuanma/AndroidShineText(jb51.net).rar

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: