Android学习笔记——自定义TextView模仿验证码效果

  今天学习了 鸿洋老师 有关 android 自定义 view 起步 的相关博客（博客链接），并按着老师在博客中的讲解 自己去写了 demo，下面花点时间按照自己的理解写一下学习笔记吧；

   android中自定义view 的实现 大体分以下几个步骤：

1.在res/values的 attrs.xml 中去定义所要实现view的样式

2.新建自定义view类 并 继承 View类，在构造函数中获取 自定义样式的属性

3.重写 onDraw;

4.重写 onMeasure（如果自定义view的宽或高 为 WRAP_CONTENT）;

ok，get到自定义view的步骤后，就按部就班的开始吧，本次demo基本是按着鸿洋老师的那个来的，只不过后面加了些躁点来模拟验证码效果；

首先在 res/values 下新建 attrs.xml 来定义 CustomTextView 样式：

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <attr name="customTextViewText" format="string"/>
    <attr name="customTextViewTextColor" format="color"/>
    <attr name="customTextViewTextSize" format="dimension"/>

    <declare-styleable name="CustomTextView">
        
        <attr name="customTextViewText"/>
        <attr name="customTextViewTextColor"/>
        <attr name="customTextViewTextSize"/>
    </declare-styleable>

</resources>

  自定义样式名字为CustomTextView，并且定义了 三个属性，分别为：customTextViewText：表示文本内容，customTextViewTextColor：文本颜色，customTextViewTextSize：文本字体大小；

OK, 样式定义好后便进入下一步：写CustomTextView的类继承 View类

<pre name="code" class="java">    private String mTextViewText;

    private int mTextViewTextColor;

    private int mTextViewTextSize;

    private Rect mBound;
    private Paint mPaint;

    public CustomTextView(Context context){

        this(context, null);

    }

    public CustomTextView(Context context, AttributeSet attrs){

        this(context, attrs, 0);

    }

    public CustomTextView(Context context, AttributeSet attrs, int defStyle){

       super(context,attrs,defStyle);

        //获得自定义样式属性
        TypedArray a = context.getTheme().obtainStyledAttributes(attrs
                                             ,R.styleable.CustomTextView,defStyle , 0);

        int n = a.getIndexCount();

        for(int i = 0; i<n; i++){

            int attr = a.getIndex(i);

            switch (attr){

                case R.styleable.CustomTextView_customTextViewText:

                    mTextViewText = a.getString(attr);
                    break;

                case R.styleable.CustomTextView_customTextViewTextColor:

                    mTextViewTextColor = a.getColor(attr, Color.BLACK);
                    break;

                case R.styleable.CustomTextView_customTextViewTextSize:

                    mTextViewTextSize = a.getDimensionPixelSize(attr
                                    ,(int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP
                                    , 16, getResources().getDisplayMetrics()));
                    break;
            }
        }

        a.recycle();

        mPaint = new Paint();

        mPaint.setTextSize(mTextViewTextSize);

        mBound = new Rect();

        mPaint.getTextBounds(mTextViewText, 0, mTextViewText.length(), mBound);


        //添加监听事件 用于 数字点击切换
        this.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {

                mTextViewText = randomText();

                //UI刷新
                postInvalidate();
                //invalidate();

            }
        });

    }

   首先写CustomTextView 的构造函数，并在构造函数里拿到 自定义style的属性值 然后赋值给三个相应的类成员变量；再用画笔Paint的getTextBounds获得自定义view的宽和高；另外在构造函数里添加的clickListener是为了用于监听CustomTextView的点击事件以便作内容显示切换；OK，属性获得后 就可以开始绘制了，来重写 onDraw方法：

<pre name="code" class="java"><pre name="code" class="java">    @Override
    protected void onDraw(Canvas canvas) {

        Random random = new Random();

        //绘制view范围
        mPaint.setColor(Color.YELLOW);
        canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), mPaint);

        //绘制view颜色
        mPaint.setColor(mTextViewTextColor);
        canvas.drawText(mTextViewText, getWidth() / 2 - mBound.width() / 2,
                                       getHeight() / 2 + mBound.height() / 2, mPaint);

        //绘制黑点来模糊数字显示
        mPaint.setColor(Color.BLACK);
        for(int i = 0 ; i< 1000; i++) {

            canvas.drawCircle(random.nextInt(getMeasuredWidth()), random.nextInt(getMeasuredHeight()), 1, mPaint);
        }

        //绘制黑线同样为了模糊数字显示
        mPaint.setColor(Color.BLUE);
        for(int i = 0; i< 15 ; i++) {

            canvas.drawLine(random.nextInt(getMeasuredWidth()), random.nextInt(getMeasuredWidth()), 
                            random.nextInt(getMeasuredWidth()), random.nextInt(getMeasuredWidth()), mPaint);

        }
    }


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

在onDraw()方法中分别绘制了 CustomTextView的大小，view中显示的文字以及用于模糊显示的黑点和线条。。。并没有重写 onMeasure() 因为 具体给出了 view的显示宽高。。

OK,接下来要做的事儿就是 让 view在每次点击之后显示不同的四位的数字，随机方法如下：

    private String randomText(){

        Random random = new Random();

        Set<Integer> set = new HashSet<Integer>();

        while(set.size() <4){

            int randomInt = random.nextInt(10);
            set.add(randomInt);
        }

        StringBuilder sb = new StringBuilder();

        for(Integer i : set){

            sb.append("" + i);
        }

        return sb.toString();


    }

然后再在ClickListener中的 onClick 方法中 给 mTextViewText = randomText()即可；

最后在 所要用到该自定义view的布局之中添加如下代码：

   <com.example.dxdrush.customviewdemo.views.CustomTextView
       android:layout_width="200dp"
       android:layout_height="100dp"
       android:layout_centerInParent="true"
       custom:customTextViewText="1234"
       custom:customTextViewTextColor="#ff2222"
       custom:customTextViewTextSize="40sp"
       />

OK, 最终效果如图：

OK, 这次笔记内容差不多就这些。。。 对于 自定义 view 还需要学习很多东西，加油加油~~