Android：自定义View（随机生成验证码）

「爱情、让人受尽委屈。」 2022-08-20 12:09 154阅读 0赞

## 一、效果： ##

1，点击一下，生成一个四位数验证码，  
2，并且验证码由一个矩形框包裹着

## 二、参阅本案例主要留两个点： ##

1，绘制验证码和矩形的过程(onDraw)，以及获取字符串的宽高(Paint.getTextBounds)  
2，重点关注测量过程，即onMeasure()方法的使用

## 三、代码： ##

MainActivity中的代码：

package com.myapplication.myyanzhengcode;
    
    import android.support.v7.app.AppCompatActivity;
    import android.os.Bundle;
    /** * 自定义继承View,写一个随机产生验证码（4位） * 1.继承View * 2.在ondraw()方法里面绘制随机生成的字符串（Random） * 3.设置点击的监听，监听到点击之后更改生成的数字（重绘） * 4.因为布局里面设置的属性，我需要重新计算显示控件的大小（重要） * 5.验证你的控件 */
    public class MainActivity extends AppCompatActivity { 
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
        }
    }

MyYanzheng.java 文件中的代码：

package com.myapplication.myyanzhengcode;
    
    import android.content.Context;
    import android.graphics.Canvas;
    import android.graphics.Color;
    import android.graphics.Paint;
    import android.graphics.Rect;
    import android.util.AttributeSet;
    import android.view.View;
    
    /** * 效果，点击一次，生成一次验证码 * Created by Administrator on 2016/2/26. */
    public class MyYanZheng extends View { 
        private Paint codePaint;
        private Paint rectPaint;
        private String data = "1234";
        private Rect rectString;
    
        public MyYanZheng(Context context) {
            super(context);
        }
    
        public MyYanZheng(Context context, AttributeSet attrs) {
            super(context, attrs);
            //初始化
            init();
            //设置监听，点击一次就重新生成一次验证码
            this.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    data = getRandom2();
                    //重新绘制，让点击前的重置为无效
                    invalidate();
                }
            });
        }
    
        //初始化画笔
        private void init() {
            //设置生成代码的画笔的属性
            codePaint = new Paint();
            codePaint.setColor(Color.RED);
            codePaint.setStrokeWidth(10);
            codePaint.setTextSize(80);
            //设置矩形画笔属性
            rectPaint = new Paint();
            rectPaint.setStyle(Paint.Style.STROKE);//空心风格
            rectPaint.setColor(Color.GREEN);
            rectPaint.setStrokeWidth(15);
            //通过一个矩形将绘制文字包裹在里面，那么你的控件大小就转换成矩形的大小
            rectString = new Rect();
            /** * 1,字符串内容 2，字符串起点 3，字符串长度 4，空矩形 */
            codePaint.getTextBounds(data, 0, data.length(), rectString);
        }
    
        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            //记住显示的顺序不要写反了，否则图层覆盖，影响显示
            //画矩形
            canvas.drawRect(0, 0, getWidth(), getHeight(), rectPaint);
            //画验证码
            canvas.drawText(data, 0, getHeight(), codePaint);
        }
    
        //生成四位随机数的方法一
    // public String getRandom() { 
    // Random random = new Random();
    // Set<Integer> set = new HashSet<>();
    // 循环注意终止条件是set.size()<4
    // for (int i = 0; set.size() < 4; i++) { 
    // int value = random.nextInt(10);
    // set.add(value);
    // }
    // //将生成的验证码装载stringbuffer里面
    // StringBuffer stringBuffer = new StringBuffer();
    // for (Integer i : set) { 
    // stringBuffer.append(i);
    // }
    // return stringBuffer.toString();
    // }
    
        //生成四位随机数的方法二（弊端：只能生成>1000的数字，如0069此法无法生成）
        public String getRandom2() {
            //(int) (Math.random() * (大数 - 小数 + 1) + 小数)
            String codeStr = (int) (Math.random() * (9999 - 1000 + 1) + 1000) + "";
            return codeStr;
        }
    
        /** * 当设置wrap_content属性的时候，系统测量的不准确你需重新计算 * MeasureSpec这个类可以帮助我们进行计算和获取当前在布局里面设置的模式 * At_most-------wrap_content * Exactly-------match_parent,或者固定尺寸，如100dp; * At_most通常计算不准确，需要自己计算 */
        @Override
        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
            // super.onMeasure(widthMeasureSpec, heightMeasureSpec);
            //获取当前宽度设置模式
            int widthMode = MeasureSpec.getMode(widthMeasureSpec);
            //获取宽度参考值，下面高度同理分别获取
            int widthCK = MeasureSpec.getSize(widthMeasureSpec);
            int heightMode = MeasureSpec.getMode(heightMeasureSpec);
            int heightCK = MeasureSpec.getSize(heightMeasureSpec);
    
            int width, height;
            if (widthMode == MeasureSpec.EXACTLY) {
                //如果精确测量模式，直接赋值
                width = widthCK;
            } else {
                //如果不是精确测量模式，取字符串的宽度来赋值
                width = rectString.width();
            }
            if (heightMode == MeasureSpec.EXACTLY) {
                height = heightCK;
            } else {
                height = rectString.height();
            }
            //重新设置计算的值
            setMeasuredDimension(width, height);
        }
    }

布局文件中代码：

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.myapplication.myyanzhengcode.MainActivity" >
    
        <com.myapplication.myyanzhengcode.MyYanZheng android:layout_width="wrap_content" android:layout_height="wrap_content" />
    </RelativeLayout>

效果图：  
![这里写图片描述][20160226121325422]

[20160226121325422]: /images/20220731/f86c419500d94cf79633e7ff14b68e7f.png