每日一學(一)android圖形驗證碼的實現
阿新 • • 發佈:2019-02-13
一、實現原理分析
本質上是一個自定義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去實現了,如下:
只需要在佈局檔案裡宣告我們的自定義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(); } }
來張效果圖:
不足之處:
1、驗證碼中的字元大小無法根據圖形大小而改變。
2、大小設定不方便,待調節。
有錯誤的地方歡迎指出~