用小红点“标记”未读消息的三个技巧（上）

2024-01-26 16:45:03

小红点，一个在现代应用程序中无处不在的小元素，却扮演着重要的角色——默默地提醒我们，有新的消息或通知需要关注。毫不夸张地说，小红点已经成为数字世界中“未读”的代名词。

那么，如何让小红点在我们的应用程序中发挥最大效用呢？今天，我们将介绍三种实现小红点的方案，每种方案都有自己的优缺点，选择哪种方案取决于您的特定需求和偏好。

方案 1：多控件方案

顾名思义，多控件方案使用多个控件来实现小红点。最常见的做法是使用一个圆形 ImageView，将其背景设置为红色，并放置在目标控件的右上角。这种方法简单易行，在实现上非常灵活。我们可以根据需要调整小红点的尺寸、颜色和位置。

<ImageView
    android:layout_width="10dp"
    android:layout_height="10dp"
    android:layout_gravity="end|top"
    android:background="@drawable/red_circle" />

方案 2：单控件绘制方案

与多控件方案不同，单控件绘制方案仅使用一个控件来绘制小红点。通常，我们会选择一个自定义 View 或继承 TextView 的控件。通过重写 onDraw() 方法，我们可以直接在画布上绘制小红点。这种方法提供了更大的灵活性，我们可以绘制任意形状和大小的小红点。

public class CustomView extends View {

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        // 绘制小红点
        Paint paint = new Paint();
        paint.setColor(Color.RED);
        canvas.drawCircle(50, 50, 5, paint);
    }
}

方案 3：容器控件绘制方案

容器控件绘制方案使用一个容器控件来绘制小红点。与单控件绘制方案类似，我们可以重写容器控件的 onDraw() 方法来绘制小红点。不同之处在于，容器控件可以包含其他子控件，这使得我们可以创建更复杂的小红点效果。

public class ContainerView extends FrameLayout {

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        // 绘制小红点
        Paint paint = new Paint();
        paint.setColor(Color.RED);
        canvas.drawCircle(50, 50, 5, paint);
    }
}