防微信聊天气泡图片实现

来源：互联网发布：pycharm tensorflow 编辑：程序博客网时间：2024/05/01 02:28

先看下效果图
这里写图片描述
防微信实现如图的图片显示效果。

接上篇博客介绍的图形图片的实现，这里通过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>

0 0