Android 自定义数字角标

需要显示购物车数量，网上看了一些实现方式，有的是通过把页面view控件作为子view添加的，但是会改变我已有的样式和操作，因此决定自己编写 实现显示角标的功能。

我这里的需求是使用FloatingActionButton 显示购物车的数量，但是考虑到FloatingActionButton一直停留在一个地方又会遮挡信息，因此是可拖动的。

网上看到有人推荐以下这个实现方式 ：
红色角标实现https://github.com/qstumn/BadgeView
我把该项目移library的方式引入到我自己的项目中，但是会使我页面中的 FloatingActionButton 的拖动功能异常，查看了源码，发现这个实现方式是把目标view控件当成子view 添加的方式来实现角标显示。这种方式改变了我的拖动功能，因此不适合我自己的项目需求。

学习了别人整理的paint绘制文字的一些博客，整理编写自己的 ondraw方法，完整的ondraw 如下：

 private String text;
 //动态设置text
 public void setText(String text) {
       this.text = text;
       //刷新UI
       invalidate();
   }
   //绘制 角标
 @SuppressLint("DrawAllocation")
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (text == null || text.length() == 0) {
            canvas.drawRoundRect(new RectF(0, 0, 0, 0),
                    25,
                    25,
                    new Paint());
            return;
        }
        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG); //设置无锯齿 也可以使用setAntiAlias(true)
        paint.setAlpha(200);
        paint.setStrokeWidth(2f);//设置线宽
        paint.setStyle(Paint.Style.FILL);//设置样式：FILL表示颜色填充整个；STROKE表示
        paint.setColor(getResources().getColor(R.color.colorTextError));//设置画笔颜色
        //字体
        Paint paintText=new Paint(Paint.ANTI_ALIAS_FLAG);
        paintText.setColor(Color.WHITE);
        paintText.setTextAlign(Paint.Align.LEFT);
        paintText.setTextSize(28);
        float textWidth = paintText.measureText(text) + 20; //文字的y轴坐标，20 为字体周围的空白区域
        Paint.FontMetrics fontMetrics = paintText.getFontMetrics();
        float textHeight = fontMetrics.bottom - fontMetrics.top;
        RectF rectF = new RectF(getWidth() - textWidth, 0, getWidth(), textHeight);
        canvas.drawRoundRect(rectF,
                25,
                25,
                paint);
        float x = rectF.left + 10;//10为左侧空白区域，相当于paddingLeft=10，由于上述宽度整体增加宽度为20，这里左侧空10则右侧会自动空出10
        float y = rectF.height() / 2 + (Math.abs(fontMetrics.ascent) - fontMetrics.descent) / 2;//字体纵向剧中
        canvas.drawText(text, x, y, paintText);
    }

ondraw 方法绘制角标显示功能，我的父类view 是FloatingActionButton ，因此推测以上ondraw代码不局限与父类view的类型，是否能正常使用还需要进行实际的测试。

使用方式也很简单

int count;
binding.tvRentalGo.setOnClickListener((v)->{
             if (count < 22) {
                count++;
                binding.faBtnRental.setText("" + count);
            } else {
                binding.faBtnRental.setText("");
                count=0;
            }
        });

以上参考博客地址如下，有兴趣的朋友可以阅读以下两篇博客，博主整理的知识点很详细


【1】Android 自定义View学习(三)——Paint 绘制文字属性
【2】Android 自定义角标View