仿qq自定义未读消息数显示角标

66FF020E13B921CB19C7542F4801AF43.png

如图所示，我们需要实现的效果
在消息tab上，是一个组合的自定义view，具体实现如下

 <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

 <ImageView
        android:id="@+id/message_img"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:layout_centerHorizontal="true"
        android:src="@mipmap/ic_launcher" />

    <TextView
        android:id="@+id/message_tv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/bar_iv"
        android:gravity="center"
        android:text="消息" />

    <TextView
        android:id="@+id/message_num"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="-12dp"
        android:layout_toRightOf="@+id/message_img"
        android:background="@drawable/red_bubble_bg"
        android:text="1"
        android:gravity="center"
        android:textColor="#FFFFFF"
        android:textSize="10dp" />
</RelativeLayout>

给消息数量的TextView 设置红色的bubble背景图red_bubble_bg

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="180dip" />
    <solid android:color="#FF0000" />
    <padding
        android:left="4dip"
        android:right="4dip" />
</shape>

如果消息数超过99条，显示99+，如果没有未读消息，则红点不显示

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

就是这么简单 ，over