Android自定义类似支付宝密码输入的控件

前言：感觉自己记忆力不是很好，很多写过的东西容易忘记，所以还是写个博客记录一下，菜鸟一枚，望各位师傅指点。

嘿喂狗，来看我们要实现的效果(如果你说：”开发之前当然看不到效果，看个diao啊“。我只能说：会YY吗【PS：老猿可能觉得此程序比较简单，勿喷哈：）】)

接下来，讲讲如何实现，自定义控件一般分为三种： 
1、继承已有的控件来实现自定义控件，如本例就需要继承EditText 
2、继承一个布局文件实现自定义控件 
3、继承view类来实现自定义控件

我们实现的效果为第一种情况，继承现有的控件，本例我们需继承EditText

实现步骤（此步骤为我的习惯而已） 
1、根据需求，确定需要自定义的属性（初学者也可不自定义属性，先写死，然后再考虑自定义属性） 
2、在res/values/attrs.xml中定义属性 
3、新建类，继承EditText，然后–啪啪啪–码功能

首先，思考有哪些东西需要自定义，本例可以自定义的有：边框颜色，边框宽度，圆角弧度，间隔线颜色，间隔线宽度，字体大小，字体颜色，数字个数等。

好，我们先看在attrs中如何自定义属性（name为属性名，format为此属性的值类型）

<resources>
    <declare-styleable name="VerifyEditView">
        <attr name="VerifyBorderWidth" format="dimension" />
        <attr name="VerifyBorderColor" format="color" />
        <attr name="VerifyBorderRadius" format="dimension" />
        <attr name="VerifyCodeTextSize" format="dimension" />
        <attr name="VerifyCodeTextColor" format="color" />
        <attr name="VerifyCodeLength" format="integer" />
    </declare-styleable>
</resources>
 
1
2
3
4
5
6
7
8
9
10

然后，新建类VerifyEditView

public class VerifyEditView extends EditText {
    private int mBorderColor;
    private int mBorderWidth;
    private int mBorderRadius;

    private int mCodeLength;
    private int mCodeColor;
    private int mCodeSize;

    private Paint mPaint;
    private int mWidth;
    private int mHeight;
    private RectF mRectF;

    private String mTextContent;
    private int mTextLength;

    //当不需要使用xml声明或者不需要使用inflate动态加载时候，实现此构造函数即可 
    public VerifyEditView(Context context) {
        this(context,null);
    }
    //在xml创建但是没有指定style的时候被调用
    public VerifyEditView(Context context, AttributeSet attrs) {
        this(context, attrs,0);
    }
    //有指定style的时候被调用（注：虽然我将代码写在这地方，但是我并没有指定style，事实上，程序会使用第二个构造函数，只是将第三个参数传0而已）
    public VerifyEditView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        //获取我们在attrs定义的自定义属性
        TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.VerifyEditView,defStyleAttr,0);
        mBorderColor = a.getColor(R.styleable.VerifyEditView_VerifyBorderColor, Color.BLACK);//第二个参数为默认值，当我们在使用此控件但是没有定义此属性值的时候，会使用此处设置的默认值
        mBorderWidth = a.getDimensionPixelSize(R.styleable.VerifyEditView_VerifyBorderWidth, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,1,getResources().getDisplayMetrics()));
        mBorderRadius = a.getDimensionPixelSize(R.styleable.VerifyEditView_VerifyBorderRadius, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,5,getResources().getDisplayMetrics()));

        mCodeColor = a.getColor(R.styleable.VerifyEditView_VerifyCodeTextColor,Color.BLACK);
        mCodeLength = a.getInt(R.styleable.VerifyEditView_VerifyCodeLength,6);
        mCodeSize = a.getDimensionPixelSize(R.styleable.VerifyEditView_VerifyCodeTextSize, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP,24,getResources().getDisplayMetrics()));
        a.recycle();
        //定义一个Paint，并支持抗锯齿
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);


    }
    //在绘制控件时候会自动调用
    @Override
    protected void onDraw(Canvas canvas) {
        mWidth = getWidth();//获取控件的宽度
        mHeight = getHeight();//获取控件的高度
        mRectF = new RectF(0,0,mWidth,mHeight);
        //绘制圆角矩形边框，但是发现，相对于在xml设置相同参数的shape,此处绘制会有明显的不顺滑，如有知道为什么的，请留言告知，谢谢
        //mPaint.setStyle(Paint.Style.STROKE);
        //mPaint.setColor(mBorderColor);
        //mPaint.setStrokeWidth(mBorderWidth);
        //canvas.drawRoundRect(mRectF,mBorderRadius,mBorderRadius,mPaint);

        //分割线
        float offset = mRectF.width() / mCodeLength;
        float lineX;
        mPaint.setStrokeWidth(1);
        for (int i=1;i<mCodeLength;i++){
            lineX = mRectF.left + offset * i;
            canvas.drawLine(lineX,0,lineX,mRectF.height(),mPaint);
        }

        mPaint.setColor(mCodeColor);
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setTextSize(mCodeSize);
        mPaint.setTextAlign(Paint.Align.CENTER);
        Paint.FontMetrics fontMetrics = mPaint.getFontMetrics();
        float baseLine = (mRectF.bottom + mRectF.top - fontMetrics.bottom - fontMetrics.top)/2;
        float codeX;
        //更新数字
        for (int i=0;i<mTextLength;i++){
            codeX = mRectF.left + offset * i + offset / 2;
            canvas.drawText(mTextContent.substring(i,i+1),codeX,baseLine,mPaint);
        }

    }

    @Override
    protected void onTextChanged(CharSequence text, int start, int lengthBefore, int lengthAfter) {
        super.onTextChanged(text, start, lengthBefore, lengthAfter);
        this.mTextContent = text.toString();
        this.mTextLength = text.toString().length();
        invalidate();//当text改变的时候，重新绘制控件
    }
}
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

OK，控件写完了，那看看如何使用

<com.hjy.verify.view.VerifyEditView
        android:id="@+id/edtTxtVerify"
        android:layout_width="match_parent"
        android:layout_height="46dp"
        android:layout_marginTop="25dp"
        android:layout_marginBottom="15dp"
        android:layout_marginLeft="40dp"
        android:layout_marginRight="40dp"
        android:background="@drawable/verify_border"
        android:cursorVisible="false"
        android:focusable="true"
        android:focusableInTouchMode="true"
        android:inputType="number"
        android:maxLength="6"
        app:VerifyBorderColor="@color/verifyBorderColor"
        app:VerifyBorderRadius="10dp"
        app:VerifyBorderWidth="1px"
        app:VerifyCodeLength="6"
        app:VerifyCodeTextColor="@color/verifyTextColor"
        app:VerifyCodeTextSize="24sp"/>
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

drawable目录下的verify_border：

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="10dp" />
    <stroke android:color="@color/verifyBorderColor" android:width="1px" />
</shape>
 
1
2
3
4

代码：https://github.com/DonnyHe/VerifyEditText