Android自定义带消息提醒控件

相信大家都玩过各类社交软件,当有消息提示的时候会有消息提醒以便用户通知用户有消息了

安卓里面能实现这种效果有2种方式

1 可以用个framelayout来控制位置

2 写个自定义View来专门为这个需求服务（今天要讲的重点）

3 网上专门有一个BadgeView来做这事情(这东西我看了一下源码,大概思路就是 该控件继承了TextView,经过各种处理之后把要设置的view的父layout改成了FrameLayout,,其实是跟第一点思路有点类似的，但是这有一个问题，当你原来的父控件是相对布局也就是RelaviteLayout的时候 用这个控件就6了 位置全乱了，欢迎尝试，这东西百度一下整页都是 小弟就不放链接了昂)

小弟文采有限就不bb太多了 666

直接开始吧

分大概x个步骤

1 自定义属性(没自定义属性还叫自定义View??)

2 测量该控件的宽高

3 测量控件里头图片的大小，位置

4 测量消息提醒的圆或者其他奇形怪状的消息提醒x形状的位置

5 测量消息提醒字体的位置

嗯 x=5;

首先自定义View肯定有自定义属性,不然就没逼格了哈

属性如下：

res-values-attr.xml里头

<declare-styleable name="BadgeView">        <attr name="badgeText" format="string"></attr>        <attr name="badgeBitmap" format="reference"></attr>        <attr name="badgeColor" format="color"></attr>        <attr name="badgeTextColor" format="color"></attr>        <attr name="badgeTextSize" format="dimension"></attr>        <attr name="badgeRadio" format="float"></attr>        <attr name="badgePosition">            <enum name="center" value="0"></enum>            <enum name="left_top" value="1"></enum>            <enum name="left_vertical" value="2"></enum>            <enum name="left_bottom" value="3"></enum>            <enum name="right_top" value="4"></enum>            <enum name="right_vertical" value="5"></enum>            <enum name="right_bottom" value="6"></enum>            <enum name="top_horizatal" value="7"></enum>            <enum name="bottom_horizatal" value="8"></enum>        </attr>    </declare-styleable>

badge means 标签 

属性就不介绍了 见名思意

然后通过布局文件设置该属性:

 <com.example.app.BadgeView        android:id="@+id/view"        android:layout_width="150dp"        android:layout_height="50dp"        android:background="#a06c"        custom:badgeBitmap="@drawable/ic_launcher"        custom:badgeColor="#a06c"        custom:badgePosition="right_top"        custom:badgeRadio="0.18"        custom:badgeText="99"        custom:badgeTextColor="@android:color/white"        custom:badgeTextSize="13sp" />

记得要在命名空间加上  xmlns:custom="http://schemas.android.com/apk/res/com.example.app" （直接复制自动生成的 改一下就好了 最后的是你的项目的包名）

然后通过代码取得设置的属性:

先声明全局变量：

    private String badgeText;//标签里面的字体    private Bitmap badgeBitmap;//要显示的位图    private Paint textPaint;//字体画笔    private Paint badgePaint;//标签画笔    private Rect textRect;//测量字体宽高的类    private int badgeTextSize;//字体大小    private int badgeTextColor;//字体颜色    private int badgeColor;//标签的颜色    private int badgePosition;//标签的位置    private float radius;//标签的半径    private float badgeRadio = 0.3f;//标签对于整个view的比例    private boolean isHasBadge = false;//是否需要标签

构造方法里面:

public BadgeView(Context context, AttributeSet attrs) {        super(context, attrs);        // TODO Auto-generated constructor stub        TypedArray a = context.obtainStyledAttributes(attrs,                R.styleable.BadgeView);        int count = a.getIndexCount();        for (int i = 0; i < count; i++) {            int attr = a.getIndex(i);            switch (attr) {                case R.styleable.BadgeView_badgeBitmap:                badgeBitmap = BitmapFactory.decodeResource(getResources(),                        a.getResourceId(attr, R.drawable.ic_launcher));                    break;                case R.styleable.BadgeView_badgeColor:                badgeColor = a.getColor(attr, Color.RED);                    break;                case R.styleable.BadgeView_badgePosition:                badgePosition = a.getInt(attr, 0);                    break;                case R.styleable.BadgeView_badgeText:                badgeText = a.getString(attr);                    break;                case R.styleable.BadgeView_badgeTextColor:                badgeTextColor = a.getColor(attr, Color.WHITE);                    break;                case R.styleable.BadgeView_badgeTextSize:                badgeTextSize = a.getDimensionPixelSize(attr, 0);                    break;                case R.styleable.BadgeView_badgeRadio:                badgeRadio = a.getFloat(attr, 0.3f);                    break;            }        }        a.recycle();        if (badgeText != null) {            initTextPaint();        }        badgePaint = new Paint();        badgePaint.setColor(badgeColor);        badgePaint.setAntiAlias(true);    }

initTextPaint()方法就是初始化字体画笔:

    private void initTextPaint() {        textPaint = new Paint();        textRect = new Rect();        textPaint.setColor(badgeTextColor);        textPaint.setTextSize(badgeTextSize);        textPaint.getTextBounds(badgeText, 0, badgeText.length(), textRect);        textPaint.setAntiAlias(true);    }

初始化完成以后，开始测量该view的宽高的,重写onMeasure(int widthMeasureSpec, int heightMeasureSpec) 方法:

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        // TODO Auto-generated method stub        int specMode = MeasureSpec.getMode(widthMeasureSpec);        int specSize = MeasureSpec.getSize(widthMeasureSpec);        int width, height;        if (specMode == MeasureSpec.EXACTLY) {            width = specSize;        } else {            width = badgeBitmap.getWidth();        }        specMode = MeasureSpec.getMode(heightMeasureSpec);        specSize = MeasureSpec.getSize(heightMeasureSpec);        if (specMode == MeasureSpec.EXACTLY) {            height = specSize;        } else {            height = badgeBitmap.getHeight();        }        setMeasuredDimension(width, height);        calculateScaleBitmap();    }

代码解释:

首先获得模式跟值(系统默认)

如果模式是 MeasureSpec.EXACTLY 那么也就是说你已经设置了Layout_width,height为准确的数值或者是match_parent 否则 则按照bitmap的大小作为该view的大小
最后把你测量好的值设上去 setMeasuredDimension(width, height); 

测量好View的宽高之后顺便把bitmap也测量了:

    private void calculateScaleBitmap() {        // TODO Auto-generated method stub        int min = Math.min(getMeasuredHeight(), getMeasuredHeight());        if (badgeBitmap.getWidth() > getMeasuredWidth()                || badgeBitmap.getHeight() > getMeasuredHeight()) {            badgeBitmap = Bitmap                    .createScaledBitmap(badgeBitmap, min, min, true);        }    }

代码解释: 获得宽高最短的一边作为标准:如果bitmap宽大于控件的宽 或者 高大于控件的高 则直接按照控件最小的边做缩放

这么一来我们的bitmap宽高也设置好了(默认或者按照以上做缩放)

好了就画出来呗 对吧 ^_^

咋画？ 重写onDraw(Canvas canvas)方法呗

    @Override    protected void onDraw(Canvas canvas) {        // TODO Auto-generated method stub        drawBadgeBitmap(canvas);        if (isHasBadge)            drawBadgeText(canvas);    }

我们先把目光放在drawBitmap(Canvas canvas)方法上，很简单:

  private void drawBadgeBitmap(Canvas canvas) {        // TODO Auto-generated method stub        int left = getWidth() / 2 - badgeBitmap.getWidth() / 2                + getPaddingLeft() - getPaddingRight();        int top = getHeight() / 2 - badgeBitmap.getHeight() / 2                + getPaddingTop() - getPaddingBottom();        canvas.drawBitmap(badgeBitmap, left, top, null);    }

虽然简单 也解释一下吧。。

首先测量该bitmap要画在哪个位置 (刚刚的是测量大小哦 现在才是画到View里面去哦)

首先测量该bitmap到底要画在什么位置(我这里是居中), 所以要测量出左边相当于控件来说是什么位置 上边相对于控件来说是什么位置 因为我们刚刚已经测量了bitmap的宽高 所以下边右边就直接按照bitmap的高 宽来确定了

如果要居中 左边当然就是: 控件的宽/2-bitmap的宽/2 (不懂的拿笔拿纸算一下,数学36分表示这点数学题完全没难度，2333)

    那么上边呢？ 如法炮制，控件的高/2-bitmap的高/2 (同上)

最后用canvas.drawBItmap(Bitmap src,int left,int top,Paint paint)画出位图,至于最后一个为什么是Null? 小弟学艺不精 只知道null也能画出bitmap就对了^_^

好了 这么一来图片总算画好了

然后再来画我们的标记, 标记这个东西嘛。。我这里是一个红色圆 其他的形状思路也是一样的，先来讲讲思路吧

Q1 这个圆的面积是多大(重点 直接影响体验)

Q2 这个圆是啥颜色 (easy 上面不是有个标记画笔么)

Q3 这个圆在什么位置(重点 算一下就好了)

那么下面我们一个一个来解决：

A1:

圆的面积=x; x=piR平方对吧 Java已经提供了Pi 我们只要算r=多少就ok了。

好几种写法 可以写死 比如圆是整个面积的10分1 8分1什么的 我一开始也是这样写的 看着还可以  但是这写法嘛 好像不太灵活 万一大小不喜欢还tm要去改源码？不干，果断不干。 所以我在自定义属性的xml里加了一个badgeRadio属性 也就是可以自己动态设置面积 其实也就是半径拉 那么这个半径如何算呢，这里以圆的面积是位图总面积的30%为例:

    private int calculateRadius() {        // TODO Auto-generated method stub        int totalArea = badgeBitmap.getWidth() * badgeBitmap.getHeight();        return (int) Math.sqrt(totalArea * badgeRadio / Math.PI);    }

其中badgeRadio=0.3
totalArea 总面积=位图的总面积 正方形的面积不用说了吧。。w * h

半径： 公式：pi*r²=位图w*h*0.3 那么r²=w*h*0.3/pi  那么r=开根号前者 

r就出来了 r出来了就tm好办了 直接画圆就好了6666

等等 这圆该画在什么位置。。。。

嗯对 下面就来解决这个问题

在自定义属性里面我们看到了一个bradePosition来设置圆到底在哪 分别是中间 左上 左中 左下，右上，右中，右下，顶中，底中，那么我们就来算这些位置

       private void drawBadgeText(Canvas canvas) {        // TODO Auto-generated method stub        radius = (float) calculateRadius();        float cx = 0;        float cy = 0;        switch (badgePosition) {            case 0:            cx = getWidth() / 2;            cy = getHeight() / 2;                break;            case 1:            cx = getPaddingLeft() + radius;            cy = getPaddingTop() + radius;                break;            case 2:            cx = getPaddingLeft() + radius;            cy = getHeight() / 2;                break;            case 3:            cx = getPaddingLeft() + radius;            cy = getHeight() - getPaddingBottom() - radius;                break;            case 4:            cx = getWidth() - getPaddingRight() - radius;            cy = getPaddingTop() + radius;                break;            case 5:            cx = getWidth() - getPaddingRight() - radius;            cy = getHeight() / 2;                break;            case 6:            cx = getWidth() - getPaddingRight() - radius;            cy = getHeight() - getPaddingBottom() - radius;                break;            case 7:            cx = getWidth() / 2;            cy = getPaddingTop() + radius;                break;            case 8:            cx = getWidth() / 2;            cy = getHeight() - getPaddingBottom() - radius;                break;        }        canvas.drawCircle(cx, cy, radius, badgePaint);        canvas.drawText(badgeText, (float) (cx - textRect.width() / 2.0f),                (float) (cy + textRect.height() / 2.0f), textPaint);    }

获得半径 判断位置 画出来 圆的位置一旦出来了 字体的位置自然也就出来了 在圆的中间嘛 算法跟刚的位图一样的

那么这个自定义view貌似就已经全部出来了亲，图 标记 标记里面的字体 都出来了。下面就向外公布一些方法能设置所需属性就ok了 就不贴出来了

不过这里有一个 setPosition的时候 你总不能要人家setPosition(1),setPosition(2)这样吧 鬼知道代表啥阿，所以我这里写了个枚举来表达 更直观一些

    public enum BadgeType {        CENTER(0), LEFTTOP(1), LEFTVERTICAL(2), LEFTBOTTOM(3), RIGHTTOP(4), RIGHTVERTICAL(                5), RIGHTBOTTOM(6), TOPHORIZATAL(7), BOTTOMHORIZATAL(8);                private final int value;                BadgeType(int value) {            this.value = value;        }                public int getValue() {            return value;        }    }

没啥难点  枚举的赋值 百度一下成吨

效果图 

源码传送门