[Android][在TextView右上角画气泡]

1.落笔缘由

虽然有很多关于气泡的控件，但是有些时候并不能满足需求，还是需要自己画，这里只是将气泡显示出来，并不支持气泡拖曳，气泡拖曳需要将气泡定为一个view。这样才能获取点击事件，这里就不说这些，只是简单的画气泡。

气泡效果图

看起来有点肉酸，不要在于这些细节，毕竟只是想记录一下当时画图的想法而已。

2.实现图解

画图分析图解

3.代码实现

package com.lgy.test;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.util.AttributeSet;
import android.widget.TextView;

public class LTabTextView extends TextView {

    // 宽高
    private int mWidth, mHeight;
    private float _density = 1;
    // 文本画笔
    private Paint tPaint = null;
    // 字体颜色
    private int textColor = Color.RED;
    // 字体大小
    private float textSize = 8f;
    // 画笔宽度
    private int strokeWidth = 2;

    private float mPointX = 0;
    private float mPointY = 0;
    private float mPointTextWidth = 0;
    private float mPointTextHeight = 0;
    private CharSequence mPointText = null;
    private float circleY = 0;
    private float circleX = 0;
    private Paint circlePaint = null;
    // 圆圈颜色
    private int circleColor = Color.RED;
    // 圆圈画笔宽度
    private int circlestrokeWidth = 2;
    //数字在x轴的位移
    private float offsetX = 0;
    //数字在y轴的位移
    private float offsetY = 0;
    //数字的最大宽度
    private float maxWidth = 0;

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

    public LTabTextView(Context context, AttributeSet attrs,
            int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context);
    }

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

    private void init(Context context) {
        _density = context.getResources().getDisplayMetrics().density;
        tPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        tPaint.setColor(textColor);
        tPaint.setStrokeWidth(strokeWidth);
        tPaint.setTextSize(textSize * _density);
        tPaint.setStyle(Style.FILL);
        
        circlePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        circlePaint.setColor(circleColor);
        circlePaint.setStrokeWidth(circlestrokeWidth);
        circlePaint.setStyle(Style.STROKE);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mWidth = w;
        mHeight = h;
        if (this.getText() != null) {
            if (mPointText!=null&&!mPointText.equals("")) {
                //计算出数字的可能的最大宽度，这里默认最大能显示数字是99，对于99用99+表示
                maxWidth = tPaint.measureText("99+");
                //当前数字的真正宽度
                mPointTextWidth = tPaint.measureText(String.valueOf(mPointText));
                //计算的是数字的x坐标
                //因为已经限定数字的最大宽度是"99+"字符串的宽度
//              mWidth-maxWidth/2就是圆心的位置，
//              如果我们要将数字画在园的中心，就要
//              获取当前数字的宽度的一半
//              mWidth-maxWidth/2-mPointTextWidth/2，
//              然后再减去自己设置的x轴位移量
                mPointX = mWidth-maxWidth/2-mPointTextWidth/2-offsetX;
                Paint.FontMetrics metrics = tPaint.getFontMetrics();
                //因为数字的外面要包一个圆，所以为了让圆能显示完全，就让数字的高也和宽相等，减去位移量，获取数字的高度
                float textH = maxWidth+offsetY;     
                //如果看过http://www.jianshu.com/p/a3d15421a718我这篇文章，应该知道这是获取baseline，
                //获取到这个位置就能将文字在指定位置的y轴中心显示
                mPointTextHeight = (textH-(metrics.descent-metrics.ascent))/2-metrics.ascent;
                //为了能让圆圈显示完整，所以+1*_density
                mPointY = mPointTextHeight+1*_density;
                //圆的x轴
                circleX = mWidth-(maxWidth)/2-offsetX;
                //圆的y轴
                circleY = textH/2+1*_density;
            }
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (mPointText!=null&&!mPointText.equals("")) {
            canvas.drawCircle(circleX, circleY, maxWidth/2+1*_density, circlePaint);
            if (Integer.parseInt(mPointText.toString())>99) {
                canvas.drawText("99+", mPointX, mPointY, tPaint);
            }else
                canvas.drawText(mPointText.toString(), mPointX, mPointY, tPaint);
        }

    }

    public void setmPointText(CharSequence mPointText) {
        this.mPointText = mPointText;
                invalidate();
    }

    public float getOffsetX() {
        return offsetX;
    }

    public void setOffsetX(float offsetX) {
        this.offsetX = offsetX;
    }

    public float getOffsetY() {
        return offsetY;
    }

    public void setOffsetY(float offsetY) {
        this.offsetY = offsetY;
    }
}

4.源码地址

http://download.csdn.net/detail/lgywsdy/9777781