Android遮罩实现图片不规则的显示

我们在开发的过程中，经常遇到要对图片进行各种图形的变换，然而自己手动画图的话会显得格外的麻烦，所以我们想到了一个实现简单，容易理解的方法:

对图片进行遮罩，然后将重合的部分进行底部的显示或者顶部的显示等来进行我们的图片的修改。

拿我自己的例子来说一下吧，我这边是准备弄一个圆角的六边形的图片，网上也有很多是自己手动画的。下面我们说说遮罩的方法来实现：

代码：

首先是我们自定义的遮罩的方法，MaskImage.java：

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.util.AttributeSet;
import android.widget.ImageView;

/**
* Created by Administrator on 2016/7/21 0021.
*/
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.");
}

if (mException != null)
throw mException;
/**
* 主要代码实现
*/
//获取图片的资源文件
Bitmap original = BitmapFactory.decodeResource(getResources(), mImageSource);
//获取遮罩层图片
Bitmap mask = BitmapFactory.decodeResource(getResources(), mMaskSource);
Bitmap result = Bitmap.createBitmap(mask.getWidth(), mask.getHeight(), Config.ARGB_8888);
//将遮罩层的图片放到画布中
Canvas mCanvas = new Canvas(result);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));//叠加重复的部分，显示下面的
mCanvas.drawBitmap(original, 0, 0, null);
mCanvas.drawBitmap(mask, 0, 0, paint);
paint.setXfermode(null);
setImageBitmap(result);
setScaleType(ScaleType.CENTER);
a.recycle();
}
}

然后，我们在需要遮罩的地方，进行引用。也就是我们的布局文件中。如下：

<com.kegoal.view.MaskImage
android:id="@+id/img_head_six"
android:layout_width="90dp"
android:layout_height="97dp"
android:layout_marginLeft="54dp"
android:layout_marginTop="90dp"
MaskImage:image="@mipmap/splash"
MaskImage:mask="@mipmap/head_six" />

然后就是图片的放置，MaskImage中放置我们的底部图片，mask属性是我们的遮罩图片。然后我们前面的方法中也已经声明了，两张图片进行遮盖，显示重叠部分的下面的那张图片。

而我们的遮罩的图片是：



所以实现后的效果就是将我们的图片放置在了一个六边形中。大家可以参考下。至于后期可能还会进行对此文的完善更改，添加一些如何与后台方面的交互更换图片等。