一个简单的圆形图片实现

序言

很多时候我们都需要使用到圆形的图像控件，比如头像之类的。如果是开发者自己设计界面的时候使用，取巧的方法就是让美工给你做一个圆形ICON，但很多时候是需要显示用户上传的图像，这时候做一个通用的圆形图像控件是有必要的，那如何实现呢？

正文

Android图像控件一般是使用ImageView，那么我们这个自定义CircleView的圆形图像控件就继承于该控件。

import android.content.Context;import android.graphics.Bitmap;import android.graphics.Canvas;import android.graphics.Paint;import android.graphics.PorterDuff;import android.graphics.PorterDuffXfermode;import android.graphics.drawable.BitmapDrawable;import android.util.AttributeSet;import android.widget.ImageView;/** * Helen 2015-05-13  */public class CircleView extends ImageView{    private Bitmap mSrcBitmap;//ImageView设置的图像资源文件    private Bitmap mOut;    private Paint mPaint;//画笔    public CircleView(Context context) {        super(context);        init();    }    public CircleView(Context context, AttributeSet attrs) {        super(context, attrs);        init();    }    public CircleView(Context context, AttributeSet attrs, int defStyle) {        super(context, attrs, defStyle);        init();    }    private void init(){        //setLayerType(LAYER_TYPE_SOFTWARE,null);//禁用硬件加速        mSrcBitmap=((BitmapDrawable)getDrawable()).getBitmap();   mOut=Bitmap.createBitmap(mSrcBitmap.getWidth(),mSrcBitmap.getHeight(), Bitmap.Config.ARGB_8888);        mPaint=new Paint(Paint.ANTI_ALIAS_FLAG);        Canvas canvas=new Canvas(mOut);        //Dst        canvas.drawCircle(mOut.getWidth() / 2, mOut.getHeight() / 2,mOut.getWidth() / 2, mPaint);        mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));        //Src        canvas.drawBitmap(mSrcBitmap,0,0,mPaint);        mPaint.setXfermode(null);    }    @Override    protected void onDraw(Canvas canvas) {        canvas.drawBitmap(mOut,0,0,null);    }}

实现的方法是使用Paint的Xfermode属性。需要了解的请戳这里
布局文件如下activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent">    <ImageView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:src="@mipmap/test"        android:layout_above="@+id/view"        android:layout_centerHorizontal="true"        android:layout_marginBottom="64dp" />    <com.hbase.view.CircleView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_centerInParent="true"        android:src="@mipmap/test"        android:id="@+id/view" /></RelativeLayout>

效果图：

上面是原图，下面是圆形图像控件。
但是你会发现，是这张图片切得刚好大小，我们换张大点的试试。

效果并不是我们所想要的。
那么如何改进呢？我们是否可以根据控件的大小来显示图像并将图像进行缩放呢？
改进后：

package com.hbase.view;import android.content.Context;import android.graphics.Bitmap;import android.graphics.Canvas;import android.graphics.Paint;import android.graphics.PorterDuff;import android.graphics.PorterDuffXfermode;import android.graphics.drawable.BitmapDrawable;import android.graphics.drawable.Drawable;import android.util.AttributeSet;import android.widget.ImageView;/** * Helen 2015-05-13 */public class CircleView extends ImageView{    private Bitmap mSrcBitmap;//ImageView设置的图像资源文件    private Bitmap mOut;    private Paint mPaint;//画笔    public CircleView(Context context) {        super(context);        //init();    }    public CircleView(Context context, AttributeSet attrs) {        super(context, attrs);        //init();    }    public CircleView(Context context, AttributeSet attrs, int defStyle) {        super(context, attrs, defStyle);        //init();    }    private void init(){        //setLayerType(LAYER_TYPE_SOFTWARE,null);//禁用硬件加速        Drawable d=getDrawable();        if(d==null) return;        mSrcBitmap=((BitmapDrawable)d).getBitmap();        //mOut=Bitmap.createBitmap(mSrcBitmap.getWidth(),mSrcBitmap.getHeight(), Bitmap.Config.ARGB_8888);        mSrcBitmap=Bitmap.createScaledBitmap(mSrcBitmap,getWidth(),getHeight(),true);//设置缩放        mOut=Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888);        mPaint=new Paint(Paint.ANTI_ALIAS_FLAG);        Canvas canvas=new Canvas(mOut);        //Dst        canvas.drawCircle(getWidth() / 2, getHeight() / 2,getWidth() / 2, mPaint);        //canvas.drawCircle(mOut.getWidth() / 2, mOut.getHeight() / 2,mOut.getWidth() / 2, mPaint);        mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));        //Src        canvas.drawBitmap(mSrcBitmap,0,0,mPaint);        mPaint.setXfermode(null);    }    @Override    protected void onDraw(Canvas canvas) {        //只有在onDraw中才能获取到控件的宽高        init();        canvas.drawBitmap(mOut,0,0,null);    }    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        super.onMeasure(widthMeasureSpec, heightMeasureSpec);        int width=Math.min(getMeasuredHeight(),getMeasuredWidth());        //因为是要圆形图像，所以将控件的宽高设置为一样        setMeasuredDimension(width,width);    }}

效果图：