Android自定义View 做个简单的验证码控件

首先感谢鸿洋大神，因为我看了他的文章后才写了这篇博文。
传送门：http://blog.csdn.net/lmj623565791/article/details/24252901

从15年工作到现在两年多了，从一个什么都不会的小菜鸟到现在会写点小程序的老菜鸟。两年来，做了十来个项目，有大有小，有团队开发也有单独开发，虽然比刚入职有了进步，但是总体来说总是差强人意，重复的用轮子，让自己的代码千篇一律毫无亮点。

两年来虽然自己不是完全没有写过自定义控件，但是也是极少写的，一直都感觉自定义控件十分复杂，写起来也比较费脑子（本人懒癌晚期患者），能不写就不写，随便百度一个相似控件，改改能用就行，不考虑是否与界面一致，色值是否协调，这也让我在开发中吃了不少亏，界面不协调改，色值相差大改，虽然在使用轮子中减少了工作量，但是在后续修改中也花费了不少工作时间，如果你是新人，千万不要学我。

虽然在开发界常说不要重复造轮子，但是呢这句话得这样看，不重复是对的，但是怎么造轮子这是门技术，这是需要我们学习的

第一步
自定义view的属性：
在你的项目/res/velues目录下新增attrs.xml,在这里你可以定义你需要定义的属性

<?xml version="1.0" encoding="utf-8"?><resources>    <!--设置参数 -->    <attr name="authCodeText" format="string"/><!--验证码显示值-->    <attr name="authCodeBackground" format="color"/><!--验证码背景-->    <attr name="authCodeTextSize" format="dimension"/><!--验证码位数-->    <!--声明-->    <declare-styleable name="AuthCodeUtils">        <attr name="authCodeText"/>        <attr name="authCodeBackground"/>        <attr name="authCodeTextSize"/>    </declare-styleable></resources>

第二步
获得自定义样式

写一个工具类并继承View（AuthCodeUtils），在构造方法中调用我们的样式

public class AuthCodeUtils extends View {    private String authCodeText;//文本    private int authCodeBackground;//背景颜色    private int authCodeSize;//验证码长度    private Rect mRect;//绘制矩形    private Paint mPaint;//    //构造方法    public AuthCodeUtils(Context context, AttributeSet attributeSet) {        super(context, attributeSet, 0);        initializeProperty(context, attributeSet);    }    /**     * 初始化属性     *     * @param context     * @param attributeSet     */    private void initializeProperty(Context context, AttributeSet attributeSet) {        TypedArray typedArray = context.obtainStyledAttributes(attributeSet, R.styleable.TestTextUtil);        //获取typedArray长度        int num = typedArray.getIndexCount();        for (int i = 0; i < num; i++) {            //获取属性ＩＤ            int id = typedArray.getIndex(i);            switch (id) {                case R.styleable.TestTextUtil_authCodeText:                    authCodeText = typedArray.getString(id);                    break;                case R.styleable.TestTextUtil_authCodeTextSize:                    authCodeSize = typedArray.getDimensionPixelSize(id, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));                    break;                case R.styleable.TestTextUtil_authCodeBackground:                    authCodeBackground = typedArray.getColor(id, Color.YELLOW);                    break;            }        }        typedArray.recycle();        //获取文本的长和宽        mPaint = new Paint();        mPaint.setTextSize(authCodeSize);        mRect = new Rect();        mPaint.getTextBounds(authCodeText, 0, authCodeText.length(), mRect);    }

然后重新onDraw方法

    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        //添加背景色        mPaint.setColor(Color.YELLOW);        canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), mPaint);        //字体颜色        mPaint.setColor(authCodeBackground);        canvas.drawText(authCodeText, getWidth() / 2 - mRect.width() / 2, getHeight() / 2 + mRect.height() / 2, mPaint);    }

然后在布局文件中声明并调用

<?xml version="1.0" encoding="utf-8"?><RelativeLayout    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:custom="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="match_parent"><!--注意此句xmlns:custom="http://schemas.android.com/apk/res-auto"，如果不写，则无法获得我们自定义的属性-->    <!--声明并调用-->    <cm.cui.publicbase.test.AuthCodeUtils        android:id="@+id/testText"        android:layout_width="70dp"        android:layout_height="30dp"        android:layout_centerInParent="true"        android:padding="10dp"        custom:authCodeBackground="@color/colorAccent"        custom:authCodeText="3712"        custom:authCodeTextSize="16sp"/></RelativeLayout>

运行程序，效果如图

第三步

重写onMeasure方法

这里是抄的鸿洋大神的代码，不过我加了注释和修改了一些地方，差不多意思就是这样

    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        super.onMeasure(widthMeasureSpec, heightMeasureSpec);        //获取控件宽高的显示模式        int widthMode = MeasureSpec.getMode(widthMeasureSpec);        int heightMode = MeasureSpec.getMode(heightMeasureSpec);        //获取宽高的尺寸值  固定值的宽度        int heightSize = MeasureSpec.getSize(heightMeasureSpec);        int widthSize = MeasureSpec.getSize(widthMeasureSpec);        int width;        int height;//        MeasureSpec父布局传递给后代的布局要求 包含 确定大小和三种模式//        EXACTLY：一般是设置了明确的值或者是MATCH_PARENT//        AT_MOST：表示子布局限制在一个最大值内，一般为WARP_CONTENT//        UNSPECIFIED：表示子布局想要多大就多大，很少使用        if (widthMode == MeasureSpec.EXACTLY) {            width = widthSize;        } else {            mPaint.setTextSize(authCodeSize);            mPaint.getTextBounds(authCodeText, 0, authCodeText.length(), mRect);            float textWidth = mRect.width();            int desired = (int) (getPaddingLeft() + textWidth + getPaddingRight());            width = desired;        }        if (heightMode == MeasureSpec.EXACTLY) {            height = heightSize;        } else {            mPaint.setTextSize(authCodeSize);            mPaint.getTextBounds(authCodeText, 0, authCodeText.length(), mRect);            float textHeight = mRect.height();            int desired = (int) (getPaddingTop() + textHeight + getPaddingBottom());            height = desired;        }        //设置测量的宽高        setMeasuredDimension(width, height);    }

编写噪点和划线方法，大意如下图

   //随机生成小圆点坐标    private int[] getPoint(int height, int width) {        int[] tempCheckNum = {0, 0};        tempCheckNum[0] = (int) (Math.random() * width);        tempCheckNum[1] = (int) (Math.random() * height);        return tempCheckNum;    }    //随机生成线线    public 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;    }

调用生成的噪点和划线方法

 final int height = getHeight();        final int width = getWidth();        // 绘制小圆点        int[] point;        for (int i = 0; i < 100; i++) {            point = getPoint(height, width);            /**             * drawCircle (float cx, float cy, float radius, Paint paint)             * float cx：圆心的x坐标。             * float cy：圆心的y坐标。             * float radius：圆的半径。             * Paint paint：绘制时所使用的画笔。             */            canvas.drawCircle(point[0], point[1], 1, mPaint);        }        for (int i = 0; i < 50; i++) {            point = getPoint(height, width);            canvas.drawCircle(point[0], point[1], 2, mPaint);        }        for (int i = 0; i < 30; i++) {            point = getPoint(height, width);            canvas.drawCircle(point[0], point[1], 3, mPaint);        }        int[] line;        for (int i = 0; i < 10; i++) {            line = getLine(height, width);            /**             * startX：起始端点的X坐标。             *startY：起始端点的Y坐标。             *stopX：终止端点的X坐标。             *stopY：终止端点的Y坐标。             *paint：绘制直线所使用的画笔。             */            canvas.drawLine(line[0], line[1], line[2], line[3], mPaint);        }

请自行添加点击事件……..

运行程序

Demo:代码地址，点我传送