自定义TextView实现验证码功能

看了鸿洋大神博客http://blog.csdn.net/lmj623565791/article/details/24252901

决定跟随他的步伐继续深入的完成这个自定义TextView 实现验证码功能:

有图有真相:

 

自定义View的步骤:

1、自定义View的属性

2、在View的构造方法中获得我们自定义的属性

[ 3、重写onMesure ]

4、重写onDraw

 

1.自定义属性:在values 新建attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <attr name="checkText" format="string"></attr>
    <attr name="checkTextColor" format="color"></attr>
    <attr name="checkTextSize" format="dimension"></attr>
    <declare-styleable name="CheckTextView">
        <attr name="checkText"/>
        <attr name="checkTextColor"/>
        <attr name="checkTextSize"/>
    </declare-styleable>
</resources>

 

2.在View的构造方法中获得自定义属性:

private String mText;
private int mColor;
private int mSize;
private Rect mBound;//绘制文本的范围
private Paint mPaint;

private List<PointX> points;//产生直线点的集合
public CheckTextView(Context context) {
   this(context,null);
}

public CheckTextView(Context context, AttributeSet attrs) {
   this(context,attrs,0);
}

public CheckTextView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    TypedArray ta = context.getTheme().obtainStyledAttributes(attrs,R.styleable.CheckTextView,defStyleAttr,0);
    int n = ta.getIndexCount();
    for(int i = 0; i < n ;i++){
        int attr = ta.getIndex(i);
        switch (attr){
            case R.styleable.CheckTextView_checkText:
                mText = ta.getString(attr);
                break;
            case R.styleable.CheckTextView_checkTextColor:
                mColor = ta.getColor(attr, Color.BLACK);
                break;
            case R.styleable.CheckTextView_checkTextSize:
                // 默认设置为16sp，TypeValue也可以把sp转化为px
                mSize = ta.getDimensionPixelSize(attr,(int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP,16,getResources().getDisplayMetrics()));

                break;
        }
    }
    ta.recycle();
    //获得绘制文本的宽高
    mPaint = new Paint();
    mPaint.setTextSize(mSize);
    mBound = new Rect();
    Log.d("gac","textsize:"+mSize);
    //获得文本的宽高
    mPaint.getTextBounds(mText, 0, mText.length(), mBound);
    createLinePoints();
    Log.d("gac", "mBound:" + mBound.width() + "," + mBound.height());
    //初始化设置点击事件
    setTextClickListener();
}

 

3.重写onMeasure方法:

4.重写onDraw方法

protected void onDraw(Canvas canvas) {

    mPaint.setColor(Color.YELLOW);
    canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), mPaint);
    Log.d("gac", "getMeasuredWidth:" + getMeasuredWidth() + " getMeasuredHeight:" +   getMeasuredHeight());
    randomLines(canvas);
    Log.d("gac", "getWidth:" + getWidth() + " getHeight:" + getHeight());
    // mPaint.setTextAlign(Paint.Align.CENTER);
    mPaint.setColor(mColor);
    //292 147 屏幕宽高   30 117 textsize 120
    //232 87 字体宽高
    // x y 参数 字体的最左上角x坐标 左下角y坐标
    canvas.drawText(mText, getWidth() / 2 - mBound.width() / 2, (getHeight() / 2 + mBound.height() / 2), mPaint);
}

 

randomLines方法 画出验证码上面的干扰的线条

private void randomLines(Canvas canvas){

        for(int i = 0; i < 6; i++){
            randomLine(canvas,points.get(i));
        }


}

 

 

randomLine方法 画出一条线条 线条具有随机性

private void randomLine(Canvas canvas,PointX p){

        mPaint.setColor(Color.RED);
        float old = mPaint.getStrokeWidth();
        //设置线条宽度
        mPaint.setStrokeWidth(4.0f);

      //  Log.d("gac", startX + " " + " " + startY + " " + stopX + " " + stopY);
        canvas.drawLine(p.startX, p.startY, p.stopX, p.stopY, mPaint);
        // canvas.drawLine(10, 10, 100, 100,mPaint);
        //设置回原来线条宽度
        mPaint.setStrokeWidth(old);


}

 

PointX 保存线条的四个点:

private class PointX{
    private int startX;
    private int startY;
    private int stopX;
    private int stopY;
    public PointX(int startX, int startY, int stopX,int stopY){
        this.startX = startX;
        this.startY = startY;
        this.stopX = stopX;
        this.stopY = stopY;
    }

}

 

 

 

//产生六条随机线条的点的集合

//初始化时候 调用一次 每次点击textview时候调用 产生新的点的集合
private void createLinePoints(){
    points = new ArrayList<PointX>();

    for(int i = 0; i < 6; i++){
         Random rand = new Random();
        int startX = rand.nextInt( mBound.width()-1)+1;
        int startY = rand.nextInt(mBound.height()-1)+1;
        int stopX =  rand.nextInt( mBound.width() - 1)+1;
        int stopY = rand.nextInt(mBound.height()-1)+1;
        points.add(new PointX(startX,startY,stopX,stopY));
    }

}

 

//初始化的时候给 TextView设置点击事件 每次点击 切换textView的文本
private void setTextClickListener(){
    this.setOnClickListener(new View.OnClickListener(){

        @Override
        public void onClick(View v) {
            randomText();
            createLinePoints();
            postInvalidate();

        }
    });
}

//随机产生TextView 文本
private void  randomText(){
    Random random = new Random();
    Set<Integer> set = new HashSet<Integer>();
    while (set.size() < 4)
    {
        int randomInt = random.nextInt(10);
        set.add(randomInt);
    }
    StringBuffer sb = new StringBuffer();
    for (Integer i : set)
    {
        sb.append("" + i);
    }

     mText = sb.toString();
}

 

 

//获取文本 进行验证
public String getCheckText(){
    return mText;
}

 

源码下载地址:https://github.com/gacmy/checkTextView/