Android拆輪子系列之寫驗證碼控件的方法

更新時間：2016年10月14日 10:13:13 投稿：mrr

這篇文章主要介紹了Android拆輪子系列之寫驗證碼控件的方法的, 涉及到Canvas和pint的使用和View的基本用法等相關(guān)知識點(diǎn)，本文給大家介紹的非常詳細(xì)，感興趣的朋友一起看看吧

前言

先看看效果

怎么樣不錯吧？別急下面我就一步一步的教你實(shí)現(xiàn)。

用到的知識點(diǎn)總結(jié)：

1.Canvas和pint的使用，我們用它畫點(diǎn)，線，字

2.View的基本用法

其實(shí)做這個東西還是很簡單的，總體思路步驟如下：

1.準(zhǔn)備一個Canvas。

2.向Canvas里面畫幾條斜杠。

3.向canvas里面畫100個小點(diǎn)。

4.隨機(jī)生成4個數(shù)字，然后畫在canvas里面。

其實(shí)就是這么簡單，沒什么深奧的。

開始寫編碼

1.首先我們要重寫View

既然我們要畫驗證碼，那么我們就需要準(zhǔn)備畫筆(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();
//設(shè)置點(diǎn)擊時間，當(dāng)自身收到點(diǎn)擊應(yīng)該更新數(shù)字（即重新?lián)Q驗證碼數(shù)字）
setOnClickListener(this);
}
/**
* 初始化paint(畫筆)
*/
private void initPaint(){
mPaint = new Paint();
mPaint.setAntiAlias(true);//加上抗鋸齒
mPaint.setTextSize(Config.TEXT_SIZE);//設(shè)置字體大小
mPaint.setStrokeWidth(3);線寬
mPaint.setColor(Config.TEXTCOLOR);//設(shè)置字體顏色顏色
//設(shè)置粗體的字體
Typeface font = Typeface.create(Typeface.SANS_SERIF, Typeface.BOLD);
mPaint.setTypeface( font );
}
@Override
public void onClick(View v) {
//在這里面更新，重新?lián)Q一套驗證碼字符
}
@Override
protected void onDraw(Canvas canvas) {
canvas.drawColor(Config.COLOR);//先畫一個背景顏色
}
}
/**
* 配置字段
*/
class Config{
// 點(diǎn)數(shù)設(shè)置
public static final int POINT_NUM = 100;
// 線段數(shù)設(shè)置
public static final int LINE_NUM = 2;
//設(shè)置驗證碼背景顏色
public static final int COLOR = Color.rgb(247,230,220);
//隨機(jī)字符長度長度
public static int TEXT_LENGTH = 4;
//設(shè)置驗證碼字體大小
public static int TEXT_SIZE = 40;
//驗證碼字體顏色
public static final int TEXTCOLOR = Color.rgb(255,101,1);
}

好了，上面的代碼中，我們自定義一個CheckView類，并準(zhǔn)備了以下材料：

1.為了更新數(shù)據(jù)我們設(shè)置了點(diǎn)擊事件setOnClickListener(this);，

2.Config類是為我們準(zhǔn)備配置信息,

3.new 出一支paint（畫筆）,并添加相關(guān)參數(shù)。

4.準(zhǔn)備了畫板canvas(在ondraw()方法中)，下面我們將在ondraw()方法中畫東西了。

2.接下來我們開始畫線、點(diǎn)、字。

畫線代碼如下：

private void drawLine(Canvas canvas){
for (int i = 0; i < Config.LINE_NUM; i++) {//根據(jù)LINE_NUM畫線的數(shù)量，你可以自己配置
//劃線
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)｛
｝

參數(shù)說明：

startX：起始端點(diǎn)的X坐標(biāo)。

startY：起始端點(diǎn)的Y坐標(biāo)。

stopX：終止端點(diǎn)的X坐標(biāo)。

stopY：終止端點(diǎn)的Y坐標(biāo)。

paint：繪制直線所使用的畫筆

看到?jīng)]，其實(shí)畫線就需要paint和2個起始點(diǎn)。在getline()方法中，for循環(huán)其實(shí)就循環(huán)了2次, math.random（）取值范圍是：0.0~1.0 ，所以可以看出，Math.random() * width/heigth隨機(jī)的在view中取4個點(diǎn)作為2個點(diǎn)的取值，然后 canvas.drawLine()畫出來。

畫點(diǎn)代碼如下：

private void drawCircle(Canvas canvas){
// 繪制小圓點(diǎn)
int[] point;
for (int i = 0; i < Config.POINT_NUM; i++) {//根據(jù)POINT_NUM畫點(diǎn)的數(shù)量，你可以自己配置
//畫點(diǎn)
point = getPoint(getHeight(), getWidth());
canvas.drawCircle(point[0], point[1], 1, mPaint);
}
}
/**
* 隨機(jī)產(chǎn)生點(diǎn)的圓心點(diǎn)坐標(biāo)
* @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)

參數(shù)說明

cx：圓心的x坐標(biāo)。

cy：圓心的y坐標(biāo)。

radius：圓的半徑。

paint：繪制時所使用的畫筆。

看了上面的基本語法，大家應(yīng)該明白了，畫圓只需要圓心，半徑和paint就行。在getPoint()方法中，我們依舊利用Math.random() * width/height方法在View中隨機(jī)的取2個點(diǎn)作為圓心。

畫文字代碼如下：

下面我們就來講最后一步畫文字。這個比較麻煩一點(diǎn)，我們一步步來看，首先畫文字需要準(zhǔn)備以下東西：

1.取4位數(shù)字碼，這個好說用Math.random()*10即可

2.畫每個文字時的Y坐標(biāo)怎么取值（你得控制著Y坐標(biāo)，如果畫view外面去，就尷尬了）

3.每個文字間得有相應(yīng)的間隔(即畫每個文字時的X坐標(biāo))

我一個一個實(shí)現(xiàn)：

取4位數(shù)字碼：

/**
* 產(chǎn)生隨機(jī)數(shù)字
*/
public static int[] getCheckNum() {
int[] tempCheckNum = new int[Config.TEXT_LENGTH];//TEXT_LENGTH是產(chǎn)生幾位數(shù)字
for (int i = 0; i < Config.TEXT_LENGTH; i++) {
tempCheckNum[i] = (int) (Math.random() * 10);//我不說你也明白了吧
}
return tempCheckNum;//產(chǎn)生4個數(shù)放在數(shù)組中返回
}

控制Y坐標(biāo):

/**
* 計算驗證碼的繪制y點(diǎn)位置
* @param height 傳入CheckView的高度值
* @return
*/
public static int getYPos(int height) {
int tempPositoin = (int) (Math.random() * height);
//不能讓它畫的太靠上，如果Y坐標(biāo)<Config.TEXT_SIZE的時候，畫出的字就會被遮蓋
if (tempPositoin < Config.TEXT_SIZE) {
tempPositoin += Config.TEXT_SIZE;
}else if (tempPositoin > (height-Config.TEXT_SIZE)) {//當(dāng)然也不能畫的太靠下
tempPositoin -= Config.TEXT_SIZE;
} 
return tempPositoin;
}

控制每個文字時的X坐標(biāo)

看上圖，我們把View平分成5分，那么第一個字的X坐標(biāo)是：getWidth()/5;第二個字的X坐標(biāo)是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)

參數(shù)一:String類型的文本，
參數(shù)二:x坐標(biāo)，
參數(shù)三:y坐標(biāo)，
參數(shù)四:Paint對象。

3.點(diǎn)擊刷新問題

恭喜大家看到這里，我們還剩下最后一個問題了，如何點(diǎn)擊刷新UI？簡單，在onclick（）方法中重新刷新驗證碼和UI即可，代碼如下：

@Override
public void onClick(View v) {
checkNum = CheckUtil.getCheckNum();//checkNum付初值
//在這里面更新，重新?lián)Q一套驗證碼字符
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拆輪子系列之寫驗證碼控件的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: