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