Android 自定义数字角标

古城微笑少年丶 2023-02-08 12:40 11阅读 0赞

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

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

网上看到有人推荐以下这个实现方式 ：  
[红色角标实现https://github.com/qstumn/BadgeView][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 绘制文字属性][Android _View_Paint]  
> 【2】[Android 自定义角标View][Android _View]

[https_github.com_qstumn_BadgeView]: https://github.com/qstumn/BadgeView
[Android _View_Paint]: https://www.jianshu.com/p/1728b725b4a6
[Android _View]: https://www.jianshu.com/p/d5027463208e