本篇Blog记录自定义EditText实现矩形密码框
整体思路大致如下：
- 绘制边框
- 绘制分割线
- 绘制黑色圆形
- 输入监听处理
下面按照上述步骤依次进行，在此之前，先做好准备工作。
准备工作
在开工之前，我们需要先在attrs.xml中定义相关属性
<declare-styleable name="PasswordEditText">
<attr name="inputMaxNum" format="integer" />
<attr name="roundAngle" format="dimension" />
<attr name="borderColor" format="color" />
<attr name="divingColor" format="color" />
<attr name="circleColor" format="color" />
<attr name="borderWidth" format="dimension" />
<attr name="divingWidth" format="dimension" />
<attr name="circleRadius" format="dimension" />
</declare-styleable>
上面的属性分别说明作用
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一下更感谢！
参考文档