使用 Drawable 实现图标角标

我在去年曾经写过一篇类似的

《使用 Drawable 实现小红点》

，但是小红点的具体绘制是在里面实现的。这次是在其思路上进行扩展，使得小红点或者说是角标的样式更加灵活。

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

这种实现它有如下缺点：

增加了布局的层次，原本只需要一个 的 Tab 或 item，现在需要用一个布局容器和三个 的组合。

需要根据小红点的大小去设置布局参数，当它扩展成更大的带数字的小红点时，我们还需要去修改布局。

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

是对可绘制对象的抽象，再具体下来会有画图片的 或者是纯色的 ，而且 会在回调方法里提供一个 ，这使得对它的利用有了很大的可能性。所以，我们可以继承自 类，对原本的图标包装一下，并实现自己对小红点的绘制。

与我之前所写的《使用 Drawable 实现小红点》不同的是，这里的小红点，并不由我们的 本身来绘制，它是可以从外面传入的。

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

那么，如何使用呢？

以上面的图片的 Tab 为例。我们的 Tab 自定义布局如下：

然后我们在 代码中创建对应的 Tab，并以一个变量保存这个包装了小红点的 ，代码如下：

在 定义的小红点也很简单，它的形状是这样的：

代码如下：

那么，当我们需要显示或隐藏这个小红点的时候需要怎么做呢？这很简单，调用一下我们的 对象就可以了：

然后它就会更新自身的绘制。不会带来布局的变化，也没有布局代码的入侵，而且小红点可以扩展成其他任意的角标实现，不管是三角还是数字，看你传进来的 的具体表现。

项目开源地址：

badge-drawable：https://github.com/msdx/badge-drawable