实现仿微信聊天时发送图片的形状(NinePatch+PorterDuffXfermode)

微信聊天时,发送的图片是完全填充气泡的,没有边框,只有气泡的轮廓,今天我们项目里也想使用这种呈现方式,于是花了点时间研究了下.布局文件.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:maskimage="http://schemas.android.com/apk/res/com.xzw.mask"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="以下为正常图片" />
    <!-- 无遮罩图片 -->

    <ImageView
        android:id="@+id/imageview1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/icon_t" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="以下为遮罩图片变成圆形的图片" />

    <!-- 有遮罩图片 -->

    <com.xzw.mask.widget.MaskImage
        android:id="@+id/imageview_id"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        maskimage:image="@drawable/hanneng_top"
        maskimage:mask="@drawable/sixin_right_back" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="尝试一" />
    <!-- 无遮罩图片 -->

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/sixin_right_back"
        android:src="@drawable/hanneng_top" />

</LinearLayout>

attrs.xml文件

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="MaskImage">
        <!-- Identifier for the image that represents the Imageview's content. -->
        <attr name="image" format="reference" />
        <!-- crop Imageview's content same as mask -->
        <attr name="mask" format="reference" />
 
    </declare-styleable>
</resources>

自定义view MaskImage.java

public class MaskImage extends ImageView {
        int mImageSource = 0;
        int mMaskSource = 0;
        RuntimeException mException;

        public MaskImage(Context context, AttributeSet attrs) {
                super(context, attrs);
                TypedArray a = getContext().obtainStyledAttributes(attrs,
                                R.styleable.MaskImage, 0, 0);
                mImageSource = a.getResourceId(R.styleable.MaskImage_image, 0);
                mMaskSource = a.getResourceId(R.styleable.MaskImage_mask, 0);

                if (mImageSource == 0 || mMaskSource == 0) {
                        mException = new IllegalArgumentException(
                                        a.getPositionDescription()
                                                        + ": The content attribute is required and must refer to a valid image.");
                }

                a.recycle();
                if (mException != null)
                        throw mException;
                /**
                 * 主要代码实现
                 */
                // 获取图片的资源文件
                Bitmap original = BitmapFactory.decodeResource(getResources(),
                                mImageSource);
                // 获取遮罩层图片
                Bitmap mask = BitmapFactory.decodeResource(getResources(), mMaskSource);
                // 将遮罩层的图片放到画布中
                Bitmap result = Bitmap.createBitmap(original.getWidth(),
                                original.getHeight(), Config.ARGB_8888);
                Canvas mCanvas = new Canvas(result);
                Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
                paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
                NinePatch np = new NinePatch(mask, mask.getNinePatchChunk(), null);
                Rect rect = new Rect(0, 0, original.getWidth(), original.getHeight());
                np.draw(mCanvas, rect, null);
                mCanvas.drawBitmap(original, 0, 0, paint);
                setImageBitmap(result);
                setScaleType(ScaleType.CENTER);
                paint.setXfermode(null);
        }
}

气泡图是个.9的图.
 

只是简单实现而已,还有很多问题,内存占用很大.还需要优化图片尺寸和质量.

参考链接: http://blog.isming.me/2014/09/19/draw-circle-image-in-android/

原文链接：http://www.eoeandroid.com/thread-569127-1-1.html

P.S 为了方便大家，我弄好了一个demo，源码下载：

http://pan.baidu.com/s/1qWMLAFE