未读消息显示小红点Demo——关于QBadgeView的使用

一、需求
1.内容：实现BottomNavigation根据相应界面中有无未读消息显示小红点
2.demo：

二、实现步骤
1.首先根据BottomNavigation的Item数量确定小红点的数量
定义一个数组常量badges用来存放小红点

private val badges = arrayOfNulls<Badge?>(3)

2.检查页面是否有未读消息，根据未读消息的数量来选择显示或隐藏小红点

private fun checkMorePageUnReadData() {
    val unread = //读取未读消息数量
    ...
    if (unread > 0) {
        //显示
    } else {
        //隐藏
    }
}

3.显示或隐藏小红点

• 显示小红点：如果小红点存在则退出addBadgeAt(…)方法；如果不存在则显示小红点，显示时可设置文字，背景等内容，并绑定目标视图。
• 隐藏小红点：循环遍历隐藏目标小红点

//显示
private fun addBadgeAt(position: Int, text: String? = "") {
    if (badges[position] != null) {
        return
    }
    @Suppress("UsePropertyAccessSyntax")
    badges[position] = QBadgeView(this)
        .setBadgeText(text)
        .setBadgeBackground(
            ContextCompat.getDrawable(
                this,
                R.drawable.shape_tab_red_tip
            )
        )
        .setGravityOffset(dip(9).toFloat(), dip(3).toFloat(), true)
        .bindTarget(new_bottom_navigation.getBottomNavigationItemView(position))
}
//隐藏
badges.forEach {
    it?.hide(false)
}

三、Q&A