android自定义圆形图像

这篇博客给大家带来使用xfermode实现圆形图像。先看效果：

这里说下原理，先看下图：

这里src和dst分别表示不同的bitmap，上面的图片有16种类型，分别表示不同情况下的交集，这里我们需要使用的是两个交集部分，试想一下，我们先绘制一个圆，然后绘制一个图片，此时如果圆的大小小于图片的大小，那么图片的交集就是该圆形了，此时使用SrcIn或者DstIn这两种模式就可以过滤出需要的图形了，其实SrcIn或者DstIn是没有什么区别的，无非就是图像先绘制而已。好了，下面看具体的实现：

自定义属性

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

    <attr name="circle_image_radius" format="dimension" />
    <attr name="round_image_radius" format="dimension" />
    <attr name="border_width" format="dimension"/>
    <attr name="is_border" format="boolean"/>
    <attr name="imagetype">
        <enum name="circle" value="0" />
        <enum name="round" value="1" />
    </attr>

    <declare-styleable name="selfimage">
        <attr name="circle_image_radius" />
        <attr name="round_image_radius" />
        <attr name="border_width"/>
        <attr name="is_border"/>
        <attr name="imagetype" />
    </declare-styleable>

</resources>

这里：

• circle_image_radius 表示圆形图像的半径
• round_image_radius 表示圆角矩形的弧度
• is_border 表示是否有边框
• imagetype 表示是哪一种类型，circle或者round

获取自定义属性的值

首先新建类CircleImage继承自View，在构造方法中获取自定义的属性值：

//获取自定义的属性的值
        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.selfimage,defStyleAttr,0);
        int count = array.getIndexCount();
        for (int i = 0; i < count; i++) {
            int attr = array.getIndex(i);
            switch (attr) {
            case R.styleable.selfimage_circle_image_radius:
                mCircleImageRadius = array.getDimensionPixelSize(attr,40);
                break;
            case R.styleable.selfimage_round_image_radius:
                mRoundImageRadius = array.getDimensionPixelSize(attr, 0);
                break;
            case R.styleable.selfimage_imagetype:
                mImageType = array.getInt(R.styleable.selfimage_imagetype, 0);
                break;
            case R.styleable.selfimage_is_border:
                mIsBorder = array.getBoolean(attr, false);
                break;
            case R.styleable.selfimage_border_width:
                mBorderWitdh = array.getDimensionPixelSize(attr, 12);
                break;
            default:
                break;
            }
        }
        array.recycle();

重写onDraw方法

我们需要在onDraw方法中进行具体的绘制工作。

int width = getWidth();
int height = getHeight();

if (CIRCLE_TYPE == mImageType) {//绘制圆形图片
    //创建一个和原始view大小相同的bitmap
    Bitmap des  = Bitmap.createBitmap(width, height,Config.ARGB_8888);
    //根据该bitmap创建一个画布
            Canvas drawCanvas = new Canvas(des);
            //根据view的宽高，获取圆形图片的半径
            //          int radius = Math.min(width, height) / 2;
            //绘制一个圆
            drawCanvas.drawCircle(width / 2, height/ 2, mCircleImageRadius, mPaint);
            //设置setXfermode
            mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
            //将src图像使用设置好的xfermode，绘制到当前des中
            drawCanvas.drawBitmap(mBitmap, 0, 0, mPaint);
            //将des 绘制到原始的canvas中
            canvas.drawBitmap(des, 0, 0,null);

            if (mIsBorder) {//如果有边框，则设置边框
                mPaint.setStrokeWidth(mBorderWitdh);
                mPaint.setColor(Color.RED);
                mPaint.setAntiAlias(true);
                mPaint.setStyle(Paint.Style.STROKE);
                canvas.drawCircle(width / 2, height/ 2, mCircleImageRadius+mBorderWitdh,mPaint);
            }
        }

if (ROUND_TYPE == mImageType) {//绘制矩形图片
            Bitmap des = Bitmap.createBitmap(width, height,Config.ARGB_8888);
            Canvas drawCanvas = new Canvas(des);
            RectF rectF = new RectF(0,0,width,height);
            drawCanvas.drawRoundRect(rectF, 12,12,mPaint);
            mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
            drawCanvas.drawBitmap(mBitmap, 0, 0, mPaint);
            canvas.drawBitmap(des, 0, 0,null);
}

首先使用getWidth()和getHeight()获取到当前view的宽和高。然后根据获取到的自定义属性mImageType的类型判断是是圆形还是圆角矩形。绘制步骤如下：

• 首先创建一个和当前view大小相同的des
• 创建一个和当前bitmap相同大小的drawCanvas
• 使用创建好的drawCanvas绘制我们需要的图形
• 为Paint设置setXfermode，这里使用到的是PorterDuffXfermode类
• 将需要显示的bitmap图片绘制到drawCanvas中
• 使用canvas绘制des

if (mIsBorder) {//如果有边框，则设置边框
     mPaint.setStrokeWidth(mBorderWitdh);
     mPaint.setColor(Color.RED);
     mPaint.setAntiAlias(true);
     mPaint.setStyle(Paint.Style.STROKE);
     canvas.drawCircle(width / 2, height/ 2, mCircleImageRadius+mBorderWitdh,mPaint);
}

可以看到这里绘制边框无非就是在图片外边在绘制一个圆圈。该圆圈的半径是mBorderWitdh，即自定义的属性。

在布局中加载自定义view

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:pro="http://schemas.android.com/apk/res/com.example.circleimage"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical" >

    <com.example.circleimage.CircleImage
        android:layout_width="120dp"
        android:layout_height="120dp"
        pro:circle_image_radius="60dp"
        pro:imagetype="circle" />

    <com.example.circleimage.CircleImage
        android:layout_width="120dp"
        android:layout_height="120dp"
        pro:border_width="2dp"
        pro:circle_image_radius="55dp"
        pro:imagetype="circle"
        pro:is_border="true" />

    <com.example.circleimage.CircleImage
        android:layout_width="130dp"
        android:layout_height="100dp"
        pro:imagetype="round"
        pro:round_image_radius="16dp"
         />

</LinearLayout>

ok，通过Xfermode实现自定义圆形图像就到这里了，希望大家喜欢。

源码下载