1. 程式人生 > >每日一學(一)android圖形驗證碼的實現

每日一學(一)android圖形驗證碼的實現

一、實現原理分析

     本質上是一個自定義View,不過是一張帶顏色的背景圖 + 要繪製的驗證碼+橫線+若干小點點

                   實現步驟:

                   1、繪製一個背景圖

                   2、繪製隨機產生的驗證碼

                   3、繪製隨機產生的若干小點和橫線(起干擾作用,使驗證碼看起來更真實)

二、相關程式碼

首先是一個驗證碼相關的工具類,用於產生驗證碼,並生成一個Bitmap,以供繪製。

package com.bec.verificationcode;

import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;

import java.util.Random;

/**
 * 驗證碼工具類
 * Created by ZGP on 2017/6/9.
 */
public class CodeUtils {
    private static final char[] CHARS = {
            '0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
            'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm',
            'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
            'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M',
            'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
    };

    private static CodeUtils mCodeUtils;
    private int mPaddingLeft, mPaddingTop;
    private StringBuilder mBuilder = new StringBuilder();
    private Random mRandom = new Random();

    //Default Settings  
    private static final int DEFAULT_CODE_LENGTH = 4;//驗證碼的長度  這裡是4位  
    private static final int DEFAULT_FONT_SIZE = 60;//字型大小  
    private static final int DEFAULT_LINE_NUMBER = 3;//多少條幹擾線  
    private static final int BASE_PADDING_LEFT = 20; //左邊距  
    private static final int RANGE_PADDING_LEFT = 35;//左邊距範圍值  
    private static final int BASE_PADDING_TOP = 50;//上邊距
    private static final int RANGE_PADDING_TOP = 50;//上邊距範圍值
    private static int DEFAULT_WIDTH = 200;//預設寬度.圖片的總寬
    private static int DEFAULT_HEIGHT = 100;//預設高度.圖片的總高
    private static final int DEFAULT_COLOR = 0xDF;//預設背景顏色值  

    public static CodeUtils getInstance() {
        if (mCodeUtils == null) {
            mCodeUtils = new CodeUtils();
        }
        return mCodeUtils;
    }

    //生成驗證碼圖片  
    public Bitmap createBitmap() {
        mPaddingLeft = 0; //每次生成驗證碼圖片時初始化  
        mPaddingTop = 0;
        Bitmap bitmap = Bitmap.createBitmap(DEFAULT_WIDTH, DEFAULT_HEIGHT, Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);

        //生成的驗證碼  
        String code = createCode();

        canvas.drawColor(Color.rgb(DEFAULT_COLOR, DEFAULT_COLOR, DEFAULT_COLOR));
        Paint paint = new Paint();
        paint.setTextSize(DEFAULT_FONT_SIZE);

        for (int i = 0; i < code.length(); i++) {
            randomTextStyle(paint);
            randomPadding();
            canvas.drawText(code.charAt(i) + "", mPaddingLeft, mPaddingTop, paint);
        }

        //干擾線  
        for (int i = 0; i < DEFAULT_LINE_NUMBER; i++) {
            drawLine(canvas, paint);
        }

        canvas.save(Canvas.ALL_SAVE_FLAG);//儲存  
        canvas.restore();
        return bitmap;
    }

    //生成驗證碼  
    public String createCode() {
        mBuilder.delete(0, mBuilder.length()); //使用之前首先清空內容  

        for (int i = 0; i < DEFAULT_CODE_LENGTH; i++) {
            mBuilder.append(CHARS[mRandom.nextInt(CHARS.length)]);
        }

        return mBuilder.toString();
    }

    //生成干擾線  
    private void drawLine(Canvas canvas, Paint paint) {
        int color = randomColor();
        int startX = mRandom.nextInt(DEFAULT_WIDTH);
        int startY = mRandom.nextInt(DEFAULT_HEIGHT);
        int stopX = mRandom.nextInt(DEFAULT_WIDTH);
        int stopY = mRandom.nextInt(DEFAULT_HEIGHT);
        paint.setStrokeWidth(1);
        paint.setColor(color);
        canvas.drawLine(startX, startY, stopX, stopY, paint);
    }

    //隨機顏色  
    private int randomColor() {
        mBuilder.delete(0, mBuilder.length()); //使用之前首先清空內容  

        String haxString;
        for (int i = 0; i < 3; i++) {
            haxString = Integer.toHexString(mRandom.nextInt(0xFF));
            if (haxString.length() == 1) {
                haxString = "0" + haxString;
            }

            mBuilder.append(haxString);
        }

        return Color.parseColor("#" + mBuilder.toString());
    }

    //隨機文字樣式  
    private void randomTextStyle(Paint paint) {
        int color = randomColor();
        paint.setColor(color);
        paint.setFakeBoldText(mRandom.nextBoolean());  //true為粗體,false為非粗體  
        float skewX = mRandom.nextInt(11) / 10;
        skewX = mRandom.nextBoolean() ? skewX : -skewX;
        paint.setTextSkewX(skewX); //float型別引數,負數表示右斜,整數左斜  
//        paint.setUnderlineText(true); //true為下劃線,false為非下劃線  
//        paint.setStrikeThruText(true); //true為刪除線,false為非刪除線  
    }

    //隨機間距  
    private void randomPadding() {
        mPaddingLeft += BASE_PADDING_LEFT + mRandom.nextInt(RANGE_PADDING_LEFT);
        mPaddingTop = BASE_PADDING_TOP + mRandom.nextInt(RANGE_PADDING_TOP);
    }

}  


 有了上面的工具類,我們的圖形驗證碼就可以很方便的放到一個自定義View去實現了,如下:

package com.bec.verificationcode;

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

/**
 * 圖片驗證碼View
 * Created by ZGP on 2017/6/9.
 */

public class VerficationCodeView extends View {
    public Paint mPaint;
    public Bitmap mBitmap;

    public VerficationCodeView(Context context) {
        super(context);
        init();
    }


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

    /**
     * 初始化資料
     */
    private void init() {
        mPaint = new Paint();
        mPaint.setColor(Color.BLUE);
        mPaint.setTextSize(32);

    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (mBitmap == null) {
            mBitmap = CodeUtils.getInstance().createBitmap();
        }
        canvas.drawBitmap(mBitmap, 0, 0, mPaint);

    }


    public void refresh() {
        mBitmap = CodeUtils.getInstance().createBitmap();
        invalidate();
    }
}
只需要在佈局檔案裡宣告我們的自定義View就可以使用啦~

來張效果圖:

  

不足之處:

          1、驗證碼中的字元大小無法根據圖形大小而改變。

          2、大小設定不方便,待調節。

  有錯誤的地方歡迎指出~