欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android自定义控件打造闪闪发光字体

程序员文章站 2024-02-19 17:46:10
介绍 在小米的开机动画和一些欢迎界面中, 我们经常看到这种闪闪发光的流光字体。看起来很炫酷,其实实现原理相当简单,我们只需要写自定义控件继承textview,然后使用渲染...

介绍

在小米的开机动画和一些欢迎界面中, 我们经常看到这种闪闪发光的流光字体。看起来很炫酷,其实实现原理相当简单,我们只需要写自定义控件继承textview,然后使用渲染器gradient设置颜色渐变和paint的setshadowlayer方法设置阴影,然后不断刷新改变位移即可。

Android自定义控件打造闪闪发光字体 

Android自定义控件打造闪闪发光字体

实现

首先写一个shinetextview类继承自textview.

public class shinetextview extends textview
{

  // 线性渐变渲染 
  private lineargradient mlineargradient;
  //环形渐变渲染 
  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);
  }

在这段代码中 ,我们定义了两个颜色渲染器

// 线性渐变渲染 
private lineargradient mlineargradient; 
//环形渐变渲染 
private radialgradient mradialgradient;

lineargradient 是线性渐变渲染 ,代表颜色的渐变呈直线方向递变。
我们可以使用lineargradient 来实现上面第二张图中的效果

Android自定义控件打造闪闪发光字体

radialgradient 是环形渐变渲染 ,代表颜色的渐变呈圆环形递变。

我们可以使用radialgradient 来实现上面第一张图中小米开机动画的效果。

Android自定义控件打造闪闪发光字体

我们通过控制mtranslate 亮度位移距离来使颜色产生动态变化的效果。

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();
         // 创建radialgradient对象 
        // 第一个,第二个参数表示渐变圆中心坐标 
        // 第三个参数表示半径 
        // 第四个,第五个,第六个与线性渲染相同 
        mradialgradient = new radialgradient(50, 50,30, new int[] {
            0x11feb726, 0xfffeb726, 0x33feb726 }, new float[] { 0,
            0.5f, 1 }, shader.tilemode.clamp);

        // 创建lineargradient对象
        // 起始点坐标(-mviewwidth, 0) 终点坐标(0,0)
        // 第一个,第二个参数表示渐变起点 可以设置起点终点在对角等任意位置 
        // 第三个,第四个参数表示渐变终点 
        // 第五个参数表示渐变颜色 
        // 第六个参数可以为空,表示坐标,值为0-1 
        // 如果这是空的,颜色均匀分布,沿梯度线。 
        // 第七个表示平铺方式 
        // clamp重复最后一个颜色至最后 
        // mirror重复着色的图像水平或垂直方向已镜像方式填充会有翻转效果 
        // repeat重复着色的图像水平或垂直方向 
        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"));
        //设置字体阴影效果
        //第一个参数代表阴影的半径
        //第二个参数代表阴影在x方向的延伸像素
        //第三个参数代表阴影在y方向的延伸像素

        mpaint.setshadowlayer(3, 2, 2, 0xffff00ff);
        mgradientmatrix = new matrix();
      }
    }
  }

在onsizechange方法中,我们主要完成一些初始化操作,比如获取控件宽高、初始化颜色渲染器和设置字体阴影效果。

ondraw

接下来最后一步,我们只需要在ondraw方法中绘制效果,并且通过matrix矩阵来使渐变效果产生位移就可以了。

@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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。