自定义控件起步(三)--自定义验证码(上)

自定义控件前两篇主要介绍了自定义控件的步骤和自定义属性,这篇我门来写一个自定义验证码

首先,先分析分析我门需要什么:

      自定义验证码,我门需要先画一段文字,准确的说是四个数字或字母,还需要一个灰色的背景.

      说的详细点,我门需要一个验证码字体颜色 ,字体大小.字体的内容我门先写死,等内容画出

      来了,我门在代码中结合随机数生成

接下来,我门看具体步骤

    1.声明两个自定义属性   分别是验证码字体颜色和字体大小

     在values下创建一个attrs的xml文件夹,在<resources>中添加自定义属性

    <declare-styleable name="securitycode">
        <attr name="security_text_color" format="color" />
        <attr name="security_text_size" format="dimension" />
    </declare-styleable>

    2.创建自定义控件类 SecurityCodeView,继承view,声明三个构造方法,这跟之前的一样

        public SecurityCodeView(Context context, AttributeSet attrs) {
		this(context, attrs, 0);
	}
	public SecurityCodeView(Context context) {
		this(context, null, 0);
	}
        public SecurityCodeView(Context context, AttributeSet attrs,
            int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        }

     3.使用自定义属性

        先声明命名空间   xmlns:dsecurity="http://schemas.android.com/apk/res/com.example.defindedsecuritycode"
       
            <com.example.defindedsecuritycode.SecurityCodeView
                android:id="@+id/security_code"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                dsecurity:security_text_color="#999999"
                dsecurity:security_text_size="40sp">
            </com.example.defindedsecuritycode.SecurityCodeView>

    4.在构造方法中获取自定义属性  

                // 获取自定义属性值 验证码字体颜色,大小,内容
		TypedArray typedArray = context.getTheme().obtainStyledAttributes(
				attrs, R.styleable.securitycode, defStyleAttr, 0);
                security_color = typedArray.getColor(
                R.styleable.securitycode_security_text_color, Color.BLACK);
           security_size = typedArray.getDimensionPixelSize(
                R.styleable.securitycode_security_text_size, (int) TypedValue
                        .applyDimension(TypedValue.COMPLEX_UNIT_SP, 16,
                                getResources().getDisplayMetrics()));
        typedArray.recycle();//一定记得回收

     5.在构造方法中进行一些初始化操作

             Paint mPaint  = new Paint();// 创建画笔
        mPaint.setTextSize(security_size);// 设置字体大小
        security_rect = new Rect();// 创建一个矩形
        mPaint.getTextBounds(security_text, 0, security_text.length(),
                security_rect);// 根据文字的大小设置矩形的大小();// 创建画笔

           String security_text="";//这里我们先把验证码的文字写死

      这里创建的这个矩形就是等会我们要画的灰色阴影部分,我们根据文本字体的大小和文本的长度来设置阴影部分矩形的大小

      6.测量控件的大小

	/**
	 * 测量大小 根据宽或者高的模式来确定自定义控件大小
	 */
	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		// super.onMeasure(widthMeasureSpec, heightMeasureSpec);
		int widthMode = MeasureSpec.getMode(widthMeasureSpec);
		int widthSize = MeasureSpec.getSize(widthMeasureSpec);
		int heightMode = MeasureSpec.getMode(heightMeasureSpec);
		int heightSize = MeasureSpec.getSize(heightMeasureSpec);
		int width;
		int height;
		if (widthMode == MeasureSpec.EXACTLY) {// 如果确定大小 不用计算
			width = widthSize;
		} else {// 大小不确定 根据验证码的宽度来确定
			mPaint.setTextSize(security_size);
			mPaint.getTextBounds(security_text, 0, security_text.length(),
					security_rect);
			int textWidth = security_rect.width();
			int realWidth = textWidth + getPaddingLeft() + getPaddingRight();
			width = realWidth;
		}
		if (heightMode == MeasureSpec.EXACTLY) {
			height = heightSize;
		} else {
			mPaint.setTextSize(security_size);
			mPaint.getTextBounds(security_text, 0, security_text.length(),
					security_rect);
			int textheight = security_rect.height();
			int realHeight = textheight + getPaddingBottom() + getPaddingTop();
			height = realHeight;
		}
		setMeasuredDimension(width, height);// 将确定好的长和宽告设置上去
	}

            注意:这里我们根据文字的大小和长度来测量控件的大小

       7.开始画我们的自定控件(非常关键的一步)

                // 设置验证码背景颜色,并画出来
		mPaint.setColor(Color.parseColor("#e1e1e1"));//背景颜色是灰色的,直接写死
		canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), mPaint);

		// 设置验证码颜色,并画出来
		mPaint.setColor(security_color);
		canvas.drawText(security_text, getWidth() / 2 - security_rect.width()
				/ 2, getHeight() / 2 + security_rect.height() / 2, mPaint);

       问题一: 为什么矩形的宽度和高度等同于整个控件的高度?

     这里的矩形,实际上是我们看到的阴影部分,阴影部分的高度是大于文字的高度的,阴影部分的高度也是整个验证码的高度

       问题二:字体的高度和宽度  

   

           注意:因为咱们重写了onMeasure方法,所以,测量的宽度getMeasuredWidth和getWidth()是一样的

       问题三:我能不能先画文字,再画背景?

       不能,如果先画文字再画背景,背景会把文字遮住的,我们就只能看到背景,而看不到文字了

    8.运行,,看一下效果吧

    到这里我们自定义验证码的雏形就显示出来了,但是还有几个问题,怎么设置验证码的了类型,点击切换等,这些下一篇会介绍

   点击这里下载源码