Android自定义view制作绚丽的验证码

感谢您对Android自定义View制作绚丽验证码的关注，下面是我对此的完整攻略。

1. 前言

自定义View是Android很重要的一部分，因为它可以帮助我们创建最适合我们业务逻辑的用户界面。这个教程将向您展示如何制作一个绚丽的验证码。首先，我们将介绍带有随机数字和字母的简单验证码，然后我们将介绍如何使用自定义View类创建更复杂的验证码。

2. 制作带有随机数字和字母的验证码

我们将使用Canvas类进行制作。Canvas是一个非常强大的类，它可以向界面上绘制各种各样的图形。我们将使用它来创建我们的验证码。我们的代码将有两个类：一个是MainActivity，另一个是自定义View类，用于制作验证码。

2.1 自定义View类

创建一个自定义View类，并重写onDraw()方法。在上面定义 Paint 对象的一些属性，例如：设置字体颜色，大小，setTypeface 设置字体样式，以及 setAntiAlias 设置抗锯齿并在屏幕上绘制文字。

public class RandomTextView extends View {
    ...
    private void initPaint(){
        paint = new Paint();
        paint.setStyle(Paint.Style.FILL_AND_STROKE);             // 填充模式
        paint.setColor(getResources().getColor(R.color.colorAccent)); // 设置颜色为红色
        paint.setAntiAlias(true);                                // 抗锯齿
        paint.setTextSize(80);                                   // 文字大小为80px
        paint.setTypeface(Typeface.DEFAULT_BOLD);                // 设置字体为粗体
    }

    private void drawText(Canvas canvas, Rect rect, String text){
        Paint.FontMetricsInt fontMetricsInt = paint.getFontMetricsInt();
        int baseline = (rect.bottom + rect.top - fontMetricsInt.bottom - fontMetricsInt.top) / 2; // 计算文字在纵轴方向居中的位置
        paint.setTextAlign(Paint.Align.CENTER);
        canvas.drawText(text, rect.centerX(), baseline, paint);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 设置一个填充白色的矩形
        canvas.drawColor(Color.WHITE);
        Rect rect = new Rect(0, 0, getWidth(), getHeight());
        drawText(canvas, rect, RANDOM_TEXT); // 绘制文字
    }
}

2.2 添加随机字符

为了让我们的验证码更加完整，我们需要加入随机字符。为此，我们需要编写一个RandomUtil类。该类有一个静态方法next()，可以产生长度为4的随机字符串。

public class RandomUtil {
    private static String BASE_STR = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

    public static String next(){
        Random random = new Random();
        StringBuilder builder = new StringBuilder();
        for (int i = 0; i < 4; i++) {
            builder.append(BASE_STR.charAt(random.nextInt(BASE_STR.length())));
        }
        return builder.toString();
    }
}

在我们的MainActivity类中，我们初始化我们的自定义View，并在每次单击按钮时更改随机字符串并通知自定义View刷新。

public class MainActivity extends AppCompatActivity {
    private Button button;
    private RandomTextView textView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        textView = findViewById(R.id.rand_tv);
        button = findViewById(R.id.refresh_btn);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                textView.setRandomText(RandomUtil.next());
            }
        });
    }
}

3. 自定义View类制作更复杂的验证码

现在，我们将讨论如何创建更复杂的验证码。我们首先需要绘制一个随机文本，然后绘制一些斜线、圆和波浪线，最后在所有这些图形上都添加一层雪花效果。

我们使用路径和绘图技术绘制这些项目。我们需要几个绘图函数来做这件事：绘制直线，贝塞尔曲线，圆，还有计算路径上的点。

private void drawLine(Canvas canvas, Path path, Rect rect){
        float startX = (float) (Math.random() * rect.width());
        float startY = (float) (Math.random() * rect.height());
        float stopX = (float) (Math.random() * rect.width());
        float stopY = (float) (Math.random() * rect.height());
        path.moveTo(startX, startY);
        path.lineTo(stopX, stopY);
        canvas.drawPath(path, paint);
    }

private void drawCircle(Canvas canvas, Path path, Rect rect){
        float x = (float) (Math.random() * rect.width());
        float y = (float) (Math.random() * rect.height());
        float radius = 10 + (float) (Math.random() * 90);
        path.addCircle(x, y, radius, Path.Direction.CCW);
        canvas.drawPath(path, paint);
    }

private void drawWave(Canvas canvas, Path path, Rect rect){
        float xStart = -rect.width();
        float yStart = (float) (rect.height() * (Math.random() * 0.4 + 0.3));
        path.moveTo(xStart, yStart);
        path.quadTo(-rect.width() / 2, (float) (rect.height() * (Math.random() * 0.1 + 0.2)), 0, yStart);
        path.quadTo(rect.width() / 2, (float) (rect.height() * (Math.random() * 0.1 + 0.2)), rect.width(), yStart);
        canvas.drawPath(path, paint);
    }

private PointF calculatePointOnPath(Path path, float length){
        PathMeasure measure = new PathMeasure(path, true);
        float[] point = new float[2];
        measure.getPosTan(length, point, null);

        return new PointF(point[0], point[1]);
}

最后，我们需要在onDraw()函数中重写绘图技术，并在每次单击按钮时刷新绘图技术。

@Override
protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 设置一个填充白色的矩形
        canvas.drawColor(Color.WHITE);

        Rect rect = new Rect(0, 0, getWidth(), getHeight());

        // 绘制文本
        drawText(canvas, rect, randomText);

        // 设置画笔宽度
        paint.setStrokeWidth(5f);

        // 绘制直线
        Path path = new Path();
        for (int i = 0; i < 6; i++) {
            path.reset();
            drawLine(canvas, path, rect);
        }

        // 绘制曲线
        path = new Path();
        for (int i = 0; i < 4; i++) {
            path.reset();
            PointF startPoint = calculatePointOnPath(path, (float) (Math.random() * 1000));
            PointF endPoint = calculatePointOnPath(path, (float) (Math.random() * 1000));
            float diffX = endPoint.x - startPoint.x;
            float diffY = endPoint.y - startPoint.y;
            float ctrlX = startPoint.x + diffX / 3;
            float ctrlY = startPoint.y + diffY / 3;
            path.moveTo(startPoint.x, startPoint.y);
            path.cubicTo(ctrlX, ctrlY, ctrlX, ctrlY, endPoint.x, endPoint.y);
            canvas.drawPath(path, paint);
        }

        // 绘制圆
        path = new Path();
        for (int i = 0; i < 10; i++) {
            path.reset();
            drawCircle(canvas, path, rect);
        }

        // 绘制波
        path = new Path();
        for (int i = 0; i < 6; i++) {
            path.reset();
            drawWave(canvas, path, rect);
        }

        // 添加雪花
        addSnowEffect(canvas);

    }

最后，我们完成了自定义View类的实现，现在可以创建更复杂的验证码了。

阅读剩余 74%