创建交互式和用户友好的接口对于确保用户参与至关重要。大大提高用户体验的一种工具就是密码强度指标。今天，我们将分解使用Java编程语言在Android中实现的简单而有效的密码测量表的创建。
代码分解
让我们首先查看整个代码：
public class PasswordStrengthIndicator extends View {
private int passwordStrength = 0; // range 0 - 10
private final Paint filledPaint;
private final Paint unfilledPaint;
public PasswordStrengthIndicator(Context context, AttributeSet attrs) {
super(context, attrs);
filledPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
unfilledPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
unfilledPaint.setColor(ContextCompat.getColor(context, R.color.grey)); // Color of unfilled dots
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int width = getWidth();
int height = getHeight();
int dotWidth = width / 20; // Adjusted to allow space for gaps
int dotHeight = dotWidth / 2;
float radius = 5 * getResources().getDisplayMetrics().density; // 5dp to px
int totalDotWidth = 10 * dotWidth + 9 * dotWidth; // total width of all dots and spaces
int start = (width - totalDotWidth) / 2; // the starting x value to center the dots
for (int i = 0; i < 10; i++) {
int x = start + i * (dotWidth * 2);
RectF rectF = new RectF(x, (height - dotHeight) / 2, x + dotWidth, (height + dotHeight) / 2);
if (i < passwordStrength) {
if (passwordStrength <= 3) {
filledPaint.setColor(ContextCompat.getColor(getContext(), R.color.red));
} else if (passwordStrength <= 7) {
filledPaint.setColor(ContextCompat.getColor(getContext(), R.color.yellow));
} else {
filledPaint.setColor(ContextCompat.getColor(getContext(), R.color.green));
}
canvas.drawRoundRect(rectF, radius, radius, filledPaint);
} else {
canvas.drawRoundRect(rectF, radius, radius, unfilledPaint);
}
}
}
public void setPasswordStrength(int passwordStrength) {
this.passwordStrength = passwordStrength;
invalidate();
}
}
类PasswordStrengthIndicator扩展了View，View是Android中的小部件的基类，它允许它在UI布局中使用。
初始化油漆对象
在构造函数中，我们初始化了两个Paint对象。 Paint类拥有有关如何绘制几何形状，文本和位图的样式和颜色信息。在我们的情况下，我们使用两个单独的实例：filledPaint用于填充的点，而unfilledPaint则用于未填充的点。
在画布上
图纸发生在onDraw(Canvas canvas)方法中。我们首先确定小部件的宽度和高度以及代表密码强度的点的大小。
我们计算点和它们之间的间隙所需的总宽度，并计算起点以将其居中。然后，我们循环10次（我们的密码强度范围为0-10），根据当前密码强度绘制填充或未填充的点。
根据密码强度，填充点的颜色更改：
- 强度小于或等于3：红色
- 4至7之间的力量：黄色
- 强度大于7：绿色
更新密码强度
最后，我们有一个公共方法setPasswordStrength(int passwordStrength)。此方法设置密码强度并调用invalidate()。 invalidate()方法告诉系统应该重新绘制此视图，从而导致onDraw方法再次调用。
这是如何运作的？
此密码强度指示器纯粹是视觉表示。您必须创建一个机制来计算用户输入密码的实际强度。计算可以基于大写字母，小写字母，数字，特殊字符以及密码的整体长度。
每当密码输入更改时，请以新的强度在此视图上调用setPasswordStrength(int passwordStrength)。该指标将自动更新，向用户提供实时反馈。
进一步的自定义
自定义可能性是无限的。您可以修改颜色以更好地适合您的应用程序的主题。此外，您可以调整点大小和半径以最适合您的需求。您可能还考虑创建一个更令人愉悦的指示器的梯度密码强度计。
颜色资源
在提供的代码中，我们指的是R.color.red，R.color.yellow和R.color.green之类的颜色资源。这些颜色资源应在您的项目的res/values/colors.xml文件中定义。您可以在Android开发人员More Resource Types中了解有关色彩资源的更多信息。
如何在布局中使用它
要在Android布局中使用PasswordStrengthIndicator，请使用下面的XML代码段：
<com.yourPackage.PasswordStrengthIndicator
android:id="@+id/password_strength_indicator"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_gravity="center"/>
将com.yourPackage替换为已放置PasswordStrengthIndicator类的实际软件包名称。
和在Java中，以这种方式致电根据您的需要来设定强度：
PasswordStrengthIndicator passwordStrengthIndicator = findViewById(R.id.password_strength_indicator);
passwordStrengthIndicator.setPasswordStrength(10);
最后
我希望这篇文章能使您对如何创建视觉上吸引人和交互式密码强度指标有深入的了解。借助此简单指南，您可以创建自己的密码强度计并根据应用程序的要求进行自定义。