类似支付宝的密码输入框

公司项目做到密码支付这块，要求做一个密码支付框，网上看了不少资料和一些别人的Demo，弄出来了，这里做上笔记方便今后可能会用到。

首先是思路，当然是自定义控件，继承EditText，因为要求输入框四周是椭圆的，所以对于UI的思路是：先用shape画一个四角为弧度的长方形做边框：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <corners android:radius="6dp" />

    <stroke
        android:width="1dp"
        android:color="#009688" />

</shape>

然后因为密码是长度为6，那么接下来，就需要有两个画笔Paint，一个画笔画出5条竖线，这样就有了6个小格子，然后一个画笔，画出6个黑色圆形，代表着密码。

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.widget.EditText;

public class PassWordInputView extends EditText
{

    private Paint paint;
    private Paint paintText;
    private int length;

    public PassWordInputView(Context context, AttributeSet attrs)
    {
        super(context, attrs);
        initPaint();
        initPaintText();
    }

    /**
     * 密码圆的画笔
     */
    private void initPaintText()
    {
        paintText = new Paint();
        paintText.setColor(Color.parseColor("#666666"));
        paintText.setStyle(Paint.Style.FILL);
        paintText.setAntiAlias(true);
        paintText.setStrokeWidth(1);
    }

    /**
     * 边框的画笔
     */
    private void initPaint()    
    {
        paint = new Paint();
        paint.setColor(Color.parseColor("#009688"));
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(1);
    }

    @Override
    protected void onDraw(Canvas canvas)
    {
        super.onDraw(canvas);
        int width = getWidth();
        int height = getHeight();
        for (int i = 1; i < 6; i++)
        {
            canvas.drawLine(width / 6 * i, 0, width / 6 * i, height, paint);
        }
        for (int i = 1; i < length + 1; i++)
        {
            canvas.drawCircle(width / 12 * (2 * i - 1), height / 2, height / 4, paintText);
        }
    }
    @Override
    protected void onTextChanged(CharSequence text, int start, int lengthBefore, int lengthAfter)
    {
        super.onTextChanged(text, start, lengthBefore, lengthAfter);
        length = text.toString().length();
        invalidate();
    }
}

这样当这个自定义控件的内容变更之后，就会调用onTextChanged这个方法，进行invalidate重新画UI，这样就可以实现密码输入框了。

注意：当这个自定义控件写完之后，在使用中有需要注意的地方。

1.这个控件是继承EditText的，所以自然能输入内容，但是因为我们用画圆来代替内容的显示，所以，这个控件的textColor需要设置为#00000000，即为透明的字体，这样在输入过程中，只会有密码圆形出现。
2.要设置maxLength的大小，公司要求的是6位，所以我设置的也是6。3.background要设为之前的那个弧形边框。
4.当自定义控件获得焦点之后，会有光标闪烁，而且光标闪烁的位置在很前面，也就是实际的字体后面，很不美观，也容易露馅，所以我们在xml中要添加这个属性：android:cursorVisible="false"，这样光标就会隐藏起来了，而且也不会自动获取焦点。