记简单的输入框输入密码

  原博：仿微信支付

今天项目中用到该功能 ， 借鉴这个自定义的EditText，以下

按我理解的来说，加深对自定义view的理解和使用

在样式上没有太多要求 ，都用系统自带就行

首先画面  如上图所示  由5个正方形组成也可能是长方形，首先定义：

    /**
     * 宽度
     */
    private int mWidth;
    /**
     * 高度
     */
    private int mHeight;
    /**
     * 密码框
     */
    private Rect mRect;

Rect个容器

其实根据需求，我们的框直接是有间距的，所以：

  /**
     * 间隔
     */
    private final int PWD_SPACING = 5;

间隔不是很大，然后是密码位置及大小的确定：

  /**
     * 密码大小
     */
    private final int PWD_SIZE = 5;
    /**
     * 密码长度
     */
    private final int PWD_LENGTH = 5;

密码长度是框的数量 我们定位5位数，然后我们需要2只画笔来分别画出密码框与密码

  /**
     * 密码画笔
     */
    private Paint mPwdPaint;

    /**
     * 密码框画笔
     */
    private Paint mRectPaint;

以上要用的到定义完成后，构造函数中初始化画笔：

  public NewEditText(Context context, AttributeSet attrs) {
        super(context, attrs);
        // 初始化密码画笔
        mPwdPaint = new Paint();
        mPwdPaint.setColor(Color.BLACK);
        mPwdPaint.setStyle(Paint.Style.FILL);
        mPwdPaint.setAntiAlias(true);
        // 初始化密码框
        mRectPaint = new Paint();
        mRectPaint.setStyle(Paint.Style.STROKE);
        mRectPaint.setColor(Color.LTGRAY);
        mRectPaint.setAntiAlias(true);
    }

  画笔的很多方法不一一描述了，就是颜色，实心空心等常用方法，在有了画笔之后，就可以在画布上画我们想要的东西了：

首先我们要确定这个view的大小：

计算出宽高：

 mWidth = getWidth();
  
mHeight = getHeight();

xml中写死

重新new一个画笔

   Paint paint = new Paint();
        paint.setColor(Color.WHITE);
        canvas.drawRect(0, 0, mWidth, mHeight, paint);

调用drawrect  自行百度

接下来开始计算每个密码框的宽度，我们的高度就是view的高度，所以不用计算，因为宽度与数量有关，所以以下：

// 计算每个密码框宽度
        int rectWidth = (mWidth - PWD_SPACING * (PWD_LENGTH - 1)) / PWD_LENGTH;

 用xml中定义的宽度-间隔*密码长度-1 / 密码的长度 就是我们单个框的宽度了，

有了宽度我们就可以计算我们需要的个数了：

 for (int i = 0; i < PWD_LENGTH; i++) {
            int left = (rectWidth + PWD_SPACING) * i;
            int top = 2;
            int right = left + rectWidth;
            int bottom = mHeight - top;
            mRect = new Rect(left, top, right, bottom);
            canvas.drawRect(mRect, mRectPaint);
        }

遍历下我们密码的个数，绘制这个框与4边的距离，底部顶部右部较简单，昨天的距离是单个框与最左边的距离

，有了框之后可以绘制密码了：

 // 绘制密码
        for (int i = 0; i < mInputLength; i++) {
            int cx = rectWidth / 2 + (rectWidth + PWD_SPACING) * i;
            int cy = mHeight / 2;
            canvas.drawCircle(cx, cy, PWD_SIZE, mPwdPaint);
        }

同样是遍历下输入密码的长度

我们需要在这个框内绘制，所以计算出中心坐标，大家可以在纸上画下  ，有点抽象，有了中心坐标 ，定义字体大小后就用画笔画上去即可

，最后到了输入后监听，微信是最后一位输入就开始判断，我们要继承了EditText 所以可以使用

onTextChanged（），这个方法，

 @Override
    protected void onTextChanged(CharSequence text, int start,
                                 int lengthBefore, int lengthAfter) {
        super.onTextChanged(text, start, lengthBefore, lengthAfter);
        this.mInputLength = text.toString().length();
        invalidate();
        if ( mOnInputFinishListener != null) {
            mOnInputFinishListener.onInputFinish(text.toString());
        }
    }
最后写了一个接口将内容放置框中，借口如下

public interface OnInputFinishListener {
    /**
     * 密码输入结束监听
     *
     * @param password
     */
    void onInputFinish(String password);
}

/**
 * 设置输入完成监听
 *
 * @param onInputFinishListener
 */
public void setOnInputFinishListener(
        OnInputFinishListener onInputFinishListener) {
    this.mOnInputFinishListener = onInputFinishListener;
}

在activity中直接调用即可password自己根据需求来使用即可