应用程序中的未读通知/消息计数器（在选项卡中）android

Question

我希望实现类似于以下图像的内容：

问题：我们怎样才能实现红色，未读的计数器？我要设计一些psd，然后在应用程序中重复使用它？但是我必须为每个数字复制很多.png（假设我的限制为99）。但这将是冗余。

达到此效果的最佳做法是什么？

Answer 1

您可以创建自定义视图并覆盖onDraw（）方法以绘制数字。您可能想要做的是像上面那样完全准备一个图标，除了红色圆圈中缺少的数字。然后，在自定义视图中，首先绘制该图标，然后绘制数字（您将需要稍微工作一下，以像素的精确位置来绘制它，以及如何绘制它，即文本大小，字体，颜色）。

模拟从资源导入位图的方法getSomeBitmapFromResources()（参见例如here），您的自定义视图可能如下所示：

public class MyView extends View {

    //Fields:

    private Paint paint; //Need a Paint object for colors, fonts, etc.
    private RectF rect;
    private int numberToPaint;

    //Constructors:

    public MyView(Context context, AttributeSet attrs) {
        super(context, attrs);
        paint = new Paint();

        //Choose the text properties that work for you here:
        paint.setColor(Color.WHITE);
        paint.setTypeface(Typeface.create("sans-serif", Typeface.BOLD));
        paint.setTextSize(12);
    }

    public MyView(Context context) {
        this(context, null);
    }

    //Most importantly: override onDraw for rendering of the view:

    @Override
    protected void onDraw(Canvas canvas) {
        rect.set(0, 0, getWidth(), getHeight()); //But: make sure your View 
            //will have the same size of the Bitmap you use! Set the size in XML!

        canvas.drawBitmap(getSomeBitmapFromResources(), null, rect, paint);

        //Here you will have to carefully choose the position of the text.
        //Also consider that depending on numberToPaint the x-coordinate may have to
        //be modified. Likely you want to use the Paint.getTextBounds method determine the size.
        canvas.drawText("" + numberToPaint, 60, 30, paint);
    }

    public void chooseNumberAndDraw(int n) {
        numberToPaint = n;
        postInvalidate(); //Force redraw
    }

}

在XML中，您希望使用类似

的标记添加自定义视图

<com.mysite.myproject.MyView
    android:layout_width="64dp"
    android:layout_height="64dp"
/>

当然用实际的位图尺寸替换宽度和高度。

Answer 2

使用公共TabLayout.Tab setCustomView（int layoutResId）

使用TextView和Button创建布局在自定义视图中使用它。您可以使用textView显示计数器。

供参考
setCustomView
以下是完整的例子：
Example

您也可以使用this库。