使用 Drawable 实现图标角标

最新推荐文章于 2024-07-15 02:52:11 发布

貌似掉线

最新推荐文章于 2024-07-15 02:52:11 发布

阅读量3.2k

点赞数

分类专栏： Android笔记 Android开发技巧与实战文章标签： Drawable 角标小红点

本文链接：https://blog.csdn.net/maosidiaoxian/article/details/81216334

版权

本文介绍如何使用Drawable实现更灵活的图标角标，避免布局复杂性和尺寸调整问题。通过继承Drawable，将小红点作为外部传入的Bitmap绘制在图标上，允许外部自由定制小红点样式，实现显示或隐藏的动态控制。

摘要由CSDN通过智能技术生成

我在去年曾经写过一篇类似的《使用 Drawable 实现小红点》，但是小红点的具体实现是在这个类里面的。这次是在其思路上进行扩展，使得小红点或者说是角标的样式更加灵活。

在一些图标的右上角添加小红点，是我们开发中很常见的场景，比如下图所示，底部 TAB 会有小红点，上面的功能图标也会有小红点。
小红点界面

对于这种需求，我们以往的解决方式通常是使用一个 RelativeLayout，里面再放置一个 TextView，一个 ImageView 和一个表示小红点的普通的 View，并且，我们还需要根据小红点的大小，写死这个 View 的外边距参数以让它的中心能够“正好”位于图标的右上角。

这种实现它有如下缺点：

增加了布局的层次，原本只需要一个 TextView 的 Tab 或 item，现在需要用一个布局容器和三个 View 的组合。
需要根据小红点的大小去设置布局参数，当它扩展成更大的带数字的小红点时，我们还需要去修改布局。

而 Drawable 正是解决这些问题的利器。

Drawable 是对可绘制对象的抽象，再具体下来会有画图片的 BitmapDrawable 或者是纯色的 ColorDrawable，而且 Drawable 会在回调方法里提供一个 Canvas，这使得对它的利用有了很大的可能性。所以，我们可以继承自 Drawable 类，对原本的图标包装一下，并实现自己对小红点的绘制。
与我之前所写的《使用 Drawable 实现小红点》不同的是，这里的小红点，并不由我们的 Drawable 本身来绘制，它是可以从外面传入的。

这也就是说：我们只需要在 Drawable 里实现将小红点的 Drawable 画到我们图标上的对应位置上即可。具体的小红点的表现形式，是一个小红点，还是外面有一层描边，还是带数字，我们都不需要关心，由调用者处理。而且，这个小红点的 Drawable，可以通过 xml 定义，也可以自己再继承 Drawable 类来实现绘制（如带数字的小红点），这使得它也有很大的扩展性。我们只需要提供设置是否显示小红点以及设置小红点的位置的方法即可。完整代码如下：

class BadgeDrawable(private val mOrigin: Drawable, val badge: Drawable) : Drawable() {
    var showBadge: Boolean = false
        set(show) {
            field = show
            invalidateSelf()
        }

    var gravity = Gravity.CENTER

    init {
        badge.setBounds(0, 0, badge.intrinsicWidth, badge.intrinsicHeight)
    }

    override fun draw(canvas: