`
modabobo
  • 浏览: 508298 次
文章分类
社区版块
存档分类
最新评论

Android中自定义视图View之---前奏篇

 
阅读更多

前言

好长时间没写blog了，心里感觉有点空荡荡的，今天有时间就来写一个关于自定义视图的的blog吧。关于这篇blog，网上已经有很多案例了，其实没什么难度的。但是我们在开发的过程中有时候会用到一些自定义的View以达到我们所需要的效果。其实网上的很多案例我们看完之后，发现这部分没什么难度的，我总结了两点：

1、准备纸和笔，计算坐标

2、在onDraw方法中开始画图，invalidate方法刷新，onTouchEvent方法监听触摸事件

对于绘图相关的知识，之前在弄JavaSE相关的知识的时候，写过俄罗斯方块，也是用画笔绘制的，然后在刷新。原理都一样的。

在这个过程中，我们需要了解两个很重要的东西：

画笔：Paint

画布：Canvas


引用资料

http://blog.csdn.net/t12x3456/article/details/10473225


讲解内容

那么下面我们就开始来介绍相关的内容了。我主要分一下步骤来讲解一下：

1、介绍Android中的Paint和Canvas的概念和使用方法

2、介绍Android中重要的概念渲染对象Shader

3、自定义一个LabelView(和Android中的TextView差不多)

4、自定义渐变的圆形和长条的SeekBar

5、自定义颜色选择器

6、自定义闪烁的TextView

7、实现360手机卫士中的流量监控的折线图

那么我们也知道今天的文章内容应该会很多，所以大家要有耐心的看完。这篇文章如果看懂了，也耐心的看完了，相信对自定义View的相关知识了解的应该也差不多了，自己在开发的过程中实现自己想要的简单的View应该是没有问题的。


内容讲解

下面开始正式介绍内容

一、介绍Android中的Paint和Canvas的概念和使用方法

Android中的Paint和Canvas的概念是很简单的，就是我们用画笔在画布上进行绘制没什么难度的，我们只要拿到画笔Paint和画布Canvas对象就可以进行操作了。当然Canvas对象提供了很多绘制图形的方法，下面来看一下代码吧：

package com.example.drawpathdemo;

import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
import android.graphics.Shader;
import android.util.AttributeSet;
import android.view.View;

public class DrawView extends View {

	public DrawView(Context context) {
		super(context);
	}
	
	public DrawView(Context context, AttributeSet attributeSet) {  
	    super(context, attributeSet);  
	}

	@SuppressLint("DrawAllocation")
	@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);
		/*
		 * 方法 说明 drawRect 绘制矩形 drawCircle 绘制圆形 drawOval 绘制椭圆 drawPath 绘制任意多边形
		 * drawLine 绘制直线 drawPoin 绘制点
		 */
		// 创建画笔
		Paint p = new Paint();
		p.setColor(Color.RED);// 设置红色

		canvas.drawText("画圆：", 10, 20, p);// 画文本
		canvas.drawCircle(60, 20, 10, p);// 小圆
		p.setAntiAlias(true);// 设置画笔的锯齿效果。 true是去除，大家一看效果就明白了
		canvas.drawCircle(120, 20, 20, p);// 大圆

		canvas.drawText("画线及弧线：", 10, 60, p);
		p.setColor(Color.GREEN);// 设置绿色
		canvas.drawLine(60, 40, 100, 40, p);// 画线
		canvas.drawLine(110, 40, 190, 80, p);// 斜线
		//画笑脸弧线
		p.setStyle(Paint.Style.STROKE);//设置空心
		RectF oval1=new RectF(150,20,180,40);
		canvas.drawArc(oval1, 180, 180, false, p);//小弧形
		oval1.set(190, 20, 220, 40);
		canvas.drawArc(oval1, 180, 180, false, p);//小弧形
		oval1.set(160, 30, 210, 60);
		canvas.drawArc(oval1, 0, 180, false, p);//小弧形

		canvas.drawText("画矩形：", 10, 80, p);
		p.setColor(Color.GRAY);// 设置灰色
		p.setStyle(Paint.Style.FILL);//设置填满
		canvas.drawRect(60, 60, 80, 80, p);// 正方形
		canvas.drawRect(60, 90, 160, 100, p);// 长方形

		canvas.drawText("画扇形和椭圆:", 10, 120, p);
		/* 设置渐变色 这个正方形的颜色是改变的 */
		Shader mShader = new LinearGradient(0, 0, 100, 100,
				new int[] { Color.RED, Color.GREEN, Color.BLUE, Color.YELLOW,
						Color.LTGRAY }, null, Shader.TileMode.REPEAT); // 一个材质,打造出一个线性梯度沿著一条线。
		p.setShader(mShader);
		// p.setColor(Color.BLUE);
		RectF oval2 = new RectF(60, 100, 200, 240);// 设置个新的长方形，扫描测量
		canvas.drawArc(oval2, 200, 130, true, p);
		// 画弧，第一个参数是RectF：该类是第二个参数是角度的开始，第三个参数是多少度，第四个参数是真的时候画扇形，是假的时候画弧线
		//画椭圆，把oval改一下
		oval2.set(210,100,250,130);
		canvas.drawOval(oval2, p);

		canvas.drawText("画三角形：", 10, 200, p);
		// 绘制这个三角形,你可以绘制任意多边形
		Path path = new Path();
		path.moveTo(80, 200);// 此点为多边形的起点
		path.lineTo(120, 250);
		path.lineTo(80, 250);
		path.close(); // 使这些点构成封闭的多边形
		canvas.drawPath(path, p);

		// 你可以绘制很多任意多边形，比如下面画六连形
		p.reset();//重置
		p.setColor(Color.LTGRAY);
		p.setStyle(Paint.Style.STROKE);//设置空心
		Path path1=new Path();
		path1.moveTo(180, 200);
		path1.lineTo(200, 200);
		path1.lineTo(210, 210);
		path1.lineTo(200, 220);
		path1.lineTo(180, 220);
		path1.lineTo(170, 210);
		path1.close();//封闭
		canvas.drawPath(path1, p);
		/*
		 * Path类封装复合(多轮廓几何图形的路径
		 * 由直线段*、二次曲线,和三次方曲线，也可画以油画。drawPath(路径、油漆),要么已填充的或抚摸
		 * (基于油漆的风格),或者可以用于剪断或画画的文本在路径。
		 */
		
		//画圆角矩形
		p.setStyle(Paint.Style.FILL);//充满
		p.setColor(Color.LTGRAY);
		p.setAntiAlias(true);// 设置画笔的锯齿效果
		canvas.drawText("画圆角矩形:", 10, 260, p);
		RectF oval3 = new RectF(80, 260, 200, 300);// 设置个新的长方形
		canvas.drawRoundRect(oval3, 20, 15, p);//第二个参数是x半径，第三个参数是y半径
		
		//画贝塞尔曲线
		canvas.drawText("画贝塞尔曲线:", 10, 310, p);
		p.reset();
		p.setStyle(Paint.Style.STROKE);
		p.setColor(Color.GREEN);
		Path path2=new Path();
		path2.moveTo(100, 320);//设置Path的起点
		path2.quadTo(150, 310, 170, 400); //设置贝塞尔曲线的控制点坐标和终点坐标
		canvas.drawPath(path2, p);//画出贝塞尔曲线
		
		//画点
		p.setStyle(Paint.Style.FILL);
		canvas.drawText("画点：", 10, 390, p);
		canvas.drawPoint(60, 390, p);//画一个点
		canvas.drawPoints(new float[]{60,400,65,400,70,400}, p);//画多个点
		
		//画图片，就是贴图
		Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher);
		canvas.drawBitmap(bitmap, 250,360, p);
	}
}
运行一下看效果图：



1、Path对象

在代码中我们看到了我们新建了一个Paint画笔对象，对于画笔对象，它有很多设置属性的：

void setARGB(int a, int r, int g, int b) 设置Paint对象颜色，参数一为alpha透明通道

void setAlpha(int a) 设置alpha不透明度，范围为0~255

void setAntiAlias(boolean aa) //是否抗锯齿，默认值是false

void setColor(int color) //设置颜色，这里Android内部定义的有Color类包含了一些常见颜色定义

void setFakeBoldText(boolean fakeBoldText) //设置伪粗体文本

void setLinearText(boolean linearText) //设置线性文本

PathEffect setPathEffect(PathEffect effect) //设置路径效果

Rasterizer setRasterizer(Rasterizer rasterizer) //设置光栅化

Shader setShader(Shader shader) //设置阴影 ,我们在后面会详细说一下Shader对象的

void setTextAlign(Paint.Align align) //设置文本对齐

void setTextScaleX(float scaleX) //设置文本缩放倍数，1.0f为原始

void setTextSize(float textSize) //设置字体大小

Typeface setTypeface(Typeface typeface) //设置字体，Typeface包含了字体的类型，粗细，还有倾斜、颜色等

注：

Paint mp = new paint();
mp.setTypeface(Typeface.DEFAULT_BOLD)

常用的字体类型名称还有：
Typeface.DEFAULT //常规字体类型
Typeface.DEFAULT_BOLD //黑体字体类型
Typeface.MONOSPACE //等宽字体类型
Typeface.SANS_SERIF //sans serif字体类型
Typeface.SERIF //serif字体类型

除了字体类型设置之外，还可以为字体类型设置字体风格，如设置粗体：
Paint mp = new Paint();
Typeface font = Typeface.create(Typeface.SANS_SERIF, Typeface.BOLD);
p.setTypeface( font );

常用的字体风格名称还有：
Typeface.BOLD //粗体
Typeface.BOLD_ITALIC //粗斜体
Typeface.ITALIC //斜体
Typeface.NORMAL //常规

void setUnderlineText(boolean underlineText) //设置下划线

void setStyle(Style style) //设置画笔样式

注：

常用的样式

Paint.Style.FILL
Paint.Style.STROKE
Paint.Style.FILL_AND_STROKE

这里的FILL和STROKE两种方式用的最多，他们的区别也很好理解的，FILL就是填充的意思，STROKE就是空心的意思，只有 图形的轮廓形状，内部是空的。

void setStrokeWidth(float width) //在画笔的样式为STROKE的时候，图形的轮廓宽度


2、Canvas对象

对于画布对象Canvas我们是从onDraw方法中获取到的，所以这里我们就可以看不来了，我们在自定义视图的时候都会继承View类，然后在他的onDraw方法中拿到Canvas对象，进行各种绘制了。下面就来一一看一下各种绘制的方法吧：

首先来看一下如何创建一个画笔对象：

Paint p = new Paint();
p.setColor(Color.RED);// 设置红色
我们可以设置画笔的颜色，当然还有其他的方法，我们可以设置画笔的粗细，是否有锯齿等，后面会说道。

1）、画圆(drawCircle)

我们想一下，如果画出一个圆形的话需要哪些要素，学过几何的同学都知道：圆形坐标+半径 就可以确定一个圆形了

canvas.drawCircle(120, 20, 20, p);
参数一：圆心的x坐标

参数二：圆心的y坐标

参数三：圆的半径

参数四：画笔对象

还有一个这里我们设置了画笔是否有锯齿：

p.setAntiAlias(true);// 设置画笔的锯齿效果。 true是去除，大家一看效果就明白了
关于这个锯齿，其实很好理解，就是如果没有锯齿效果，那么画出来的圆形就很光滑，有锯齿看上去的圆形很粗糙的。但是默认情况下，画笔是有锯齿的。之所以这样，是因为在没有锯齿效果的情况下，绘制图形效率会比有锯齿效果低，所以系统考虑了效率问题，就把默认值设置成有锯齿了，我们在实际绘图过程中需要衡量一下的。

2）、画直线(drawLine)

我们想一下，如果画出一个直线的话需要哪些要素，起始点坐标+终点坐标 就可以确定一条直线了

canvas.drawLine(60, 40, 100, 40, p);// 画线
参数一：起始点的x坐标

参数二：起始点的y坐标

参数三：终点的x坐标

参数四：终点的y坐标

参数五：画笔对象


3）、画椭圆(drawOval)

我们想一下，如果画出椭圆的话需要哪些要素，长轴+短轴的长度

RectF oval1=new RectF(150,20,180,40);
canvas.drawOval(oval2, p);

参数一：椭圆的外接矩形

参数二：画笔对象

这里先来说一下RectF的相关知识吧：在绘图中这个对象是十分重要的，它表示的是一个矩形，它有四个参数：

left,top,right,bottom

这四个值是相对于设备屏幕的起始点开始的。

RectF oval1=new RectF(150,20,180,40);
比如上面的这个矩形，说白了就是这样：


矩形的左上角的坐标是：(150,20)

矩形的右下角的坐标是：(180,30)

那么我们就知道这个矩形的宽是：180-150=30；高是：40-20=20

其实还有与RectF对象对应的还有一个对象：Rect,它也是四个参数，和RectF唯一的区别就是，Rect中的参数是float类型的，RectF中的参数是int类型的

那么一个矩形就可以确定一个椭圆的，这个矩形就是和这个椭圆外接：


那么椭圆的长轴就是矩形的宽，短轴就是矩形的高

这样就可以确定一个椭圆了，那么如果我们想画一个圆形的话用这种方式也是可以的，只要把RectF设置成正方形就可以了。


4）、画弧线/画扇形(drawArc)

我们想一下，如果画出一个弧线的话需要哪些要素，起始的弧度+弧线的弧度+外围的矩形大小

这个和上面画椭圆很相似的，就相当于在他的基础上多了其实弧度+弧线的弧度

p.setStyle(Paint.Style.STROKE);//设置空心
RectF oval1=new RectF(150,20,180,40);
canvas.drawArc(oval1, 180, 180, false, p);//小弧形

参数一：外接弧形的矩形

参数二：弧线开始的弧度

参数三：弧线的弧度

参数四：是一个boolean类型的参数：true的时候画扇形，是false的时候画弧线

参数五：画笔对象


5）、画矩形(drawRect)

RectF oval1=new RectF(150,20,180,40);
canvas.drawRect(oval1, p);
参数一：矩形对象

参数二：画笔对象


6）、画圆角矩形(drawRoundRect)

RectF oval3 = new RectF(80, 260, 200, 300);// 设置个新的长方形
canvas.drawRoundRect(oval3, 20, 15, p);//第二个参数是x半径，第三个参数是y半径
参数一：矩形大小

参数二：圆角的x半径(椭圆的长轴的一半)

参数三：圆角的y半径(椭圆的短轴的一半)

参数四：画笔对象


其实这个和正常的矩形不一样的是：在四个角是有弧度的，那么弧度的话，就会想到椭圆了，我们在上面说道椭圆的几个要素：长轴和短轴，那么这里就是取长轴的一半和短轴的一半。


7）、画三角形/多边形(drawPath)

我们想一下，如果绘制三角形/多边形的话需要哪些要素，能确定多边形的形状最重要的因素就是角，那么这些角就是一个坐标

Path path = new Path();
path.moveTo(80, 200);// 此点为多边形的起点
path.lineTo(120, 250);
path.lineTo(80, 250);
path.close(); // 使这些点构成封闭的多边形
canvas.drawPath(path, p);
这里需要介绍一下Path对象了，这个对象见名知意，是路径的意思，它有两个参数：

参数一：x坐标

参数二：y坐标

路径是多个点相连接的。所以Path提供了两个方法：moveTo和lineTo

moveTo方法的作用是设置我们绘制路径的开始点，如果没有这个方法的调用的话，系统默认的开始点是(0,0)点

lineTo方法就是将路径的上一个坐标点和当前坐标点进行连接，或者可以认为设置多边形的每个角的坐标点

那么对于三角形的话，我们需要三个点即可。

这个画三角形其实我们用上面的画直线的方法也可以实现的，反过来也是，我们用Path对象也是可以画出一条直线的，那么他们的本质区别是：

绘制路径方式的焦点是角(坐标点)

绘制直线的方式的焦点是边(长度)


8）、画点(drawPoint)

canvas.drawPoint(60, 390, p);//画一个点
canvas.drawPoints(new float[]{60,400,65,400,70,400}, p);//画多个点
这里有两个方法：

drawPoint

参数一：点的x坐标

参数二：点的y坐标

参数三：画笔对象

drawPoints

参数一：多个点的数组

参数二：画笔对象


9）、画贝塞尔曲线(drawPath)

这种曲线其实我们在开发过程中很少用到，不过在图形学中绘制贝塞尔曲线的时候，我们需要的要素是：起始点+控制点+终点

Path path2=new Path();
path2.moveTo(100, 320);//设置Path的起点
path2.quadTo(150, 310, 170, 400); //设置贝塞尔曲线的控制点坐标和终点坐标
canvas.drawPath(path2, p);//画出贝塞尔曲线
它也是使用Path对象的。不过用的是quadTo方法

参数一：控制点的x坐标

参数二：控制点的y坐标

参数三：终点的x坐标

参数四：终点的y坐标

这里需要注意的是，调用moveTo方法来确定开始坐标的，如果没有调用这个方法，那么起始点坐标默认是：(0,0)


10）、绘制图片(drawBitmap)

//画图片，就是贴图
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher);
canvas.drawBitmap(bitmap, 250,360, p);
参数一：图片对象Bitmap

参数二：图片相对于设备屏幕的left值

参数二：图片相对于设备屏幕的top值

其实我们可以把图片认为是一个矩形，因为图片本身是有长度和宽度的，所以这里只需要矩形的左上角的坐标点，就可以确定这张图片在屏幕中的位置了。


上面就介绍完了Path对象和Canvas对象，他们两个对象是我们自定义视图的基础，所以这部分内容一定要掌握，当然这两个对象没什么难度的，只要对几何图形有点了解的同学，这些东东是很简单的。


二、颜色渲染器Shader对象

下面再来看下一个知识点：颜色渲染Shader对象

为什么我要把Shader对象单独拿出来说一下呢？因为这个对象在对于我们处理图形特效的时候是非常有用的

下面来看一下Android中Shader对象

在Android Api中关于颜色渲染的几个重要的类:
Shader,BitmapShader,ComposeShader,LinearGradient,RadialGradient,SweepGradient
它们之间的关系是：

Shader是后面几个类的父类


该类作为基类主要是返回绘制时颜色的横向跨度。其子类可以作用与Piant。通过 paint.setShader(Shader shader);来实现一些渲染效果。之作用与图形不作用与bitmap。
构造方法为默认的构造方法。

枚举：
emun Shader.TileMode

定义了平铺的3种模式：
static final Shader.TileMode CLAMP: 边缘拉伸.
static final Shader.TileMode MIRROR：在水平方向和垂直方向交替景象, 两个相邻图像间没有缝隙.
Static final Shader.TillMode REPETA：在水平方向和垂直方向重复摆放,两个相邻图像间有缝隙缝隙.

方法：
1. boolean getLoaclMatrix(Matrix localM); 如果shader有一个非本地的矩阵将返回true.
localM：如果不为null将被设置为shader的本地矩阵.
2. void setLocalMatrix(Matrix localM);
设置shader的本地矩阵,如果localM为空将重置shader的本地矩阵。

Shader的直接子类:
BitmapShader : 位图图像渲染
LinearGradient : 线性渲染
RadialGradient : 环形渲染
SweepGradient : 扫描渐变渲染/梯度渲染
ComposeShader : 组合渲染，可以和其他几个子类组合起来使用
是不是很像Animation及其子类的关系(AlphaAnimation,RotateAnimation,ScaleAnimation,TranslateAnimation, AnimationSet)
既有具体的渲染效果，也有渲染效果的组合

下面说下Shader的使用步骤:
1. 构建Shader对象
2. 通过Paint的setShader方法设置渲染对象
3.设置渲染对象
4.绘制时使用这个Paint对象


那么下面就开始来介绍各个Shader的相关知识：

1、BitmapShader

public BitmapShader(Bitmap bitmap,Shader.TileMode tileX,Shader.TileMode tileY)
调用这个方法来产生一个画有一个位图的渲染器（Shader）。
bitmap 在渲染器内使用的位图
tileX The tiling mode for x to draw the bitmap in. 在位图上X方向渲染器平铺模式
tileY The tiling mode for y to draw the bitmap in. 在位图上Y方向渲染器平铺模式
TileMode：
CLAMP ：如果渲染器超出原始边界范围，会复制范围内边缘染色。
REPEAT ：横向和纵向的重复渲染器图片，平铺。
MIRROR ：横向和纵向的重复渲染器图片，这个和REPEAT重复方式不一样，他是以镜像方式平铺。

代码：

package com.tony.shader;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Shader;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.ShapeDrawable;
import android.graphics.drawable.shapes.OvalShape;
import android.util.AttributeSet;
import android.view.View;

public class BitmapShaderView extends View {

	private BitmapShader bitmapShader = null;
	private Bitmap bitmap = null;
	private Paint paint = null;
	private ShapeDrawable shapeDrawable = null;
	private int BitmapWidth = 0;
	private int BitmapHeight = 0;

	public BitmapShaderView(Context context) {
		super(context);

		// 得到图像
		bitmap = ((BitmapDrawable) getResources().getDrawable(R.drawable.cat))
				.getBitmap();
		BitmapWidth = bitmap.getWidth();
		BitmapHeight = bitmap.getHeight();
		// 构造渲染器BitmapShader
		bitmapShader = new BitmapShader(bitmap, Shader.TileMode.MIRROR,Shader.TileMode.REPEAT);
	}
	
	public BitmapShaderView(Context context,AttributeSet set) {
		super(context, set);
	}
	
	
	@Override
	protected void onDraw(Canvas canvas) {
        // TODO Auto-generated method stub
	super.onDraw(canvas);
	//将图片裁剪为椭圆形    
        //构建ShapeDrawable对象并定义形状为椭圆    
        shapeDrawable = new ShapeDrawable(new OvalShape());  
        //得到画笔并设置渲染器  
        shapeDrawable.getPaint().setShader(bitmapShader);  
        //设置显示区域  
        shapeDrawable.setBounds(20, 20,BitmapWidth-140,BitmapHeight);  
        //绘制shapeDrawable  
        shapeDrawable.draw(canvas);  
	}

}
效果图：



2、LinearGradient

相信很多人都看过歌词同步的效果, 一是竖直方向的滚动，另一方面是水平方面的歌词颜色渐变点亮效果,这种效果怎么做呢? 这就需要用到LinearGradient线性渲染,下面还是先看具体的使用:

LinearGradient有两个构造函数;
public LinearGradient(float x0, float y0, float x1, float y1, int[] colors, float[] positions,Shader.TileMode tile)
参数:
float x0: 渐变起始点x坐标
float y0:渐变起始点y坐标
float x1:渐变结束点x坐标
float y1:渐变结束点y坐标
int[] colors:颜色 的int 数组
float[] positions: 相对位置的颜色数组,可为null, 若为null,可为null,颜色沿渐变线均匀分布
Shader.TileMode tile: 渲染器平铺模式

public LinearGradient(float x0, float y0, float x1, float y1, int color0, int color1,Shader.TileMode tile)
float x0: 渐变起始点x坐标
float y0:渐变起始点y坐标
float x1:渐变结束点x坐标
float y1:渐变结束点y坐标
int color0: 起始渐变色
int color1: 结束渐变色
Shader.TileMode tile: 渲染器平铺模式


代码：

package com.tony.shader;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.graphics.Shader;
import android.view.View;

public class LinearGradientView extends View {

	private LinearGradient linearGradient = null;  
    private Paint paint = null;  
	
    public LinearGradientView(Context context)  
    {  
        super(context);  
        linearGradient = new LinearGradient(0, 0, 100, 100, new int[] {  
                Color.YELLOW, Color.GREEN, Color.TRANSPARENT, Color.WHITE }, null,  
                Shader.TileMode.REPEAT);  
        paint = new Paint();  
    }  
    
	public LinearGradientView(Context context, AttributeSet attrs) {
		super(context, attrs);
	}
	
	@Override
	protected void onDraw(Canvas canvas) {
		// TODO Auto-generated method stub
		super.onDraw(canvas);
		//设置渲染器
		paint.setShader(linearGradient);  
                //绘制圆环
		canvas.drawCircle(240, 360, 200, paint); 
	}

}
效果：


关于这个渲染对象，我们需要多解释一下了，因为这个渲染器用的地方很多：

我们在具体看一下他的构造方法中的参数含义：

Paint paint2 = new Paint();
paint2.setColor(Color.BLACK);
paint2.setStrokeWidth(5);
paint2.setStyle(Paint.Style.FILL);
Shader mShader = new LinearGradient(0,0,100,100,
		Color.RED,
		Color.BLUE, Shader.TileMode.CLAMP);
paint2.setShader(mShader);
Rect rect = new Rect();
rect.left = 0;
rect.right = 300;
rect.top = 0;
rect.bottom = 300;
canvas.drawRect(rect, paint2);
效果图：


我们把构造方法中的值改变一下：

Shader mShader = new LinearGradient(0,0,300,300,
		Color.RED,
		Color.BLUE, Shader.TileMode.CLAMP);
在看一下效果：


这里我们就是到了构造方法中的四个参数值的含义了：

参数一：渲染开始点的x坐标

参数二：渲染开始点的y坐标

参数三：渲染结束点的x坐标

参数四：渲染结束点的y坐标

因为这里我们设置矩形的大小是高和宽都是300

所以，从第一个例子中我们可以看出：渲染结束点之后的颜色是最后一种颜色：蓝色


我们在将代码改变一下：

Shader mShader = new LinearGradient(0,0,300,0,
		Color.RED,
		Color.BLUE, Shader.TileMode.CLAMP);
效果：


结束点的坐标设置成：(300,0)就实现了横向渲染

当然我们也可以实现纵向渲染的，这里就不演示了。


在修改一下代码：

Shader mShader = new LinearGradient(0,0,100,100,
                Color.RED,
                Color.BLUE, Shader.TileMode.MIRROR);
效果：


我们将渲染模式改成：Shader.TileMode.MIRROR 镜像模式了

我们看到效果，当渲染结束点是(100,100)的时候，那么后面还是会继续渲染的，而且是相反的(就像照镜子一样)，然后在渲染一下，每次渲染的效果都是和之前的相反。因为矩形的长度和宽度都是300，所以这里会渲染三次。

我们在将代码修改一下：

Shader mShader = new LinearGradient(0,0,100,100,
                Color.RED,
                Color.BLUE, Shader.TileMode.REPEAT);
将渲染模式改成：Shader.TileMode.REPEAT 重复模式了

效果：


这里看到也是会渲染三次的，但是和镜像模式不同的是，它们的渲染方向都是一致的。


从上面的三种渲染模式可以看出来，之后渲染的结束点小于渲染图形的大小的时候才会有效果的，如果我们把大小改一下：

Shader mShader = new LinearGradient(0,0,300,300,
                Color.RED,
                Color.BLUE, Shader.TileMode.REPEAT);
我们渲染结束点改成矩形的高度和宽度大小
效果：


效果和Shader.TileMode.CLAMP一样的。

这种渲染器用的地方还是很多的，我们后面介绍长条渐变的SeekBar就要用到这种渲染器


3、RadialGradient

圆形渲染器，这种渲染器很好理解，就是同心圆的渲染机制

public RadialGradient(float x, float y, float radius, int[] colors, float[] positions,Shader.TileMode tile)
float x: 圆心X坐标
float y: 圆心Y坐标
float radius: 半径
int[] colors: 渲染颜色数组
floate[] positions: 相对位置数组,可为null, 若为null,可为null,颜色沿渐变线均匀分布
Shader.TileMode tile:渲染器平铺模式

public RadialGradient(float x, float y, float radius, int color0, int color1,Shader.TileMode tile)
float x: 圆心X坐标
float y: 圆心Y坐标
float radius: 半径
int color0: 圆心颜色
int color1: 圆边缘颜色
Shader.TileMode tile:渲染器平铺模式


代码：

package com.tony.shader;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RadialGradient;
import android.graphics.Shader;
import android.util.AttributeSet;
import android.view.View;

public class RadialGradientView extends View {

	Paint mPaint = null;
	// 环形渐变渲染
	Shader mRadialGradient = null;
	public RadialGradientView(Context context) {
		super(context);
		//1.圆心X坐标2.Y坐标3.半径 4.颜色数组 5.相对位置数组，可为null 6.渲染器平铺模式 
		mRadialGradient = new RadialGradient(240, 240, 240, new int[] {  
				Color.YELLOW, Color.GREEN, Color.TRANSPARENT, Color.RED }, null,  
                Shader.TileMode.REPEAT);  
  
        mPaint = new Paint();  
	}
	
	
	public RadialGradientView(Context context, AttributeSet attrs) {
		super(context, attrs);
	}
	
	 @Override  
	    protected void onDraw(Canvas canvas) {  
	        // 绘制环形渐变  
	        mPaint.setShader(mRadialGradient);  
	        // 第一个,第二个参数表示圆心坐标  
	        // 第三个参数表示半径  
	        canvas.drawCircle(240, 360, 200, mPaint);  
	    }  
	  
	
	

}
效果：


关于这个圆形渲染器，我们可以实现水波纹的效果：

package com.tony.testshader;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RadialGradient;
import android.graphics.Shader;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.ShapeDrawable;
import android.graphics.drawable.shapes.OvalShape;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.MotionEvent;
import android.view.View;
/**
 * 水波纹效果
 * @author tony
 *
 */

 public class WaterRipplesView extends View {

	Shader mBitmapShader = null;
	Bitmap mBitmapPn = null;
	Paint mPaint = null;
	Shader mRadialGradient = null;
	Canvas mCanvas = null;
	ShapeDrawable mShapeDrawable = null;

	public WaterRipplesView(Context context) {
		super(context);

		// 初始化工作
		Bitmap bitmapTemp = ((BitmapDrawable) getResources().getDrawable(
				R.drawable.leaf)).getBitmap();
		DisplayMetrics dm = getResources().getDisplayMetrics();
		// 创建与当前使用的设备窗口大小一致的图片
		mBitmapPn = Bitmap.createScaledBitmap(bitmapTemp, dm.widthPixels,
				dm.heightPixels, true);
		// 创建BitmapShader object
		mBitmapShader = new BitmapShader(mBitmapPn, Shader.TileMode.REPEAT,
				Shader.TileMode.MIRROR);
		mPaint = new Paint();
	}

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

	@Override
	protected void onDraw(Canvas canvas) {
		// TODO Auto-generated method stub
		super.onDraw(canvas);

		// 将图片裁剪为椭圆型
		// 创建ShapeDrawable object，并定义形状为椭圆
		mShapeDrawable = new ShapeDrawable(new OvalShape());// OvalShape:椭圆
		// 设置要绘制的椭圆形的东西为ShapeDrawable图片
		mShapeDrawable.getPaint().setShader(mBitmapShader);
		// 设置显示区域
		mShapeDrawable.setBounds(0, 0, mBitmapPn.getWidth(),
				mBitmapPn.getHeight());
		// 绘制ShapeDrawable
		mShapeDrawable.draw(canvas);
		if (mRadialGradient != null) {
			mPaint.setShader(mRadialGradient);
			canvas.drawCircle(0, 0, 1000, mPaint);
		}

	}

	// @覆写触摸屏事件
	public boolean onTouchEvent(MotionEvent event) {
		// @设置alpha通道（透明度）
		mPaint.setAlpha(400);
		mRadialGradient = new RadialGradient(event.getX(), event.getY(), 48,
				new int[] { Color.WHITE, Color.TRANSPARENT },null, Shader.TileMode.REPEAT);
		// @重绘
		postInvalidate();
		return true;
	}

}
重写触发方法，获取触发点坐标，设置渲染器的圆形坐标，即可
效果：



4、SweepGradient

梯度渲染器，或者是扇形选择器，和雷达扫描效果差不多

public SweepGradient(float cx, float cy, int[] colors, float[] positions)
Parameters:
cx 渲染中心点x 坐标
cy 渲染中心y 点坐标
colors 围绕中心渲染的颜色数组，至少要有两种颜色值
positions 相对位置的颜色数组,可为null, 若为null,可为null,颜色沿渐变线均匀分布

public SweepGradient(float cx, float cy, int color0, int color1)
Parameters:
cx 渲染中心点x 坐标
cy 渲染中心点y 坐标
color0 起始渲染颜色
color1 结束渲染颜色


代码：

package com.tony.testshader;  
  
  
import android.content.Context;  
import android.graphics.Canvas;  
import android.graphics.Color;  
import android.graphics.Paint;  
import android.graphics.Shader;  
import android.graphics.SweepGradient;  
import android.util.AttributeSet;  
import android.view.View;  
  
  
public class SweepGradientView extends View {  
      
    Paint mPaint = null;    
    // 梯度渲染    
    Shader mSweepGradient = null;    
      
    public SweepGradientView(Context context) {  
        super(context);  
          
         // 创建SweepGradient对象    
        // 第一个,第二个参数中心坐标    
        // 后面的参数与线性渲染相同    
        mSweepGradient = new SweepGradient(240, 360, new int[] {Color.CYAN,Color.DKGRAY,Color.GRAY,Color.LTGRAY,Color.MAGENTA,    
                Color.GREEN,Color.TRANSPARENT, Color.BLUE }, null);    
        mPaint = new Paint();    
    }  
      
  
  
    public SweepGradientView(Context context, AttributeSet attrs) {  
        super(context, attrs);  
    }  
      
      
    @Override  
    protected void onDraw(Canvas canvas) {  
        super.onDraw(canvas);  
          
         // 绘制梯度渐变    
        mPaint.setShader(mSweepGradient);    
          
        canvas.drawCircle(240, 360, 200, mPaint);  
    }  
}
效果图：


这种渲染器用到的地方很多，我们后面说道自定义圆形渐变的SeekBar就会用到这种渲染器


三、自定义视图View的案例

下面我们就是开始正式的进入自定义视图View了

在讲解正式内容之前，我们先来看一下基本知识

1、我们在自定义视图View的时候正确的步骤和方法

1）、必须定义有Context/Attrbuite参数的构造方法，并且调用父类的方法

public LabelView(Context context, AttributeSet attrs)

不然会报错：



2）、重写onMeasure方法

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
	setMeasuredDimension(measureWidth(widthMeasureSpec),
			measureHeight(heightMeasureSpec));
}
来设置View的大小：

private int measureWidth(int measureSpec) {
	int result = 0;
	int specMode = MeasureSpec.getMode(measureSpec);
	int specSize = MeasureSpec.getSize(measureSpec);
	Log.i("DEMO","measureSpec:"+Integer.toBinaryString(measureSpec));
	Log.i("DEMO","specMode:"+Integer.toBinaryString(specMode));
	Log.i("DEMO","specSize:"+Integer.toBinaryString(specSize));

	/**
	 * 一般来说，自定义控件都会去重写View的onMeasure方法，因为该方法指定该控件在屏幕上的大小。
			protected void onMeasure (int widthMeasureSpec, int heightMeasureSpec)
			onMeasure传入的两个参数是由上一层控件传入的大小，有多种情况，重写该方法时需要对计算控件的实际大小，然后调用setMeasuredDimension(int, int)设置实际大小。
			onMeasure传入的widthMeasureSpec和heightMeasureSpec不是一般的尺寸数值，而是将模式和尺寸组合在一起的数值。
			我们需要通过int mode = MeasureSpec.getMode(widthMeasureSpec)得到模式，用int size = MeasureSpec.getSize(widthMeasureSpec)得到尺寸。
			mode共有三种情况，取值分别为MeasureSpec.UNSPECIFIED, MeasureSpec.EXACTLY, MeasureSpec.AT_MOST。
			MeasureSpec.EXACTLY是精确尺寸，当我们将控件的layout_width或layout_height指定为具体数值时如andorid:layout_width="50dip"，
			或者为FILL_PARENT是，都是控件大小已经确定的情况，都是精确尺寸。
			MeasureSpec.AT_MOST是最大尺寸，当控件的layout_width或layout_height指定为WRAP_CONTENT时，
			控件大小一般随着控件的子空间或内容进行变化，此时控件尺寸只要不超过父控件允许的最大尺寸即可。因此，此时的mode是AT_MOST，size给出了父控件允许的最大尺寸。
			MeasureSpec.UNSPECIFIED是未指定尺寸，这种情况不多，一般都是父控件是AdapterView，通过measure方法传入的模式。
			因此，在重写onMeasure方法时要根据模式不同进行尺寸计算。下面代码就是一种比较典型的方式：
	 */

	if (specMode == MeasureSpec.EXACTLY) {
		// We were told how big to be
		result = specSize;
	} else {
		// Measure the text
		result = (int) mTextPaint.measureText(mText) + getPaddingLeft()
				+ getPaddingRight();
		if (specMode == MeasureSpec.AT_MOST) {
			// Respect AT_MOST value if that was what is called for by measureSpec
			result = Math.min(result, specSize);
		}
	}

	return result;
}
在这个方法中我们需要计算View的具体宽度了：

int specMode = MeasureSpec.getMode(measureSpec);
int specSize = MeasureSpec.getSize(measureSpec);
MeasureSpec提供了两个方法：getMode和getSize

这两个方法是获取计算模式和大小的，他们内部实现是用位操作的，我们看一下源码：


用一个int类型就可以将mode和size表示出来：int类型是32位的，这里用高2位表示mode.低30位表示大小。

我们可以在上面打印一下log看一下：


内部处理很简单，直接进行位相与操作就可以了：


一般来说，自定义控件都会去重写View的onMeasure方法，因为该方法指定该控件在屏幕上的大小。

protected void onMeasure (int widthMeasureSpec, int heightMeasureSpec)
onMeasure传入的两个参数是由上一层控件传入的大小，有多种情况，重写该方法时需要对计算控件的实际大小，然后调用

setMeasuredDimension(int, int)设置实际大小。onMeasure传入的widthMeasureSpec和heightMeasureSpec不是一般的尺寸数值，而是将模式和尺寸组合在一起的数值。我们需要通过

int mode = MeasureSpec.getMode(widthMeasureSpec)得到模式，

用int size = MeasureSpec.getSize(widthMeasureSpec)得到尺寸。


Mode共有三种情况，

取值分别为

MeasureSpec.UNSPECIFIED

MeasureSpec.EXACTLY

MeasureSpec.AT_MOST

A) MeasureSpec.EXACTLY是精确尺寸，当我们将控件的layout_width或layout_height指定为具体数值时如andorid:layout_width="50dip"，或者为FILL_PARENT是，都是控件大小已经确定的情况，都是精确尺寸。

B) MeasureSpec.AT_MOST是最大尺寸，当控件的layout_width或layout_height指定为WRAP_CONTENT时，
控件大小一般随着控件的子空间或内容进行变化，此时控件尺寸只要不超过父控件允许的最大尺寸即可。因此，此时的mode是AT_MOST，size给出了父控件允许的最大尺寸。

C) MeasureSpec.UNSPECIFIED是未指定尺寸，这种情况不多，一般都是父控件是AdapterView，通过measure方法传入的模式。
因此，在重写onMeasure方法时要根据模式不同进行尺寸计算。下面代码就是一种比较典型的方式：


3）、重写onTouchEvent方法

获取坐标，计算坐标，然后通过invalidate和postInvalidate方法进行画面的刷新操作即可

关于这两个刷新方法的区别是：invalidate方法是在UI线程中调用的，postInvalidate可以在子线程中调用，而且最重要的是postInvalidate可以延迟调用


2、正式讲解一下例子

1）、第一个例子：自定义LabelView

这个View主要实现的功能和Android中提供的TextView差不多

代码：

package com.example.drawpathdemo;

/*
 * Copyright (C) 2007 The Android Open Source Project
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

// Need the following import to get access to the app resources, since this
// class is in a sub-package.
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;


/**
 * Example of how to write a custom subclass of View. LabelView
 * is used to draw simple text views. Note that it does not handle
 * styled text or right-to-left writing systems.
 *
 */
public class LabelView extends View {
    private Paint mTextPaint;
    private String mText;
    private int mAscent;
    
    /**
     * Constructor.  This version is only needed if you will be instantiating
     * the object manually (not from a layout XML file).
     * @param context
     */
    public LabelView(Context context) {
        super(context);
        initLabelView();
    }

    /**
     * Construct object, initializing with any attributes we understand from a
     * layout file. These attributes are defined in
     * SDK/assets/res/any/classes.xml.
     * 
     * @see android.view.View#View(android.content.Context, android.util.AttributeSet)
     */
    public LabelView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initLabelView();

        TypedArray a = context.obtainStyledAttributes(attrs,
                R.styleable.LabelView);

        CharSequence s = a.getString(R.styleable.LabelView_text);
        if (s != null) {
            setText(s.toString());
        }

        // Retrieve the color(s) to be used for this view and apply them.
        // Note, if you only care about supporting a single color, that you
        // can instead call a.getColor() and pass that to setTextColor().
        setTextColor(a.getColor(R.styleable.LabelView_textColor, 0xFF000000));

        int textSize = a.getDimensionPixelOffset(R.styleable.LabelView_textSize, 0);
        if (textSize > 0) {
            setTextSize(textSize);
        }

        a.recycle();
    }

    private final void initLabelView() {
        mTextPaint = new Paint();
        mTextPaint.setAntiAlias(true);
        // Must manually scale the desired text size to match screen density
        mTextPaint.setTextSize(16 * getResources().getDisplayMetrics().density);
        mTextPaint.setColor(0xFF000000);
        setPadding(3, 3, 3, 3);
    }

    /**
     * Sets the text to display in this label
     * @param text The text to display. This will be drawn as one line.
     */
    public void setText(String text) {
        mText = text;
        requestLayout();
        invalidate();
    }

    /**
     * Sets the text size for this label
     * @param size Font size
     */
    public void setTextSize(int size) {
        // This text size has been pre-scaled by the getDimensionPixelOffset method
        mTextPaint.setTextSize(size);
        requestLayout();
        invalidate();
    }

    /**
     * Sets the text color for this label.
     * @param color ARGB value for the text
     */
    public void setTextColor(int color) {
        mTextPaint.setColor(color);
        invalidate();
    }

    /**
     * @see android.view.View#measure(int, int)
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        setMeasuredDimension(measureWidth(widthMeasureSpec),
                measureHeight(heightMeasureSpec));
    }

    /**
     * Determines the width of this view
     * @param measureSpec A measureSpec packed into an int
     * @return The width of the view, honoring constraints from measureSpec
     */
    private int measureWidth(int measureSpec) {
        int result = 0;
        int specMode = MeasureSpec.getMode(measureSpec);
        int specSize = MeasureSpec.getSize(measureSpec);
        Log.i("DEMO","measureSpec:"+Integer.toBinaryString(measureSpec));
        Log.i("DEMO","specMode:"+Integer.toBinaryString(specMode));
        Log.i("DEMO","specSize:"+Integer.toBinaryString(specSize));

        /**
         * 一般来说，自定义控件都会去重写View的onMeasure方法，因为该方法指定该控件在屏幕上的大小。
			protected void onMeasure (int widthMeasureSpec, int heightMeasureSpec)
			onMeasure传入的两个参数是由上一层控件传入的大小，有多种情况，重写该方法时需要对计算控件的实际大小，然后调用setMeasuredDimension(int, int)设置实际大小。
			onMeasure传入的widthMeasureSpec和heightMeasureSpec不是一般的尺寸数值，而是将模式和尺寸组合在一起的数值。
			我们需要通过int mode = MeasureSpec.getMode(widthMeasureSpec)得到模式，用int size = MeasureSpec.getSize(widthMeasureSpec)得到尺寸。
			mode共有三种情况，取值分别为MeasureSpec.UNSPECIFIED, MeasureSpec.EXACTLY, MeasureSpec.AT_MOST。
			MeasureSpec.EXACTLY是精确尺寸，当我们将控件的layout_width或layout_height指定为具体数值时如andorid:layout_width="50dip"，
			或者为FILL_PARENT是，都是控件大小已经确定的情况，都是精确尺寸。
			MeasureSpec.AT_MOST是最大尺寸，当控件的layout_width或layout_height指定为WRAP_CONTENT时，
			控件大小一般随着控件的子空间或内容进行变化，此时控件尺寸只要不超过父控件允许的最大尺寸即可。因此，此时的mode是AT_MOST，size给出了父控件允许的最大尺寸。
			MeasureSpec.UNSPECIFIED是未指定尺寸，这种情况不多，一般都是父控件是AdapterView，通过measure方法传入的模式。
			因此，在重写onMeasure方法时要根据模式不同进行尺寸计算。下面代码就是一种比较典型的方式：
         */
        
        if (specMode == MeasureSpec.EXACTLY) {
            // We were told how big to be
            result = specSize;
        } else {
            // Measure the text
            result = (int) mTextPaint.measureText(mText) + getPaddingLeft()
                    + getPaddingRight();
            if (specMode == MeasureSpec.AT_MOST) {
                // Respect AT_MOST value if that was what is called for by measureSpec
                result = Math.min(result, specSize);
            }
        }

        return result;
    }

    /**
     * Determines the height of this view
     * @param measureSpec A measureSpec packed into an int
     * @return The height of the view, honoring constraints from measureSpec
     */
    private int measureHeight(int measureSpec) {
        int result = 0;
        int specMode = MeasureSpec.getMode(measureSpec);
        int specSize = MeasureSpec.getSize(measureSpec);

        mAscent = (int) mTextPaint.ascent();
        if (specMode == MeasureSpec.EXACTLY) {
            // We were told how big to be
            result = specSize;
        } else {
            // Measure the text (beware: ascent is a negative number)
            result = (int) (-mAscent + mTextPaint.descent()) + getPaddingTop()
                    + getPaddingBottom();
            if (specMode == MeasureSpec.AT_MOST) {
                // Respect AT_MOST value if that was what is called for by measureSpec
                result = Math.min(result, specSize);
            }
        }
        return result;
    }

    /**
     * Render the text
     * 
     * @see android.view.View#onDraw(android.graphics.Canvas)
     */
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawText(mText, getPaddingLeft(), getPaddingTop() - mAscent, mTextPaint);
    }
}
首先来看一下构造方法方法：

/**
 * Construct object, initializing with any attributes we understand from a
 * layout file. These attributes are defined in
 * SDK/assets/res/any/classes.xml.
 * 
 * @see android.view.View#View(android.content.Context, android.util.AttributeSet)
 */
public LabelView(Context context, AttributeSet attrs) {
	super(context, attrs);
	initLabelView();

	TypedArray a = context.obtainStyledAttributes(attrs,
			R.styleable.LabelView);

	CharSequence s = a.getString(R.styleable.LabelView_text);
	if (s != null) {
		setText(s.toString());
	}

	// Retrieve the color(s) to be used for this view and apply them.
	// Note, if you only care about supporting a single color, that you
	// can instead call a.getColor() and pass that to setTextColor().
	setTextColor(a.getColor(R.styleable.LabelView_textColor, 0xFF000000));

	int textSize = a.getDimensionPixelOffset(R.styleable.LabelView_textSize, 0);
	if (textSize > 0) {
		setTextSize(textSize);
	}

	a.recycle();
}
这里面我们用到了自定义属性的相关知识，不了解的同学可以转战：

http://blog.csdn.net/jiangwei0910410003/article/details/17006087
拿到字体的大小、颜色、内容。

然后再来看一下：

onDraw方法：

/**
 * Render the text
 * 
 * @see android.view.View#onDraw(android.graphics.Canvas)
 */
@Override
protected void onDraw(Canvas canvas) {
	super.onDraw(canvas);
	canvas.drawText(mText, getPaddingLeft(), getPaddingTop() - mAscent, mTextPaint);
}
这里使用drawText方法开始绘制文本内容，关于getPaddingLeft就是获取字体在View中的Padding值，但是这里有一个知识点：

mAscent变量，它是通过：

mAscent = (int) mTextPaint.ascent();
获取到的。关于Paint的两个方法ascent和descent，这里解释一下：如下图


1.基准点是baseline
2.ascent：是baseline之上至字符最高处的距离
3.descent：是baseline之下至字符最低处的距离
4.leading：是上一行字符的descent到下一行的ascent之间的距离，也就是相邻行间的空白距离
5.top：是指的是最高字符到baseline的值，即ascent的最大值
6.bottom：是指最低字符到baseline的值，即descent的最大值


再来看一下设置字体颜色的方法：

/**
 * Sets the text color for this label.
 * @param color ARGB value for the text
 */
public void setTextColor(int color) {
	mTextPaint.setColor(color);
	invalidate();
}
就是设置画笔的颜色，设置完之后需要生效，那么调用invalidate方法刷新一下即可。

上面的LabelView就定义好了。是不是很简单。没什么难度。主要就是定义一个画笔绘制文本，然后在计算view的大小即可。

下面来看一下用法：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:test="http://schemas.android.com/apk/res/com.example.drawpathdemo"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.drawpathdemo.MainActivity" >

    <com.example.drawpathdemo.LabelView
        android:id="@+id/progressview"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        test:text="aaa"
        test:textColor="#990099"
        test:textSize="16dp"/>
</RelativeLayout>
注意前缀test的定义方式：xmlns:test="http://schemas.android.com/apk/res/com.example.drawpathdemo"

xmlns:test="http://schemas.android.com/apk/res/包名"即可


效果图：



2）、第二个例子：自定义渐变的SeekBar

我们知道系统自带的SeekBar控件是没有渐变色的，比如下面这种效果：


看到这里我们可能会想到了，我们之前说到的Shader渲染对象了，这里我们选择LinearGradient渲染器来实现


代码：

package com.example.drawpathdemo;

import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.Shader;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;

public class SpringProgressView extends View {
	
	private static final int[] SECTION_COLORS = {0xffffd300,Color.GREEN,0xff319ed4};
	private float maxCount;
	private float currentCount;
	private Paint mPaint;
	private int mWidth,mHeight;
	
	private Bitmap bitMap;
	
	public SpringProgressView(Context context, AttributeSet attrs,
			int defStyleAttr) {
		super(context, attrs, defStyleAttr);
		initView(context);
	}

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

	public SpringProgressView(Context context) {
		super(context);
		initView(context);
	}
	
	private void initView(Context context) {
		/*bitMap = BitmapFactory.decodeResource(context.getResources(),
				R.drawable.scrubber_control_pressed_holo);*/
	}

	@SuppressLint("DrawAllocation")
	@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);
		mPaint = new Paint();
		mPaint.setAntiAlias(true);
		int round = mHeight/2;
		mPaint.setColor(Color.GRAY);
		
		RectF rectBg = new RectF(0, 0, mWidth, mHeight);
		canvas.drawRoundRect(rectBg, round, round, mPaint);
		mPaint.setColor(Color.WHITE);
		RectF rectBlackBg = new RectF(2, 2, mWidth-2, mHeight-2);
		canvas.drawRoundRect(rectBlackBg, round, round, mPaint);
		
		float section = currentCount/maxCount;
		RectF rectProgressBg = new RectF(3, 3, (mWidth-3)*section, mHeight-3);
		if(section <= 1.0f/3.0f){
			if(section != 0.0f){
				mPaint.setColor(SECTION_COLORS[0]);
			}else{
				mPaint.setColor(Color.TRANSPARENT);
			}
		}else{
			int count = (section <= 1.0f/3.0f*2 ) ? 2 : 3;
			int[] colors = new int[count];
			System.arraycopy(SECTION_COLORS, 0, colors, 0, count);
			float[] positions = new float[count];
			if(count == 2){
				positions[0] = 0.0f;
				positions[1] = 1.0f-positions[0];
			}else{
				positions[0] = 0.0f;
				positions[1] = (maxCount/3)/currentCount;
				positions[2] = 1.0f-positions[0]*2;
			}
			positions[positions.length-1] = 1.0f;
			LinearGradient shader = new LinearGradient(3, 3, (mWidth-3)*section, mHeight-3, colors,null, Shader.TileMode.MIRROR);
			mPaint.setShader(shader);
		}
		canvas.drawRoundRect(rectProgressBg, round, round, mPaint);
		//canvas.drawBitmap(bitMap, rectProgressBg.right-20, rectProgressBg.top-4, null);
	}
	
	private int dipToPx(int dip) {
		float scale = getContext().getResources().getDisplayMetrics().density;
		return (int) (dip * scale + 0.5f * (dip >= 0 ? 1 : -1));
	}
	
	public void setMaxCount(float maxCount) {
		this.maxCount = maxCount;
	}
	
	public void setCurrentCount(float currentCount) {
		this.currentCount = currentCount > maxCount ? maxCount : currentCount;
		invalidate();
	}
	
	public float getMaxCount() {
		return maxCount;
	}
	
	public float getCurrentCount() {
		return currentCount;
	}
	
	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		int widthSpecMode = MeasureSpec.getMode(widthMeasureSpec);
		int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec);
		int heightSpecMode = MeasureSpec.getMode(heightMeasureSpec);
		int heightSpecSize = MeasureSpec.getSize(heightMeasureSpec);
		if (widthSpecMode == MeasureSpec.EXACTLY || widthSpecMode == MeasureSpec.AT_MOST) {
			mWidth = widthSpecSize;
		} else {
			mWidth = 0;
		}
		if (heightSpecMode == MeasureSpec.AT_MOST || heightSpecMode == MeasureSpec.UNSPECIFIED) {
			mHeight = dipToPx(15);
		} else {
			mHeight = heightSpecSize;
		}
		setMeasuredDimension(mWidth, mHeight);
	}
	
	@SuppressLint("ClickableViewAccessibility")
	@Override
	public boolean onTouchEvent(MotionEvent event) {
		float x = event.getX();
		float y = event.getY();
		Log.i("DEMO", "x:"+x + ",y:"+y);
		getParent().requestDisallowInterceptTouchEvent(true);
		switch (event.getAction()) {
		case MotionEvent.ACTION_DOWN:
			moved(x, y);
			break;
		case MotionEvent.ACTION_MOVE:
			moved(x, y);
			break;
		case MotionEvent.ACTION_UP:
			moved(x, y);
			break;
		}
		return true;
	}
	
	private void moved(float x,float y){
		if(x > mWidth){
			return;
		}
		currentCount = maxCount * (x/mWidth);
		invalidate();
	}

	
}
主要看一下onDraw方法：

@Override
protected void onDraw(Canvas canvas) {
	super.onDraw(canvas);
	mPaint = new Paint();
	mPaint.setAntiAlias(true);
	int round = mHeight/2;
	mPaint.setColor(Color.GRAY);

	RectF rectBg = new RectF(0, 0, mWidth, mHeight);
	canvas.drawRoundRect(rectBg, round, round, mPaint);
	mPaint.setColor(Color.WHITE);
	RectF rectBlackBg = new RectF(2, 2, mWidth-2, mHeight-2);
	canvas.drawRoundRect(rectBlackBg, round, round, mPaint);

	float section = currentCount/maxCount;
	RectF rectProgressBg = new RectF(3, 3, (mWidth-3)*section, mHeight-3);
	if(section <= 1.0f/3.0f){
		if(section != 0.0f){
			mPaint.setColor(SECTION_COLORS[0]);
		}else{
			mPaint.setColor(Color.TRANSPARENT);
		}
	}else{
		int count = (section <= 1.0f/3.0f*2 ) ? 2 : 3;
		int[] colors = new int[count];
		System.arraycopy(SECTION_COLORS, 0, colors, 0, count);
		float[] positions = new float[count];
		if(count == 2){
			positions[0] = 0.0f;
			positions[1] = 1.0f-positions[0];
		}else{
			positions[0] = 0.0f;
			positions[1] = (maxCount/3)/currentCount;
			positions[2] = 1.0f-positions[0]*2;
		}
		positions[positions.length-1] = 1.0f;
		LinearGradient shader = new LinearGradient(3, 3, (mWidth-3)*section, mHeight-3, colors,null, Shader.TileMode.MIRROR);
		mPaint.setShader(shader);
	}
	canvas.drawRoundRect(rectProgressBg, round, round, mPaint);
	//canvas.drawBitmap(bitMap, rectProgressBg.right-20, rectProgressBg.top-4, null);
}
这里首先绘制一个圆角矩形，绘制了两个作为SeekBar的背景图片：

RectF rectBg = new RectF(0, 0, mWidth, mHeight);
canvas.drawRoundRect(rectBg, round, round, mPaint);
mPaint.setColor(Color.WHITE);
RectF rectBlackBg = new RectF(2, 2, mWidth-2, mHeight-2);
canvas.drawRoundRect(rectBlackBg, round, round, mPaint);


然后开始计算渐变色的比例，这里有两个重要的变量：

SeekBar最大的值：maxCount

SeekBar当前的值：currentCount

float section = currentCount/maxCount;
RectF rectProgressBg = new RectF(3, 3, (mWidth-3)*section, mHeight-3);
if(section <= 1.0f/3.0f){
	if(section != 0.0f){
		mPaint.setColor(SECTION_COLORS[0]);
	}else{
		mPaint.setColor(Color.TRANSPARENT);
	}
}else{
	int count = (section <= 1.0f/3.0f*2 ) ? 2 : 3;
	int[] colors = new int[count];
	System.arraycopy(SECTION_COLORS, 0, colors, 0, count);
	float[] positions = new float[count];
	if(count == 2){
		positions[0] = 0.0f;
		positions[1] = 1.0f-positions[0];
	}else{
		positions[0] = 0.0f;
		positions[1] = (maxCount/3)/currentCount;
		positions[2] = 1.0f-positions[0]*2;
	}
	positions[positions.length-1] = 1.0f;
	LinearGradient shader = new LinearGradient(3, 3, (mWidth-3)*section, mHeight-3, colors,null, Shader.TileMode.MIRROR);
	mPaint.setShader(shader);
}
canvas.drawRoundRect(rectProgressBg, round, round, mPaint);
计算好了渐变色的距离，我们在用drawRoundRect方法绘制一个渐变色的圆角矩形即可。


再看一下onTouchEvent方法：

@Override
public boolean onTouchEvent(MotionEvent event) {
	float x = event.getX();
	float y = event.getY();
	Log.i("DEMO", "x:"+x + ",y:"+y);
	getParent().requestDisallowInterceptTouchEvent(true);
	switch (event.getAction()) {
	case MotionEvent.ACTION_DOWN:
		moved(x, y);
		break;
	case MotionEvent.ACTION_MOVE:
		moved(x, y);
		break;
	case MotionEvent.ACTION_UP:
		moved(x, y);
		break;
	}
	return true;
}

private void moved(float x,float y){
	if(x > mWidth){
		return;
	}
	currentCount = maxCount * (x/mWidth);
	invalidate();
}
这里就会计算手指的坐标，然后通过手指移动的x坐标和SeekBar的宽度的比例在计算出当前的currentCount值，然后刷新一下界面即可。

在使用的时候我们需要设置最大值和当前值：

SpringProgressView view = (SpringProgressView)findViewById(R.id.view);
view.setMaxCount(100);
view.setCurrentCount(30);

效果图如下：




3）、第三个例子：自定义闪烁文本的TextView

效果如下：


不多说，直接上代码：

package com.example.drawpathdemo;

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

public class MyTextView extends TextView {

    private LinearGradient mLinearGradient;
    private Matrix mGradientMatrix;
    private Paint mPaint;
    private int mViewWidth = 0;
    private int mTranslate = 0;

    private boolean mAnimating = true;

    public MyTextView(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);
        if (mViewWidth == 0) {
            mViewWidth = getMeasuredWidth();
            if (mViewWidth > 0) {
                mPaint = getPaint();
                mLinearGradient = new LinearGradient(0,0,mViewWidth,0,
                		new int[] { 0x33ffffff, 0xffffffff, 0x33ffffff },null,Shader.TileMode.CLAMP);
                mPaint.setShader(mLinearGradient);
                mGradientMatrix = new Matrix();
            }
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (mAnimating && mGradientMatrix != null) {
            mTranslate += mViewWidth / 10;
            if (mTranslate > 2 * mViewWidth) {
                mTranslate = -mViewWidth;
            }
            mGradientMatrix.setTranslate(mTranslate, 0);
            mLinearGradient.setLocalMatrix(mGradientMatrix);
            postInvalidateDelayed(50);
        }
    }

}

这里我们详细来看一下onSizeChanged方法：

这个方法在TextView大小发生改变的时候会调用，一般我们在xml中已经把文本设置好了，只会调用一次。我们在这里面进行一次啊初始化操作。我们首先用getPaint方法拿到TextView的画笔，然后定义一个LinearGradient渲染器，但是我们现在还需要一个功能就是那个白色渐变能够自动从左往右移，那么就会使用到平移动画。这里就会使用到一个新的对象：Matrix

矩阵对象，我们如果了解图形学的话，会知道矩阵是重要的一个概念，他可以实现图片的转化，各种动画的实现等。

Android中我们可以给一个渲染器设置一个变化矩阵。对于矩阵我们可以设置平移，旋转，缩放的动画。那么我们这里就是用他的平移动画：



我们就把LinearGradient这个比作一个长方形，如上图是初始化的位置在手机屏幕的最左边，要运动到屏幕的最右边就需要2*width的长度。

我们在onDraw方法中就开始计算移动的坐标，然后调用postInvalidate方法延迟去刷新界面。

下面来看一下效果图：


这个例子中我们学习到了渲染器可以有动画的，我们可以对渲染器进行动画操作，这个知识点，我们在后面还会在用到。


4）、第四个例子：颜色选择器

我们知道Office办公软件中有一个功能就是有一个颜色选择器板：


那么在Android中我们，我们就来实现以下这样的效果。其实我们主要介绍的是选择器版面的View,因为这里会用到Shader，上面这张图片我们知道可以使用LinearGradient渲染器实现，但是我们这里定义一个圆形选择器，效果图如下：


那么这里我们看到效果图之后，知道应该使用扫描渲染器：SweepGradient

原理：我们在onTouchEvent方法中获取用户点击了那一块颜色区域然后计算出它在哪一块颜色区域即可。


代码：

package com.example.drawpathdemo;

import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.ColorMatrix;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.Shader;
import android.graphics.SweepGradient;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;

public class ColorPickerView extends View {
	
	private Paint mPaint;//渐变色环画笔 
    private Paint mCenterPaint;//中间圆画笔 
    private int[] mColors;//渐变色环颜色
    private OnColorChangedListener mListener;//颜色改变回调  
    
    private static final int CENTER_X = 200;  
    private static final int CENTER_Y = 200;  
    private static final int CENTER_RADIUS = 32;  
    
    public ColorPickerView(Context context){
		super(context);
	}
	
	public ColorPickerView(Context context, AttributeSet attrs) {
		super(context, attrs);
        mColors = new int[] {//渐变色数组  
            0xFFFF0000, 0xFFFF00FF, 0xFF0000FF, 0xFF00FFFF, 0xFF00FF00,  
            0xFFFFFF00, 0xFFFF0000  
        };  
        Shader s = new SweepGradient(0, 0, mColors, null);  
        //初始化渐变色画笔  
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);  
        mPaint.setShader(s);  
        mPaint.setStyle(Paint.Style.STROKE);  
        mPaint.setStrokeWidth(32);  
          
        //初始化中心园画笔  
        mCenterPaint = new Paint(Paint.ANTI_ALIAS_FLAG);  
        mCenterPaint.setColor(Color.RED);  
        mCenterPaint.setStrokeWidth(15);  
	}
	
	public ColorPickerView(Context context, AttributeSet attrs, int defStyleAttr) {
		super(context, attrs, defStyleAttr);
	}
      
    private boolean mTrackingCenter;  
    private boolean mHighlightCenter;  

    @Override   
    protected void onDraw(Canvas canvas) {  
        float r = CENTER_X - mPaint.getStrokeWidth()*0.5f;  
          
        //移动中心  
        canvas.translate(CENTER_X, CENTER_Y);
        
        //画出色环和中心园  
        canvas.drawOval(new RectF(-r, -r, r, r), mPaint);
        canvas.drawCircle(0, 0, CENTER_RADIUS, mCenterPaint);  
          
        if (mTrackingCenter) {  
            int c = mCenterPaint.getColor();  
            mCenterPaint.setStyle(Paint.Style.STROKE);  
              
            if (mHighlightCenter) {  
                mCenterPaint.setAlpha(0xFF);  
            } else {  
                mCenterPaint.setAlpha(0x80);  
            }  
            canvas.drawCircle(0, 0,  
                              CENTER_RADIUS + mCenterPaint.getStrokeWidth(),  
                              mCenterPaint);  
              
            mCenterPaint.setStyle(Paint.Style.FILL);  
            mCenterPaint.setColor(c);  
        }  
    }  
      
    @Override  
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  
        setMeasuredDimension(CENTER_X*2, CENTER_Y*2);  
    }  
      
    private int ave(int s, int d, float p) {  
        return s + java.lang.Math.round(p * (d - s));  
    }  
      
    private int interpColor(int colors[], float unit) {  
        if (unit <= 0) {  
            return colors[0];  
        }  
        if (unit >= 1) {  
            return colors[colors.length - 1];  
        }  
          
        /**
         * 1,2,3,4,5
         * 0.6*4=2.4
         * i=2,p=0.4
         */
        float p = unit * (colors.length - 1);  
        int i = (int)p;  
        p -= i;  

        // now p is just the fractional part [0...1) and i is the index  
        int c0 = colors[i];  
        int c1 = colors[i+1];  
        int a = ave(Color.alpha(c0), Color.alpha(c1), p);  
        int r = ave(Color.red(c0), Color.red(c1), p);  
        int g = ave(Color.green(c0), Color.green(c1), p);  
        int b = ave(Color.blue(c0), Color.blue(c1), p);  
          
        return Color.argb(a, r, g, b);  
    }  
      
    private static final float PI = 3.1415926f;  

    @SuppressLint("ClickableViewAccessibility")
	@Override  
    public boolean onTouchEvent(MotionEvent event) {  
        float x = event.getX() - CENTER_X;  
        float y = event.getY() - CENTER_Y;  
        boolean inCenter = java.lang.Math.sqrt(x*x + y*y) <= CENTER_RADIUS;  
          
        switch (event.getAction()) {  
            case MotionEvent.ACTION_DOWN:  
                mTrackingCenter = inCenter;  
                if (inCenter) { 
                    mHighlightCenter = true;  
                    invalidate();  
                    break;  
                }  
            case MotionEvent.ACTION_MOVE:  
                if (mTrackingCenter) {  
                    if (mHighlightCenter != inCenter) {  
                        mHighlightCenter = inCenter;  
                        invalidate();  
                    }  
                } else {  
                    float angle = (float)java.lang.Math.atan2(y, x);  
                    // need to turn angle [-PI ... PI] into unit [0....1]  
                    float unit = angle/(2*PI);  
                    if (unit < 0) {  
                        unit += 1;  
                    }  
                    mCenterPaint.setColor(interpColor(mColors, unit));  
                    invalidate();  
                }  
                break;  
            case MotionEvent.ACTION_UP:  
                if (mTrackingCenter) {  
                    if (inCenter) {  
                    	if(mListener != null)
                    		mListener.colorChanged(mCenterPaint.getColor());  
                    }  
                    mTrackingCenter = false;  
                    invalidate();  
                }  
                break;  
        }  
        return true;  
    }  
    
    public interface OnColorChangedListener{
    	public void colorChanged(int color);
    }

}


首先来看一下构造方法：

public ColorPickerView(Context context, AttributeSet attrs) {
	super(context, attrs);
	mColors = new int[] {//渐变色数组  
			0xFFFF0000, 0xFFFF00FF, 0xFF0000FF, 0xFF00FFFF, 0xFF00FF00,  
			0xFFFFFF00, 0xFFFF0000  
	};  
	Shader s = new SweepGradient(0, 0, mColors, null);  
	//初始化渐变色画笔  
	mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);  
	mPaint.setShader(s);  
	mPaint.setStyle(Paint.Style.STROKE);  
	mPaint.setStrokeWidth(32);  

	//初始化中心园画笔  
	mCenterPaint = new Paint(Paint.ANTI_ALIAS_FLAG);  
	mCenterPaint.setColor(Color.RED);  
	mCenterPaint.setStrokeWidth(15);  
}
定义一个渲染器，初始化两个画笔，一个是画外边的选择器圆环，我们这里是通过设置轮廓的宽度来实现的，这样做也是比较简单的。


再来看一下onDraw方法：

@Override   
protected void onDraw(Canvas canvas) {  
	float r = CENTER_X - mPaint.getStrokeWidth()*0.5f;  

	//移动中心  
	canvas.translate(CENTER_X, CENTER_Y);

	//画出色环和中心园  
	canvas.drawOval(new RectF(-r, -r, r, r), mPaint);
	canvas.drawCircle(0, 0, CENTER_RADIUS, mCenterPaint);  

	if (mTrackingCenter) {  
		int c = mCenterPaint.getColor();  
		mCenterPaint.setStyle(Paint.Style.STROKE);  

		if (mHighlightCenter) {  
			mCenterPaint.setAlpha(0xFF);  
		} else {  
			mCenterPaint.setAlpha(0x80);  
		}  
		canvas.drawCircle(0, 0,  
				CENTER_RADIUS + mCenterPaint.getStrokeWidth(),  
				mCenterPaint);  

		mCenterPaint.setStyle(Paint.Style.FILL);  
		mCenterPaint.setColor(c);  
	}  
}
这里开始绘制图形，调用了canvas.translate方法，将画布移到圆环的中心，这样做之后，我们下面的在绘制圆形的时候，就不需要那么复杂的计算圆心的坐标了。

这里有一个判断，我们在下面会说道，mTrackingCenter表示点击了中间的圆形区域，mHightlightCenter表示从点击了圆形之后，移动，这里只是做了透明度的处理，说的有点抽象，可以自己试验一下就知道了。


在来看一下onTouchEvent方法：

@Override  
public boolean onTouchEvent(MotionEvent event) {  
	float x = event.getX() - CENTER_X;  
	float y = event.getY() - CENTER_Y;  
	boolean inCenter = java.lang.Math.sqrt(x*x + y*y) <= CENTER_RADIUS;  

	switch (event.getAction()) {  
	case MotionEvent.ACTION_DOWN:  
		mTrackingCenter = inCenter;  
		if (inCenter) { 
			mHighlightCenter = true;  
			invalidate();  
			break;  
		}  
	case MotionEvent.ACTION_MOVE:  
		if (mTrackingCenter) {  
			if (mHighlightCenter != inCenter) {  
				mHighlightCenter = inCenter;  
				invalidate();  
			}  
		} else {  
			float angle = (float)java.lang.Math.atan2(y, x);  
			// need to turn angle [-PI ... PI] into unit [0....1]  
					float unit = angle/(2*PI);  
			if (unit < 0) {  
				unit += 1;  
			}  
			mCenterPaint.setColor(interpColor(mColors, unit));  
			invalidate();  
		}  
		break;  
	case MotionEvent.ACTION_UP:  
		if (mTrackingCenter) {  
			if (inCenter) {  
				if(mListener != null)
					mListener.colorChanged(mCenterPaint.getColor());  
			}  
			mTrackingCenter = false;  
			invalidate();  
		}  
		break;  
	}  
	return true;  
}
这里开始的时候就先判断触发点所在的区域：

boolean inCenter = java.lang.Math.sqrt(x*x + y*y) <= CENTER_RADIUS;
这个公式很简单：就是判断当前触摸点的坐标是否在半径为CENTER_RADIUS的圆中

然后当移动的时候，我们需要计算触发点所在的颜色区域：

float angle = (float)java.lang.Math.atan2(y, x);  
// need to turn angle [-PI ... PI] into unit [0....1]  
float unit = angle/(2*PI);  
if (unit < 0) {  
	unit += 1;  
}
这里首先算出触发点的到圆形的角度，然后interpColor(mColors, unit)方法算出颜色：

private int interpColor(int colors[], float unit) {  
	if (unit <= 0) {  
		return colors[0];  
	}  
	if (unit >= 1) {  
		return colors[colors.length - 1];  
	}  

	/**
	 * 1,2,3,4,5
	 * 0.6*4=2.4
	 * i=2,p=0.4
	 */
	 float p = unit * (colors.length - 1);  
	 int i = (int)p;  
	 p -= i;  

	 // now p is just the fractional part [0...1) and i is the index  
	 int c0 = colors[i];  
	 int c1 = colors[i+1];  
	 int a = ave(Color.alpha(c0), Color.alpha(c1), p);  
	 int r = ave(Color.red(c0), Color.red(c1), p);  
	 int g = ave(Color.green(c0), Color.green(c1), p);  
	 int b = ave(Color.blue(c0), Color.blue(c1), p);  

	 return Color.argb(a, r, g, b);  
}
第一个参数是颜色数组，第二个是区域单元。

这个方法很简单就是用一个区域值unit到颜色数组中找到其对应的色值区域

打个比方：在高中的时候我们学习函数的时候，总是提到定义域和值域

这里定义域就是unit,值域就是色值区域，这样理解就简单了

不过这里用到了一个方法：Color.red/green/blue，获取一个色值的三基色的值，然后在计算比例：

private int ave(int s, int d, float p) {  
	return s + java.lang.Math.round(p * (d - s));  
}
这个方法也很简单，算出两个值之间的指定比例的值公式为：

value = p1 + p(p2-p1)

其中p1是区域的开始值，p是比例，p2是区域的结束值

p的值为[0,1]，当p=0时，value=p1就是开始值，当p=1时，value=p2就是结束值

这样原理就解释清楚了吧，如果还是不清楚的同学，那我也没办法了。


效果：




5）、第五个例子：自定义圆形渐变的SeekBar

这个例子和上面的长条渐变的SeekBar差不多的，只是这次是圆形的，效果图如下：


那么我们就知道这次应该使用扫描梯度的渲染器：SweepGradient

这里面我们绘制圆环的时候，使用的是绘制两个同心圆的方式的。

来看一下代码：

onDraw方法：

@Override
protected void onDraw(Canvas canvas) {
	float section = progress/maxProgress;
	/*dx = getXFromAngle();
		dy = getYFromAngle();*/
	/*LinearGradient shader = new LinearGradient(0,0,dx,dy, colors,null, Shader.TileMode.CLAMP);
		circleColor.setShader(shader);*/

	SweepGradient shader = new SweepGradient(cx, cy, SECTION_COLORS, null);
	Matrix matrix = new Matrix();
	matrix.setRotate(-90,cx,cy);
	shader.setLocalMatrix(matrix);
	circleColor.setShader(shader);

	canvas.drawCircle(cx, cy, outerRadius, circleRing);
	canvas.drawArc(rect, startAngle, angle, true, circleColor);
	canvas.drawCircle(cx, cy, innerRadius-40, innerColor);
	/*if(SHOW_SEEKBAR){
			drawMarkerAtProgress(canvas);
		}*/
	super.onDraw(canvas);
}
这里，我们一样的有两个变量：progress表示当前进度条的值，maxProgress表示进度条最大的值。然后定义一个梯度渲染器。然后开始绘制圆环，首先绘制外围的圆形，然后继续绘制一个扇形(用渲染器)，最后在绘制内部的圆形。

这里在操作的过程中需要注意的是，将SweepGradient渲染器逆时针旋转90度，不然结果是不正确的。

在来看一下onTouchEvent方法：

@Override
public boolean onTouchEvent(MotionEvent event) {
	float x = event.getX();
	float y = event.getY();
	boolean up = false;
	this.getParent().requestDisallowInterceptTouchEvent(true);
	switch (event.getAction()) {
	case MotionEvent.ACTION_DOWN:
		moved(x, y, up);
		break;
	case MotionEvent.ACTION_MOVE:
		moved(x, y, up);
		break;
	case MotionEvent.ACTION_UP:
		up = true;
		moved(x, y, up);
		break;
	}
	return true;
}

/**
 * Moved.
 * 
 * @param x
 *            the x
 * @param y
 *            the y
 * @param up
 *            the up
 */
private void moved(float x, float y, boolean up) {
	float distance = (float) Math.sqrt(Math.pow((x - cx), 2) + Math.pow((y - cy), 2));
	if (distance < outerRadius + adjustmentFactor && distance > innerRadius - adjustmentFactor && !up) {
		IS_PRESSED = true;

		markPointX = (float) (cx + outerRadius * Math.cos(Math.atan2(x - cx, cy - y) - (Math.PI /2)));
		markPointY = (float) (cy + outerRadius * Math.sin(Math.atan2(x - cx, cy - y) - (Math.PI /2)));

		float degrees = (float) ((float) ((Math.toDegrees(Math.atan2(x - cx, cy - y)) + 360.0)) % 360.0);
		// and to make it count 0-360
		if (degrees < 0) {
			degrees += 2 * Math.PI;
		}

		setAngle(Math.round(degrees));
		invalidate();

	} else {
		IS_PRESSED = false;
		invalidate();
	}

}
这里主要是计算扇形的角度。

还需要在代码中设置一下当前进度和最大进度值：

CircularSeekBar view = (CircularSeekBar)findViewById(R.id.progressview);
view.setMaxProgress(100);
view.setProgress(20);

运行结果：




6）、第六个例子：模仿360手机卫士中流量监控的曲线图



这里面主要用到了Path对象，因为我们绘制折线图，用Path是最好不过了，然后在用LinearGradient渲染器，这里需要注意的是，Path绘制的折线图一定要是封闭的，不然这个渲染是没有任何效果的，原理图如下：


我们绘制一个封闭的Path折线图(相当于多边形)


代码如下：

onDraw方法

@Override
protected void onDraw(Canvas canvas) {
	super.onDraw(canvas);
	drawHLines(canvas);

	drawVLines(canvas);

	drawCurveLines(canvas);
}

drawHLines方法：

private void drawHLines(Canvas canvas) {
	for(int i = 0;i<=COLUM_VERTIAL_NUM;i++){
		canvas.drawLine(0, mColumWidth *i,  mColumWidth * (mDays), mColumWidth *i, mPaint);
	}
}


drawVLines方法：

private void drawVLines(Canvas canvas) {
	for (int i = 0; i < mDays; i++) {
		canvas.drawLine(mColumWidth * (i + 0.5f), 0, mColumWidth * (i + 0.5f), mColumWidth * COLUM_VERTIAL_NUM, mPaint);
	}
}


drawCurveLines方法：

private void drawCurveLines(Canvas canvas) {
	Path path = new Path();

	for (int i = 0; i < mDays; i++) {
		List<Float> floats = CommonUtil.getRatioList(allDayTotalValueList);
		int flow;
		float ratio;
		try{
			flow = allDayTotalValueList.get(i);
			ratio = floats.get(i);
		}catch (Exception e){
			flow = 0;
			ratio = 0;
		}
		if (i == 0) {
			path.moveTo(mColumWidth * (i + 0.5f), getYByFlow((int)(ratio * mColumWidth * COLUM_VERTIAL_NUM)));
		}
		path.lineTo(mColumWidth * (i + 0.5f), getYByFlow((int)(ratio * mColumWidth * COLUM_VERTIAL_NUM)));
		canvas.drawCircle(mColumWidth * (i + 0.5f), getYByFlow((int)(ratio * mColumWidth * COLUM_VERTIAL_NUM)), RADIUS, mCirclePaint);
		if(CommonUtil.DAY_OF_MONTH() == (i+1)){
			canvas.drawCircle(mColumWidth * (i + 0.5f), getYByFlow(0), RADIUS, mTodayCirclePaint);
		}
		drawFlowText(canvas,flow,ratio,i);
		drawDateText(canvas,i);
	}
	canvas.drawPath(path, mCurvePaint);
	drawGraintColor(canvas, path);

}

其他绘制方法：

private void drawFlowText(Canvas canvas,int value,float ratio,int position){
	String text = CommonUtil.formatSize(value);
	float textHeight = mDatePaint.descent() - mDatePaint.ascent();
	float textOffset = (textHeight / 2) - mDatePaint.descent();
	float width = mDatePaint.measureText(text);
	canvas.drawText(text, mColumWidth * (position + 0.5f) - width / 2, getYByFlow((int)(ratio * mColumWidth * COLUM_VERTIAL_NUM))  - textHeight/2 + textOffset, mDatePaint);
}

private void drawDateText(Canvas canvas,int position){
	String text = "";
	if(CommonUtil.DAY_OF_MONTH() == (position+1)){
		text = "今日";
	}else{
		text = mCurrentMonth+"/" +(position+1);
	}
	float textHeight = mDatePaint.descent() - mDatePaint.ascent();
	float textOffset = (textHeight / 2) - mDatePaint.descent();
	float width = mDatePaint.measureText(text);
	canvas.drawText(text, mColumWidth * (position + 0.5f) - width / 2, mColumWidth * COLUM_VERTIAL_NUM  + textHeight/2+ textOffset, mDatePaint);
}

private void drawGraintColor(Canvas canvas,Path path){
	path.lineTo(mColumWidth * (mDays - 0.5f), mColumWidth * COLUM_VERTIAL_NUM);
	path.lineTo(mColumWidth * 0.5f, mColumWidth * COLUM_VERTIAL_NUM);
	canvas.drawPath(path,mGraintPaint);
}


测试代码：

layout.xml中：

<HorizontalScrollView
	android:layout_width="match_parent"
	android:paddingTop="5dp"
	android:paddingBottom="5dp"
	android:layout_height="wrap_content">
	<com.example.drawpathdemo.CurveView
		android:id="@+id/curve_view"
		android:layout_width="match_parent"
		android:layout_height="match_parent" />
</HorizontalScrollView>

这里使用水平的滚动视图


MainActivity.java中：

CurveView curve = (CurveView)findViewById(R.id.curve_view);
List<Integer> list = new ArrayList<Integer>(31);

for(int i=0;i<31;i++){
	list.add(new Random().nextInt(1000000));
}

curve.setAllDayTotalValue(list);
这里初始化一个31天的每天消耗的流量大小值，采用随机数的。在CommonUtil工具类中有数值的格式转化。

在这31大小的list中找到最大值，然后和CurveView中折线图的大小进行比例计算，不然折线图的最高点会超出CurveView。


运行结果：


效果没有360的好，但是差不多了，在详细的调一下就可以了。哈哈~~


到这里我们就介绍完了Android中自定义视图的基础知识了。这篇文章很长，本来想分开讲解的，最后发现很多知识都是串联在一起的，所以就在一篇文章中进行讲解了，其实没什么难度的。


项目下载


总结

在Android中我们绘图的时候其实有两种方式，一种是我们这篇文章主要讲的继承View之后，拿到画布对象Canvas然后进行绘制，这种方式主要用在自定义视图中，而且这种方式是在UI线程中进行的，那么除了这种方式，我们还可以使用SurfaceView进行绘图，这种方式效率高点，而且可以在子线程中进行的，一般用于游戏开发中，示例代码：

//内部类的内部类  
class MyThread implements Runnable{  

	@Override  
	public void run() {  
		Canvas canvas = holder.lockCanvas(null);//获取画布  
		Paint mPaint = new Paint();  
		mPaint.setColor(Color.BLUE);  

		canvas.drawRect(new RectF(40,60,80,80), mPaint);  
		holder.unlockCanvasAndPost(canvas);//解锁画布，提交画好的图像  

	}  

}
这里首先需要获取画布，其实就是给画布加一个锁，当画完了之后，就释放锁。所以可以在多线程中进行绘制。

这一篇文章是绘图+自定义视图的基础，后续还会在开发过程中遇到一些高级的自定义视图，那时候我还会一一进行讲解的。

(PS：这篇文章写了我整整一个周末，累死了，所以一定要记得点赞呀~~)
















分享到：
| DigitalOcean VPS购买教程
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics