PorterDuffXfermode自定义View实现圆角图片

今天使用PorterDuffXfermode自定义View实现圆角图片

package com.example.bitmap_porterduffxfermode;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;
/**
* 自定义View实现圆角图片效果
* @author Administrator
*
*/

public class RoundRectXfermodeView extends View {

private Bitmap mBitmap;
private Bitmap mOut;
private Paint mPaint;

public RoundRectXfermodeView(Context context) {
super(context);
initView();
}

public RoundRectXfermodeView(Context context, AttributeSet attrs) {
super(context, attrs);
initView();
}

public RoundRectXfermodeView(Context context, AttributeSet attrs,
int defStyleAttr) {
super(context, attrs, defStyleAttr);
initView();
}

public void initView() {
mBitmap = BitmapFactory.decodeResource(getResources(),
R.drawable.xiaoyu1);
mOut = Bitmap.createBitmap(mBitmap.getWidth(),
mBitmap.getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(mOut);
mPaint = new Paint();
mPaint.setAntiAlias(true);
RectF mRectF = new RectF(0, 0, mBitmap.getWidth(), mBitmap.getHeight());
canvas.drawRoundRect(mRectF,80,80,mPaint);
mPaint.setXfermode(new PorterDuffXfermode(
PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(mBitmap, 0, 0, mPaint);
}

@Override
protected void onDraw(Canvas canvas) {
canvas.drawBitmap(mOut, 0, 0, null);
}
}

然后在布局文件中引用自定义View就行了

<com.example.bitmap_porterduffxfermode.RoundRectXfermodeView
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</com.example.bitmap_porterduffxfermode.RoundRectXfermodeView>

但是我发现这中方法实现的圆角图片有局限性：在布局文件中引用时宽高必须设置为wrap_content

具体原因还是看一下原理吧：

它是把一张图片信息解析为Bitmap然后在再绘制出来，图像的大小不能改变，实现思想是：先用普通画笔画一个Mask遮罩层，再用带PorterDuffXfermode的画笔将图像画在遮罩层上

然后我就想了一些解决方法：

测量一下View的高度，根据测量的高度设置遮罩层的大小，情况是这样，如果设置的遮罩层的大小小于要绘制的图像大小，图像只会显示一部分，如果大于绘制图像大小，显示效果可能只有左上角是圆角。

弄清原理就明白了.

到底如何才能实现缩放图像大小呢？

这个现在我还在研究，希望大神指点一二

百度了一下，找到了解决方案可以实现缩放图像大小：

自定义属性,在values文件夹下创建属性文件attr.xml【其实就是自定义View实现的】

<?xml version="1.0" encoding="utf-8"?>
<resources>

<attr name="borderRadius" format="dimension" />
<attr name="type">
<enum name="circle" value="0" />
<enum name="round" value="1" />
</attr>
<attr name="src" format="reference"></attr>

<declare-styleable name="CustomImageView">
<attr name="borderRadius" />
<attr name="type" />
<attr name="src" />
</declare-styleable>

</resources>

package com.example.customview05imageview.view;

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.graphics.RectF;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;

import com.example.customview05imageview.R;

/**
* 自定义View，实现圆角，圆形等效果
*
* @author zhy
*
*/
public class CustomImageView extends View
{

/**
* TYPE_CIRCLE / TYPE_ROUND
*/
private int type;
private static final int TYPE_CIRCLE = 0;
private static final int TYPE_ROUND = 1;

/**
* 图片
*/
private Bitmap mSrc;

/**
* 圆角的大小
*/
private int mRadius;

/**
* 控件的宽度
*/
private int mWidth;
/**
* 控件的高度
*/
private int mHeight;

public CustomImageView(Context context, AttributeSet attrs)
{
this(context, attrs, 0);
}

public CustomImageView(Context context)
{
this(context, null);
}

/**
* 初始化一些自定义的参数
*
* @param context
* @param attrs
* @param defStyle
*/
public CustomImageView(Context context, AttributeSet attrs, int defStyle)
{
super(context, attrs, defStyle);

TypedArray a = context.getTheme().obtainStyledAttributes(attrs,
R.styleable.CustomImageView, defStyle, 0);

int n = a.getIndexCount();
for (int i = 0; i < n; i++)
{
int attr = a.getIndex(i);
switch (attr)
{
case R.styleable.CustomImageView_src:
mSrc = BitmapFactory.decodeResource(getResources(),
a.getResourceId(attr, 0));
break;
case R.styleable.CustomImageView_type:
type = a.getInt(attr, 0);// 默认为Circle
break;
case R.styleable.CustomImageView_borderRadius:
mRadius = a.getDimensionPixelSize(attr, (int) TypedValue
.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 10f,
getResources().getDisplayMetrics()));// 默认为10DP
break;
}
}
a.recycle();
}

/**
* 计算控件的高度和宽度
*/
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
{
// super.onMeasure(widthMeasureSpec, heightMeasureSpec);
/**
* 设置宽度
*/
int specMode = MeasureSpec.getMode(widthMeasureSpec);
int specSize = MeasureSpec.getSize(widthMeasureSpec);

if (specMode == MeasureSpec.EXACTLY)// match_parent , accurate
{
mWidth = specSize;
} else
{
// 由图片决定的宽
int desireByImg = getPaddingLeft() + getPaddingRight()
+ mSrc.getWidth();
if (specMode == MeasureSpec.AT_MOST)// wrap_content
{
mWidth = Math.min(desireByImg, specSize);
} else

mWidth = desireByImg;
}

/***
* 设置高度
*/

specMode = MeasureSpec.getMode(heightMeasureSpec);
specSize = MeasureSpec.getSize(heightMeasureSpec);
if (specMode == MeasureSpec.EXACTLY)// match_parent , accurate
{
mHeight = specSize;
} else
{
int desire = getPaddingTop() + getPaddingBottom()
+ mSrc.getHeight();

if (specMode == MeasureSpec.AT_MOST)// wrap_content
{
mHeight = Math.min(desire, specSize);
} else
mHeight = desire;
}

setMeasuredDimension(mWidth, mHeight);

}

/**
* 绘制
*/
@Override
protected void onDraw(Canvas canvas)
{
switch (type)
{
// 如果是TYPE_CIRCLE绘制圆形
case TYPE_CIRCLE:
int min = Math.min(mWidth, mHeight);
/**
* 长度如果不一致，按小的值进行压缩
*/
mSrc = Bitmap.createScaledBitmap(mSrc, min, min, false);
canvas.drawBitmap(createCircleImage(mSrc, min), 0, 0, null);
break;
case TYPE_ROUND:
canvas.drawBitmap(createRoundConerImage(mSrc), 0, 0, null);
break;

}

}

/**
* 根据原图和变长绘制圆形图片
*
* @param source
* @param min
* @return
*/
private Bitmap createCircleImage(Bitmap source, int min)
{
final Paint paint = new Paint();
paint.setAntiAlias(true);
Bitmap target = Bitmap.createBitmap(min, min, Config.ARGB_8888);
/**
* 产生一个同样大小的画布
*/
Canvas canvas = new Canvas(target);
/**
* 首先绘制圆形
*/
canvas.drawCircle(min / 2, min / 2, min / 2, paint);
/**
* 使用SRC_IN，参考上面的说明
*/
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
/**
* 绘制图片
*/
canvas.drawBitmap(source, 0, 0, paint);
return target;
}

/**
* 根据原图添加圆角
*
* @param source
* @return
*/
private Bitmap createRoundConerImage(Bitmap source)
{
final Paint paint = new Paint();
paint.setAntiAlias(true);
Bitmap target = Bitmap.createBitmap(mWidth, mHeight, Config.ARGB_8888);
Canvas canvas = new Canvas(target);
RectF rect = new RectF(0, 0, source.getWidth(), source.getHeight());
canvas.drawRoundRect(rect, mRadius, mRadius, paint);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(source, 0, 0, paint);
return target;
}
}

然后在布局文件中引用就行了

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:zhy="http://schemas.android.com/apk/res/com.example.customview05imageview"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >

<ImageView
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_margin="10dp"
android:src="@drawable/zhongyu" />

<com.example.customview05imageview.view.CustomImageView
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_gravity="center_horizontal"
android:layout_margin="10dp"
zhy:src="@drawable/zhongyu"
zhy:type="circle" />

<com.example.customview05imageview.view.CustomImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
zhy:borderRadius="10dp"
zhy:src="@drawable/icon"
zhy:type="round" />

<com.example.customview05imageview.view.CustomImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
zhy:borderRadius="20dp"
zhy:src="@drawable/icon"
zhy:type="round" />
</LinearLayout>

</ScrollView>感谢大神http://blog.csdn.net/lmj623565791/article/details/24555655