如何快速定义一个显示未读消息数的控件（QQ，微信）

吴长老
5,404 阅读3分钟

昨天写的一篇《自定义一个广告倒计时View》，阅读量还是蛮高的，看来大家都喜欢这个自定义View的。那好，今天我们再来聊一聊自定义View吧～这两天比较累，天天加班，也没太多时间写公众号，望见谅。每天回家的时候路上都是在打哈欠的，实在是困得不行，微信公众号每天下班之后写的，写完也快两三点了，日了狗！！！应届生，不容易！！！你们的鼓励就是对我最大的支持，希望多点几个赞吧！

看看一下我们今天要完成的效果图吧！


简书App


掘金App


新浪微博


然后来看一下我们的效果图：


自定义View


效果图

卧槽，效果图简直一模一样啊，惊呆了，有木有！！！
我们应该怎么来实现这样的自定义控件呢？
其实很简单，只要几行代码你就可以实现这样一个控件，具体怎么做呢，我们一步一步来。

首先，我们要知道，这个控件是一个组合的自定义View，上下结构，上面是ImageView，下面是TextView，然后右上角还有一个TextView
所以我们先把这个布局写出来




    

    

    
a

默认的TextView是方形的，不会出现圆角，我们需要给它指定一个Shape，Shape文件也很简单，请看Shape文件的代码

shape文件定义好之后，直接在TextView的background属性中使用就好了
好了，布局文件定义好了，我们来看一下如何来使用这个布局文件

我们需要创建一个BottomBarView并且继承Relativelayout，然后重写它的构造方法，接下来我们不需要重写onMeasure、onLayout、onDraw，我们只需要简单的一步，就可以把控件都加载出来了，请看代码：

public class BottomBarView extends RelativeLayout {

    private TextView bar_num;

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

    public BottomBarView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public BottomBarView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        RelativeLayout rl = (RelativeLayout) LayoutInflater.from(context).inflate(R.layout.change_color_bar, this, true);
        bar_num = (TextView) rl.findViewById(R.id.bar_num);
    }
}

看到没有我也没做啥，就是把之前写的布局inflate出来，然后添加到这个自定义View里面来了，很简单吧。

到这里还没有完全写好，接下来我们要添加这样的功能，动态的修改右上角红色角标的显示数字，就像QQ未读消息一样，看一下我们代码是怎么写的：

public class BottomBarView extends RelativeLayout {

    private int msgCount;
    private TextView bar_num;

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

    public BottomBarView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public BottomBarView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        RelativeLayout rl = (RelativeLayout) LayoutInflater.from(context).inflate(R.layout.change_color_bar, this, true);
        bar_num = (TextView) rl.findViewById(R.id.bar_num);
    }

    public void setMessageCount(int count) {
        msgCount = count;
        if (count == 0) {
            bar_num.setVisibility(View.GONE);
        } else {
            bar_num.setVisibility(View.VISIBLE);
            if (count < 100) {
                bar_num.setText(count + "");
            } else {
                bar_num.setText("99+");
            }
        }
        invalidate();
    }

    public void addMsg() {
        setMessageCount(msgCount + 1);
    }
}

其实就是加了一个setMessageCount方法和addMsg方法，可以动态更新未读消息的显示数量。

说一下我的观点吧，加载布局文件来自定义View比较省事，但是不够灵活。直接通过new TextView或者new ImageView来进行自定义控件比较麻烦，在业务逻辑不是很复杂的情况下，直接用布局文件自定义View就好了。因为我一直觉得，够用就好。
好了，整个自定义View就完成了，是不是很简单，效果图已经在文章开头发了。如果觉得我写得好，可以点个赞，然后关注一下的哦～（我睡觉去了）
另外，我的微信公众号也开播了，每天都会分享一篇优质的技术文章，欢迎大家来踩点。（公众号：代码也是人）


公众号：代码也是人：

avatar
文章
阅读
粉丝