Android View自定义EditText实现矩形密码框

inputMaxNum：可输入长度，默认是 6，六位密码
roundAngle：矩形密码框的圆角
borderColor：矩形边框颜色
divingColor：分割线颜色
circleColor：圆形字符颜色
borderWidth：矩形边框宽度
divingWidth：分割线宽度
circleRadius：圆形半径

设置好了样式属性，初始化边框、分割线和画圆的 Paint

/**

• Initial Paint
  */
  private void initPaint() {
  // 抗锯齿
  borderPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
  borderPaint.setAntiAlias(true);
  // 设置画笔宽度
  borderPaint.setStrokeWidth(borderWidth);
  // 设置画笔风格
  borderPaint.setStyle(Paint.Style.STROKE);
  // 设置画笔颜色
  borderPaint.setColor(borderColor);
  // 分割线画笔
  divingPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
  divingPaint.setAntiAlias(true);
  divingPaint.setStrokeWidth(lineWidth);
  divingPaint.setColor(divingColor);
  divingPaint.setStyle(Paint.Style.FILL);
  // 圆心画笔
  circlePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
  circlePaint.setAntiAlias(true);
  circlePaint.setStyle(Paint.Style.FILL);
  circlePaint.setColor(circleColor);
  circlePaint.setStrokeWidth(radius);
  }

下面正式开始

绘制边框

我们需要在 onDraw() 方法中绘制矩形边框

分别传入 RectF 矩形对象、圆角值和画笔

// 绘制圆角矩形
canvas.drawRoundRect(rectF, roundAngle, roundAngle, borderPaint);

绘制分割线

绘制分割线时，这里要注意，六个密码框是五条线

我们需要传入起始点、结束点和画笔参数进行绘制

// 绘制分割线，5个分割线
for (int i = 1; i < count; i++) {
canvas.drawLine(divingWidth * i, 0, divingWidth * i, height, divingPaint);
}

绘制圆形

最后我们要绘制圆点来替代输入的字符。

这里要注意的是，我们绘制的圆点的个数是需要根据我们输入的字符的个数来判断
即：position 是当前输入的字符个数的坐标

// 绘制圆形点
for (int i = 0; i < position; i++) {
canvas.drawCircle(startX * (2 * i + 1), startY, radius, circlePaint);
}

输入监听处理

在我们绘制完成后，只要对输入进行处理就 OK 了。只要在输入后，让绘制圆点的方法进行绘制就可以了。

这里我们在 onTextChanged 方法中进行处理。重写该方法，这里处理比较简单，判断输入的长度，之前已经设置了最大输入数。

@Override
protected void onTextChanged(CharSequence text, int start, int lengthBefore, int lengthAfter) {
super.onTextChanged(text, start, lengthBefore, lengthAfter);
// 获取当前输入位置
position = text.length();
}

到这里，基本整个 View 都已经完成。下面说下使用。

使用

<com.xxxx.ui.PasswordEditText
android:id=“@+id/pet_update_pay_pwd”
android:layout_width=“300dp”
android:layout_height=“50dp”
android:layout_marginTop=“20dp”
app:inputMaxNum=“6”
android:inputType=“numberPassword”
android:background=“@null”
app:layout_constraintStart_toStartOf=“parent”
app:layout_constraintEnd_toEndOf=“parent”
app:layout_constraintTop_toBottomOf=“@id/tv_update_pay_pwd_tips” />

可以看到和使用系统控件没有区别，其中 inputMaxNum 是我们在 attrs 中定义的属性，用于确定可以输入的字符的个数，这里因为是六位密码，所以是 6。

不同样式的键盘

顺便一提，关于键盘我们也可以写成类似下面这样子的，仍然可以适用

对于上面这种键盘，思路如下：
我们需要写几个 TextView 放上面就可以了。只是在点击键盘区域后，对我们原来的输入监听处理逻辑进行修改，在点击键盘区域后再进行绘制密码圆形就可以实现了。
最后附上完整代码地址：
GItHub AndroidCustomView-PasswordEditText
顺便帮忙 star 一下更感谢！

参考文档
EditText 的 onTextChanged 详解

。
最后附上完整代码地址：
GItHub AndroidCustomView-PasswordEditText
顺便帮忙 star 一下更感谢！

参考文档
EditText 的 onTextChanged 详解