實現仿照微信聊天氣泡裏顯示圖片效果的自定義View

第一部分是自定義的氣泡效果的View，代碼以下

public class BitmapShapeView extends View {
    private Paint mPaint;
    private Path mPath;//包裹圖片的那個不規則氣泡給須要本身用Path實現
    private BitmapShader mBitmapShader;//填充起泡的渲染器
    private Bitmap mBitmap;

    private int mDefaultMinWidth = Constant.CHAT_MSG_IMG_DEFAULT_MIN_WIDTH;
    private int mDefaultMinHeight = Constant.CHAT_MSG_IMG_DEFAULT_MIN_HEIGHT;
    private int mBubbleRadius = 16;
    private int mTriangleSize = 16;
    private int mDirection = 2;

    public BitmapShapeView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mBitmap = BitmapUtils.resetBitmap(BitmapFactory.decodeResource(getResources(), R.drawable.logo_gray), mDefaultMinWidth, mDefaultMinHeight);
        mBitmapShader = new BitmapShader(mBitmap, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT);
        mPaint = new Paint();
        mPath = new Path();

        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.BubbleImageView);
        mBubbleRadius = array.getDimensionPixelSize(R.styleable.BubbleImageView_bubbleRadius, 16);
        mTriangleSize = array.getDimensionPixelSize(R.styleable.BubbleImageView_bubbleTriangleSize, 16);
        mDirection = array.getInt(R.styleable.BubbleImageView_bubbleDirection, 2);
        mDefaultMinWidth = array.getDimensionPixelSize(R.styleable.BubbleImageView_bubbleDefaultMinWidth, Constant.CHAT_MSG_IMG_DEFAULT_MIN_WIDTH);
        mDefaultMinHeight = array.getDimensionPixelSize(R.styleable.BubbleImageView_bubbleDefaultMinHeight, Constant.CHAT_MSG_IMG_DEFAULT_MIN_HEIGHT);
    }

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

        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setShader(mBitmapShader);
        canvas.drawPath(mPath, mPaint);

        mPaint.reset();
        canvas.restore();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        if (mBitmap != null) {
            setMeasuredDimension(mBitmap.getWidth(), mBitmap.getHeight());
            mPath.reset();
            int width = getMeasuredWidth();
            int height = getMeasuredHeight();
            //畫三角
            if (mDirection == 1) {//左三角
                mPath.moveTo(mTriangleSize, height / 3 + mTriangleSize / 2);
                mPath.lineTo(0, height / 3);
                mPath.lineTo(mTriangleSize, height / 3 - mTriangleSize / 2);
                mPath.arcTo(new RectF(mTriangleSize, 0, mTriangleSize + mBubbleRadius * 2, mBubbleRadius * 2), 180, 90);//起始位置的角度值,旋轉的角度值
                mPath.lineTo(width - mBubbleRadius, 0);
                mPath.arcTo(new RectF(width - mBubbleRadius * 2, 0, width, mBubbleRadius * 2), -90, 90);
                mPath.lineTo(width, height - mBubbleRadius);
                mPath.arcTo(new RectF(width - 2 * mBubbleRadius, height - mBubbleRadius * 2, width, height), 0, 90);
                mPath.lineTo(mTriangleSize + mBubbleRadius, height);
                mPath.arcTo(new RectF(mTriangleSize, height - mBubbleRadius * 2, mTriangleSize + mBubbleRadius * 2, height), 90, 90);
                mPath.close();
            } else if (mDirection == 2) {//右三角
                mPath.moveTo(0, mBubbleRadius);
                mPath.arcTo(new RectF(0, 0, mBubbleRadius * 2, mBubbleRadius * 2), 180, 90);//起始位置的角度值,旋轉的角度值
                mPath.lineTo(width - mBubbleRadius + mTriangleSize, 0);
                mPath.arcTo(new RectF(width - mBubbleRadius * 2 - mTriangleSize, 0, width - mTriangleSize, mBubbleRadius * 2), -90, 90);
                mPath.lineTo(width - mTriangleSize, height / 3 - mTriangleSize / 2);
                mPath.lineTo(width, height / 3);
//                mPath.lineTo(width-1,height/3-1);
//                mPath.arcTo(new RectF(width-4,height/3-4, width, height/3+4), -90, 180);
                mPath.lineTo(width - mTriangleSize, height / 3 + mTriangleSize / 2);
                mPath.lineTo(width - mTriangleSize, height - mBubbleRadius);
                mPath.arcTo(new RectF(width - 2 * mBubbleRadius - mTriangleSize, height - mBubbleRadius * 2, width - mTriangleSize, height), 0, 90);
                mPath.lineTo(mBubbleRadius, height);
                mPath.arcTo(new RectF(0, height - mBubbleRadius * 2, mBubbleRadius * 2, height), 90, 90);
                mPath.close();
            }
        }
    }

    public void setImageSrc(String path) {
        mBitmap = BitmapUtils.resetBitmap(BitmapFactory.decodeFile(path), mDefaultMinWidth, mDefaultMinHeight);
        mBitmapShader = new BitmapShader(mBitmap, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT);
        requestLayout();
        invalidate();
    }

    public void setImageSrc(int resId) {
        mBitmap = BitmapUtils.resetBitmap(BitmapFactory.decodeResource(getResources(), resId), mDefaultMinWidth, mDefaultMinHeight);
        mBitmapShader = new BitmapShader(mBitmap, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT);
        requestLayout();
        invalidate();
    }

    public void setImageBitmap(Bitmap bitmap) {
        mBitmap = BitmapUtils.resetBitmap(bitmap, mDefaultMinWidth, mDefaultMinHeight);
        mBitmapShader = new BitmapShader(mBitmap, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT);
        requestLayout();//必定得加上這方法，不然當加載不一樣的View時，View方法的onMeasure不會從新調用
        invalidate();
    }
}

第二部分是屬性值部分，設置氣泡的圓角，氣泡三角的大小，圖片顯示最小的寬高值，代碼以下：

 <declare-styleable name="BubbleImageView">
        <attr name="bubbleRadius" format="dimension"/>
        <attr name="bubbleTriangleSize" format="dimension"/>
        <attr name="bubbleDirection" format="integer"/>
        <attr name="bubbleDefaultMinWidth" format="dimension"/>
        <attr name="bubbleDefaultMinHeight" format="dimension"/>
    </declare-styleable>

最後只要在你的layout文件裏使用這自定義的View就能顯示氣泡圖片了。初次寫，代碼不完善的地方但願同窗們能不吝賜教啊，O(∩_∩)O