当前位置： 移动技术网 > 移动技术>移动开发>Android > Android拆轮子系列之写验证码控件的方法

Android拆轮子系列之写验证码控件的方法

2019年07月24日  | 移动技术网移动技术  | 我要评论

前言

先看看效果

怎么样不错吧？别急下面我就一步一步的教你实现。

用到的知识点总结：

1.canvas和pint的使用，我们用它画点，线，字

2.view的基本用法

其实做这个东西还是很简单的，总体思路步骤如下：

1.准备一个canvas。

2.向canvas里面画几条斜杠。

3.向canvas里面画100个小点。

4.随机生成4个数字，然后画在canvas里面。

其实就是这么简单，没什么深奥的。

开始写编码

1.首先我们要重写view

既然我们要画验证码，那么我们就需要准备画笔(paint)和画板(canvas)代码如下：

/**
* created by yuyuanda on 2016-10-10.
*/
public class checkview extends view implements view.onclicklistener{
private context mcontext;
private paint mpaint ; // 画笔
public checkview(context context, attributeset attrs) {
super(context, attrs);
mcontext = context;
initpaint();
//设置点击时间，当自身收到点击应该更新数字（即重新换验证码数字）
setonclicklistener(this);
}
/**
* 初始化paint(画笔)
*/
private void initpaint(){
mpaint = new paint();
mpaint.setantialias(true);//加上抗锯齿
mpaint.settextsize(config.text_size);//设置字体大小
mpaint.setstrokewidth(3);线宽
mpaint.setcolor(config.textcolor);//设置字体颜色颜色
//设置粗体的字体
typeface font = typeface.create(typeface.sans_serif, typeface.bold);
mpaint.settypeface( font );
}
@override
public void onclick(view v) {
//在这里面更新，重新换一套验证码字符
}
@override
protected void ondraw(canvas canvas) {
canvas.drawcolor(config.color);//先画一个背景颜色
}
}
/**
* 配置字段
*/
class config{
// 点数设置
public static final int point_num = 100;
// 线段数设置
public static final int line_num = 2;
//设置验证码背景颜色
public static final int color = color.rgb(247,230,220);
//随机字符长度长度
public static int text_length = 4;
//设置验证码字体大小
public static int text_size = 40;
//验证码字体颜色
public static final int textcolor = color.rgb(255,101,1);
}

好了，上面的代码中，我们自定义一个checkview类，并准备了以下材料：

1.为了更新数据我们设置了点击事件setonclicklistener(this);，

2.config类是为我们准备配置信息,

3.new 出一支paint（画笔）,并添加相关参数。

4.准备了画板canvas(在ondraw()方法中)，下面我们将在ondraw()方法中画东西了。

2.接下来我们开始画线、点、字。

画线代码如下：

private void drawline(canvas canvas){
for (int i = 0; i < config.line_num; i++) {//根据line_num画线的数量，你可以自己配置
//划线
int[] line = getline(getheight(), getwidth());
canvas.drawline(line[0], line[1], line[2], line[3], mpaint);
}
}
public static int[] getline(int height, int width) {
int[] tempchecknum = {0, 0, 0, 0};
for (int i = 0; i < 4; i += 2) {
tempchecknum[i] = (int) (math.random() * width);
tempchecknum[i + 1] = (int) (math.random() * height);
}
return tempchecknum;
}

下面我们来讲一下canvas.drawline()方法。先看看源码：

public void drawline (float startx, float starty, float stopx, float stopy, paint paint)｛
｝

参数说明：

startx：起始端点的x坐标。

starty：起始端点的y坐标。

stopx：终止端点的x坐标。

stopy：终止端点的y坐标。

paint：绘制直线所使用的画笔

看到没，其实画线就需要paint和2个起始点。在getline()方法中，for循环其实就循环了2次, math.random（）取值范围是：0.0~1.0 ，所以可以看出，math.random() * width/heigth随机的在view中取4个点作为2个点的取值，然后 canvas.drawline()画出来。

画点代码如下：

private void drawcircle(canvas canvas){
// 绘制小圆点
int[] point;
for (int i = 0; i < config.point_num; i++) {//根据point_num画点的数量，你可以自己配置
//画点
point = getpoint(getheight(), getwidth());
canvas.drawcircle(point[0], point[1], 1, mpaint);
}
}
/**
* 随机产生点的圆心点坐标
* @param height 传入checkview的高度值
* @param width 传入checkview的宽度值
* @return
*/
public static int[] getpoint(int height, int width) {
int[] tempchecknum = {0, 0, 0, 0};
tempchecknum[0] = (int) (math.random() * width);
tempchecknum[1] = (int) (math.random() * height);
return tempchecknum;
}

下面我们来讲一下canvas.drawcircle()方法

基本语法

public void drawcircle (float cx, float cy, float radius, paint paint)

参数说明

cx：圆心的x坐标。

cy：圆心的y坐标。

radius：圆的半径。

paint：绘制时所使用的画笔。

看了上面的基本语法，大家应该明白了，画圆只需要圆心，半径和paint就行。在getpoint()方法中，我们依旧利用math.random() * width/height方法在view中随机的取2个点作为圆心。

画文字代码如下：

下面我们就来讲最后一步画文字。这个比较麻烦一点，我们一步步来看，首先画文字需要准备以下东西：

1.取4位数字码，这个好说用math.random()*10即可

2.画每个文字时的y坐标怎么取值（你得控制着y坐标，如果画view外面去，就尴尬了）

3.每个文字间得有相应的间隔(即画每个文字时的x坐标)

我一个一个实现：

取4位数字码：

/**
* 产生随机数字
*/
public static int[] getchecknum() {
int[] tempchecknum = new int[config.text_length];//text_length是产生几位数字
for (int i = 0; i < config.text_length; i++) {
tempchecknum[i] = (int) (math.random() * 10);//我不说你也明白了吧
}
return tempchecknum;//产生4个数放在数组中返回
}

控制y坐标:

/**
* 计算验证码的绘制y点位置
* @param height 传入checkview的高度值
* @return
*/
public static int getypos(int height) {
int temppositoin = (int) (math.random() * height);
//不能让它画的太靠上，如果y坐标<config.text_size的时候，画出的字就会被遮盖
if (temppositoin < config.text_size) {
temppositoin += config.text_size;
}else if (temppositoin > (height-config.text_size)) {//当然也不能画的太靠下
temppositoin -= config.text_size;
} 
return temppositoin;
}

控制每个文字时的x坐标

看上图，我们把view平分成5分，那么第一个字的x坐标是：getwidth()/5;第二个字的x坐标是getwidth()/5+getwidth()/5;以此类推，这样是不是这4个字就平分在这个view中？好了，好了开始写代码，如下：

private void drawnum(canvas canvas){
int dx = getwidth() / 5;
for (int i = 0; i < 4; i++) {//绘制验证控件上的文本
canvas.drawtext("" + checknum[i], dx, getpositon(getheight()), mpaint);
dx += getwidth() / 5;
}
}

我们来讲解一下canvas.drawtext()方法的基本用法:

drawtext(string text, float x, floaty, paint paint)

参数一:string类型的文本，
参数二:x坐标，
参数三:y坐标，
参数四:paint对象。

3.点击刷新问题

恭喜大家看到这里，我们还剩下最后一个问题了，如何点击刷新ui？简单，在onclick（）方法中重新刷新验证码和ui即可，代码如下：

@override
public void onclick(view v) {
checknum = checkutil.getchecknum();//checknum付初值
//在这里面更新，重新换一套验证码字符
invalidate();
}

4.最后封魔

好了讲到这里，我们接近尾声了，这个代码看起来非常乱，所以，我们需要写一个工具类，将以下这几个方法用工具类checkview封装起来大工告成：

public int[] getchecknum();
public int[] getlinepos(int height, int width) ;
public int[] getcirclepoint(int height, int width);
public int getpositon(int height);

以上所述是小编给大家介绍的android拆轮子系列之写验证码控件的方法，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网