前言
先看看效果
怎么樣不錯吧？別急下面我就一步一步的教你實現。
用到的知識點總結：
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拆輪子系列之寫驗證碼控件的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
