防微信聊天气泡图片实现

先看下效果图

防微信实现如图的 图片显示效果。

接上篇博客介绍的图形图片的实现 ， 这里通过BitmapSharder来实现这个效果。 主要麻烦的地方就是画出气泡形状的path.

这里设置自定义的属性，方便设置 图片气泡方向与边框颜色， attrs文件如下

<resources>
    <declare-styleable name="ChatImageView">
        <attr name="orientation">
            <enum name="left" value="0"></enum>
            <enum name="right" value="1"></enum>
        </attr>
        <attr name="borderColor" format="color" />
    </declare-styleable>
</resources>

自定义ImageView代码如下

public class ChatImageView extends ImageView {
    private Bitmap srcBitmap;
    private Paint paint;
    private BitmapShader mBitmapShader;
    private Matrix mMatrix;
    private int width;
    private int height;
    private Paint borderPaint; //边框的画笔

    private int mOrientation; //方向
    private int mborderColor; //边框颜色

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


    public ChatImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        //获取自定义属性值
        TypedArray ta = getContext().obtainStyledAttributes(attrs, R.styleable.ChatImageView);
        mOrientation = ta.getInt(R.styleable.ChatImageView_orientation, 0);
        mborderColor = ta.getColor(R.styleable.ChatImageView_borderColor, Color.GRAY);
        ta.recycle();

        init();
    }

    public ChatImageView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        init();
    }


    private void init() {

        paint = new Paint();
        paint.setAntiAlias(true);

        borderPaint = new Paint();
        borderPaint.setColor(mborderColor);
        borderPaint.setAntiAlias(true);
        borderPaint.setStyle(Paint.Style.STROKE);
        borderPaint.setStrokeWidth(1);

        srcBitmap = ((BitmapDrawable) getDrawable()).getBitmap();
        mBitmapShader = new BitmapShader(srcBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
        mMatrix = new Matrix();
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);

        if (getWidth() > 0 && getHeight() > 0) {
            width = getWidth();
            height = getHeight();

            int mWidth = Math.min(getMeasuredWidth(), getMeasuredHeight());

            //设置缩放
            int bSize = Math.min(srcBitmap.getWidth(), srcBitmap.getHeight());
            float scale = mWidth * 1.0f / bSize;
            mMatrix.setScale(scale, scale);
            mBitmapShader.setLocalMatrix(mMatrix);

        }
    }

    @Override
    protected void onDraw(Canvas canvas) {


        paint.setShader(mBitmapShader);

        Path path = null;
        if (mOrientation == 0) {
            path = getLeftPath();
        } else {
            path = getRightPath();
        }
        canvas.drawPath(path, paint);
        //画边框
        canvas.drawPath(path, borderPaint);
    }


    /**
     * 画出左朝向的path
     *
     * @return
     */
    private Path getLeftPath() {
        Path path = new Path();

        path.moveTo(40, 0);
        path.lineTo(width - 20, 0);
        RectF oval = new RectF(width - 40, 0, width, 40);
        path.arcTo(oval, 270, 90, false); //false表示不闭口

        path.lineTo(width, height - 20);

        oval = new RectF(width - 40, height - 40, width, height);
        path.arcTo(oval, 0, 90, false);

        path.lineTo(40, height);
        oval = new RectF(20, height - 40, 60, height);
        path.arcTo(oval, 90, 90, false);

        path.lineTo(20, 60);
        path.lineTo(0, 20);
        path.lineTo(20, 20);
        oval = new RectF(20, 0, 60, 40);
        path.arcTo(oval, 180, 90, false);
        path.close();//封闭
        return path;
    }


    /**
     * 画出右朝向的path
     *
     * @return
     */
    private Path getRightPath() {
        Path path = new Path();

        path.moveTo(20, 0);
        path.lineTo(width - 40, 0);
        RectF oval = new RectF(width - 60, 0, width - 20, 40);
        path.arcTo(oval, 270, 90, false);

        path.lineTo(width, 20);
        path.lineTo(width - 20, 60);
        path.lineTo(width - 20, height - 20);

        oval = new RectF(width - 60, height - 40, width - 20, height);
        path.arcTo(oval, 0, 90, false);

        path.lineTo(20, height);
        oval = new RectF(0, height - 40, 40, height);
        path.arcTo(oval, 90, 90, false);

        path.lineTo(0, 20);
        oval = new RectF(0, 0, 40, 40);
        path.arcTo(oval, 180, 90, false);
        path.close();//封闭
        return path;
    }
}

再看看布局文件对自定义属性的使用，要指定 名称为

“http://schemas.android.com/apk/res-auto”的名称空间
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:civ="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <wei.jiang.selfview.imageview.ChatImageView
        android:layout_width="200dp"
        android:layout_height="100dp"
        android:layout_centerInParent="true"
        android:src="@drawable/pic2"
        civ:borderColor="@color/colorPrimaryDark"
        civ:orientation="left" />

</RelativeLayout>