自定义控件三部曲之绘图篇(十九)——LinearGradient与闪动文字效果

前言：家和万事兴

相关文章：
《Android自定义控件三部曲文章索引》：http://blog.csdn.net/harvic880925/article/details/50995268

博主这段时间工作实在是太忙了，全天无尿点……博客一直没更新，实在对不住大家……

这篇就给大家讲setShader的另一个参数，LinearGradient，使用过shape标签的同学，对这个方法估计都不莫生，就是线性渐变。跟PhotoShop中的线性渐变的原理和作用是一样的。这篇文章的最终会实现一个闪动文字效果控件：

###一、引言
有关渐变，以前有讲过一篇《详解shape标签》，其中讲述了<gradient/>标签的用法：

<gradient   
    android:type=["linear" | "radial" | "sweep"]    //共有3中渐变类型，线性渐变（默认）/放射渐变/扫描式渐变    
    android:angle="integer"     //渐变角度，必须为45的倍数，0为从左到右，90为从上到下    
    android:centerX="float"     //渐变中心X的相当位置，范围为0～1    
    android:centerY="float"     //渐变中心Y的相当位置，范围为0～1    
    android:startColor="color"   //渐变开始点的颜色    
    android:centerColor="color"  //渐变中间点的颜色，在开始与结束点之间    
    android:endColor="color"    //渐变结束点的颜色    
    android:gradientRadius="float"  //渐变的半径，只有当渐变类型为radial时才能使用    
    android:useLevel=["true" | "false"] />  //使用LevelListDrawable时就要设置为true。设为false时才有渐变效果    

其中的渐变类型有"linear" | “radial” | “sweep”,在代码中对应的类分别是LinearGradient、RaialGradient、SweepGradient；有关<gradient/>各个渐变效果的用法，不知道的同学强烈建议你先看看这篇文章。
这篇我们要讲就是线性渐变的LinearGradient；
###二、LinearGradient基本使用
####1、构造函数
我们先来看下LinearGradient的构造函数：
第一个构造函数：

public LinearGradient(float x0, float y0, float x1, float y1,int color0, int color1, TileMode tile)

用过PhotoShop的线性激变工具的同学，应该都知道，线性渐变其实是在指定的两个点之间填充渐变颜色。

• 参数中的(x0,y0)就是起始渐变点坐标，参数中(x1,y1)就是结束渐变点坐标；
• color0就是起始颜色，color1就是终止颜色；颜色值必须使用0xAARRGGBB形式的16进制表示！表示透明度的AA一定不能少。
• TileMode tile：与BitmapShader一样，用于指定控件区域大于指定的渐变区域时，空白区域的颜色填充方法。

很显然！这个方法，只能指定两种颜色之间的渐变。如果需要多种颜色之间的渐变，就需要使用下面的这个构造函数了。

第二个构造函数：

public LinearGradient(float x0, float y0, float x1, float y1,int colors[], float positions[], TileMode tile)

同样，(x0,y0)就是起始渐变点坐标，参数中(x1,y1)就是结束渐变点坐标
colors[]用于指定渐变的颜色值数组，同样，颜色值必须使用0xAARRGGBB形式的16进制表示！表示透明度的AA一定不能少。
positions[]与渐变的颜色相对应，取值是0-1的float类型，表示在每一个颜色在整条渐变线中的百分比位置
####2、两色渐变使用示例
我们先来看看两色渐变的构造函数是如何来使用的：

public class LinearGradientView extends View {
   
    private Paint mPaint;
    public LinearGradientView(Context context) {
   
        super(context);
        init();
    }

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

    public LinearGradientView(Context context, AttributeSet attrs, int defStyle) {
   
        super(context, attrs, defStyle);
        init();
    }

    private void init(){
   
	    setLayerType(LAYER_TYPE_SOFTWARE,null);
        mPaint = new Paint();
    }

    @Override
    protected void onDraw(Canvas canvas) {
   
        super.onDraw(canvas);
        mPaint.setShader(new LinearGradient(0,getHeight()/2,getWidth(),getHeight()/2,0xffff0000,0xff00ff00, Shader.TileMode.CLAMP));
        canvas.drawRect(0,0,getWidth(),getHeight(),mPaint);
    }
}

很简单，只需要在绘图的时候构造LinearGradient实例，通过Paint.setShader设置进去即可。
大家注意一下，我这里设置的渐变范围是从控件的左边中点到右边中点：

mPaint.setShader(new LinearGradient(0,getHeight()/2,getWidth(),getHeight()/2,0xffff0000,0xff00ff00, Shader.TileMode.CLAMP));

最后通过canvas.drawRect把整个控件区域画出来：

canvas