Android自定义小红点消息提示

我们在开发的时候，会经常遇到小红点的需求，比如类似微信的聊天信息，新消息的通知这样的需求。如果通过图片来实现，会比较麻烦，一换图片就要多做一张图片。我们有万能的画笔，为什么不画出来呢。

• 效果图展示
• 自定义view源码
• 使用方式

• 源码下载

  无图不上源码实现。先上图再说。 
   
  比如 我的右上角有个小红点 
  ok 我们底部菜单栏是通过RadioButton来实现的，那么我们现在就开始对RadionButton来进行重写 
  神马都不说了，直接上源码。

  新增一个 TipButton类

package com.yanmoai.ui.view;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.widget.RadioButton;

import com.yanmoai.R;



public class TipButton extends RadioButton {

    private boolean mTipOn = false;

    private Dot mDot;

    private class Dot {

        int color;

        int radius;

        int marginTop;
        int marginRight;

        Dot() {
            float density = getContext().getResources().getDisplayMetrics().density;
            radius = (int) (5 * density);
            marginTop = (int) (3 * density);
            marginRight = (int) (3 * density);

            color = getContext().getResources().getColor(R.color.tip_red);
        }

    }

    public TipButton(Context context) {
        super(context);
        init();
    }

    public TipButton(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public TipButton(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }

    private void init() {
        mDot = new Dot();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        if (mTipOn) {
            float cx = getWidth() - mDot.marginRight - mDot.radius;
            float cy = mDot.marginTop + mDot.radius;

            Drawable drawableTop = getCompoundDrawables()[1];
            if (drawableTop != null) {
                int drawableTopWidth = drawableTop.getIntrinsicWidth();
                if (drawableTopWidth > 0) {
                    int dotLeft = getWidth() / 2 + drawableTopWidth / 2;
                    cx = dotLeft + mDot.radius;
                }
            }


            Paint paint = getPaint();
            //save
            int tempColor = paint.getColor();

            paint.setColor(mDot.color);
            paint.setStyle(Paint.Style.FILL);
            canvas.drawCircle(cx, cy, mDot.radius, paint);

            //restore
            paint.setColor(tempColor);
        }
    }

    public void setTipOn(boolean tip) {
        this.mTipOn = tip;

        invalidate();
    }

    public boolean isTipOn() {
        return mTipOn;
    }
}

 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

定义好之后，我们来调用它，很简单 布局文件中直接声明就行。 
布局文件代码实现 上代码

 <com.yanmoai.ui.view.TipButton
    android:id="@+id/home_user_rb"
    style="@style/TabMenuText"
    android:drawableTop="@drawable/tab_user_btn"
    android:text="@string/home_mine_text"
             />
 
 
1
2
3
4
5
6

里面的具体样式，根据你的需求来实现就行。 
里面我们还实现了一个是否显示小红点的方法

   public void setTipOn(boolean tip) {
        this.mTipOn = tip;

        invalidate();
    }

 
 
1
2
3
4
5
6

传入一个布尔值就行。 
好了今天博客就写到这里了。欢迎大家在评论区提问，吐槽，和给予好评。