Android拆輪子系列之寫驗證碼控制項的方法_Android

前言

先看看效果

怎麼樣不錯吧？別急下面我就一步一步的教你實現。

用到的知識點總結：

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 );}@Overridepublic void onClick(View v) {//在這裡面更新，重新換一套驗證碼字元}@Overrideprotected 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即可，代碼如下：

@Overridepublic 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拆輪子系列之寫驗證碼控制項的方法，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對雲棲社區網站的支援！