android 图片圆角 遮罩_[AndroidUI]自定义view(四)：实现圆形圆角图片

参考链接：

http://blog.csdn.net/lmj623565791/article/details/42094215

http://blog.csdn.net/to_be_designer/article/details/48530921

Xfermodes：

通过API我们可以查询到Xfermode包含三个子类：

AvoidXfermode：指定了一个颜色和容差，强制Paint避免在它上面绘图(或者只在它上面绘图)。  PixelXorXfermode： 当覆盖已有的颜色时，应用一个简单的像素异或操作。  PorterDuffXfermode： 这是一个非常强大的转换模式，使用它，可以使用图像合成的16条Porter-Duff规则的任意一条来控制Paint如何与已有的Canvas图像进行交互。

PorterDuffXfermode：

现在再来介绍下16种模式：

1.PorterDuff.Mode.CLEAR  所绘制不会提交到画布上，也就是不显示内容。

2.PorterDuff.Mode.SRC  显示绘制图片的上层图片。

3.PorterDuff.Mode.DST  显示绘制图片下层图片。

4.PorterDuff.Mode.SRC_OVER  正常绘制显示，上下层绘制叠盖。

5.PorterDuff.Mode.DST_OVER  上下层都显示，下层居上显示。

6.PorterDuff.Mode.SRC_IN  取两层绘制交集。显示上层。

7.PorterDuff.Mode.DST_IN  取两层绘制交集。显示下层。

8.PorterDuff.Mode.SRC_OUT  取上层绘制非交集部分。

9.PorterDuff.Mode.DST_OUT  取下层绘制非交集部分。

10.PorterDuff.Mode.SRC_ATOP  取下层非交集部分与上层交集部分。

11.PorterDuff.Mode.DST_ATOP

取上层非交集部分与下层交集部分。  12.PorterDuff.Mode.XOR  异或：去除两图层交集部分。

13.PorterDuff.Mode.DARKEN  取两图层全部区域，交集部分颜色加深。

14.PorterDuff.Mode.LIGHTEN  取两图层全部，点亮交集部分颜色。

15.PorterDuff.Mode.MULTIPLY  取两图层交集部分叠加后颜色。

16.PorterDuff.Mode.SCREEN  取两图层全部区域，交集部分变为透明色。

1.attrs.xml

2.

xmlns:custom="http://schemas.android.com/apk/res/com.example.testview4"

android:layout_width="match_parent"

android:layout_height="wrap_content" >

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical" >

android:layout_width="130dp"

android:layout_height="130dp"

android:layout_margin="10dp"

android:src="@drawable/ts" >

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_margin="10dp"

android:src="@drawable/ts"

custom:borderRadius="30dp"

custom:type="round" >

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_margin="10dp"

android:src="@drawable/ts"

custom:type="circle" >

android:layout_width="40dp"

android:layout_height="40dp"

android:layout_margin="10dp"

android:src="@drawable/ts"

custom:type="circle" >

3.

package com.example.testview4;

import java.lang.ref.WeakReference;

import android.annotation.SuppressLint;

import android.content.Context;

import android.content.res.TypedArray;

import android.graphics.Bitmap;

import android.graphics.Bitmap.Config;

import android.graphics.BitmapShader;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Matrix;

import android.graphics.Paint;

import android.graphics.Path;

import android.graphics.PorterDuff.Mode;

import android.graphics.PorterDuffXfermode;

import android.graphics.RectF;

import android.graphics.Xfermode;

import android.graphics.drawable.Drawable;

import android.util.AttributeSet;

import android.util.Log;

import android.util.TypedValue;

import android.widget.ImageView;

public class RoundImageViewByXfermode extends ImageView {

private float borderRadius;//圆角的大小

private int type;//图片的类型，圆形or圆角

public static final int TYPE_CIRCLE = 0;//圆形

public static final int TYPE_ROUND = 1;//圆角

private Paint paint;

private Xfermode xfermode;

private WeakReference weakReference;//缓存最终的Bitmap

public RoundImageViewByXfermode(Context context, AttributeSet attrs)

{

super(context, attrs);

TypedArray typedArray = context.obtainStyledAttributes(attrs,

R.styleable.RoundImageViewByXfermode);

borderRadius = typedArray.getDimension(R.styleable.

RoundImageViewByXfermode_borderRadius, 0);

type = typedArray.getInt(R.styleable.

RoundImageViewByXfermode_type, TYPE_CIRCLE);

paint = new Paint();

paint.setAntiAlias(true);//消除锯齿

xfermode = new PorterDuffXfermode(Mode.DST_IN);

typedArray.recycle();

}

@Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)

{

super.onMeasure(widthMeasureSpec, heightMeasureSpec);

//如果类型是圆形，则强制改变view的宽高一致，以小值为准

if (type == TYPE_CIRCLE)

{

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

setMeasuredDimension(min, min);

}

}

@Override

protected void onDraw(Canvas canvas)

{

//在缓存中取出bitmap

Bitmap bitmap = weakReference == null ? null : weakReference.get();

if(bitmap == null || bitmap.isRecycled())

{

Drawable drawable = getDrawable();

int dWidth = drawable.getIntrinsicWidth();

int dHeight = drawable.getIntrinsicHeight();

float scale = Math.max(getWidth() * 1.0f / dWidth, getHeight() * 1.0f / dHeight);

drawable.setBounds(0, 0, (int)(scale * dWidth), (int)(scale * dHeight));

bitmap = Bitmap.createBitmap(getWidth(), getHeight(), Config.ARGB_8888);

//canvas转为bitmap

//然后在drawCanvas上的操作也都会在bitmap上进行记录

Canvas drawCanvas = new Canvas(bitmap);

//将drawable绘制在drawCanvas上

drawable.draw(drawCanvas);

Bitmap maskBitmap = getMaskBitmap();

paint.setXfermode(xfermode);

drawCanvas.drawBitmap(maskBitmap, 0,0, paint);

canvas.drawBitmap(bitmap, 0, 0, null);

weakReference = new WeakReference(bitmap);

}

else

{

paint.setXfermode(null);

canvas.drawBitmap(bitmap, 0.0f, 0.0f, paint);

return;

}

}

public Bitmap getMaskBitmap()

{

Bitmap bitmap = Bitmap.createBitmap(getWidth(), getHeight(),

Bitmap.Config.ARGB_8888);

Canvas canvas = new Canvas(bitmap);

Paint paint = new Paint();

if (type == TYPE_ROUND)

{

canvas.drawRoundRect(new RectF(0, 0, getWidth(), getHeight()),

borderRadius, borderRadius, paint);

} else

{

canvas.drawCircle(getWidth() / 2, getWidth() / 2, getWidth() / 2,

paint);

}

return bitmap;

}

//主要是因为我们缓存了，当调用invalidate时，将缓存清除

@Override

public void invalidate() {

weakReference = null;

super.invalidate();

}

}

要说明的地方：

1.如果想使用圆形遮罩，那么必须强制view的大小为正方形，因为如果view的大小不为正方形(如长方形)，那么就不能完整地显示出圆形遮罩。并且，强制大小要以小值为准。

2.缩放策略。假如有一个view，宽高是100X100，要显示一张宽高是50X25的图片，那图片该如何缩放呢？

a.首先要确定的是，图片缩放后一定要铺满整个view，否则view有些地方就是空白的，也就是缩放后图片的大小必然大于等于view的大小。

b.图片缩放最好要保持宽高比，否则就会出现图片变形，也就是宽高要乘以同一个缩放系数。

c.如何确定缩放系数呢？如果先拉伸宽，那么缩放系数就为2，此时图片的高度为50，显然是不对的。而如果先拉伸高，那么缩放系数就为4，此时图片的宽度为200，此时就对了。那么就不难推出：float scale = Math.max(getWidth() * 1.0f / dWidth, getHeight() * 1.0f / dHeight);

3.绘制图片是比较耗时耗性能的操作，所以要缓存最终处理后的图片。这里使用的是WeakReference进行缓存，所以要Bitmap.createBitmap新建一张位图。一开始打算把图片，遮罩都绘制在一张位图上，但是发现这样是不行的，PorterDuffXfermode并没有起到作用，只有把图片放在一张位图，遮罩放在另一张位图，这样PorterDuffXfermode才会起作用。

效果图：