自定义android圆形ImageView

使用自定义ImageView实现圆形Imageview

android自带的Imageview是只能调节它的宽高,不能实现一些圆形的Imageview,而很多社交软件的头像或者一些小图形都是圆形的,看起来非常美观,接下来,我就为大家实现一个自定义的imageview,能够实现圆形图案。

import android.annotation.SuppressLint;
import android.content.Context; 
import android.graphics.Bitmap; 
import android.graphics.Bitmap.Config; 
import android.graphics.Canvas; 
import android.graphics.Paint; 
import android.graphics.PorterDuff.Mode; 
import android.graphics.PorterDuffXfermode; 
import android.graphics.Rect; 
import android.graphics.drawable.BitmapDrawable; 
import android.graphics.drawable.Drawable; 
import android.util.AttributeSet;
import android.widget.ImageView; 

/** 
 * 自定义的圆形ImageView,可以直接当组件在布局中使用。
 */ 
@SuppressLint("DrawAllocation")
public class CircleImageView extends ImageView{ 
	
	private Paint paint ; 
	public CircleImageView(Context context) { 
		this(context,null);  
	} 
	public CircleImageView(Context context, AttributeSet attrs) { 
		this(context, attrs,0);  
	} 
	public CircleImageView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle); 
		paint = new Paint();

	} 

	/** 
	 *  绘制圆形图片
	 *  @author se7en
	 */ 
	@SuppressLint("DrawAllocation")
	@Override 
	protected void onDraw(Canvas canvas) {  

		Drawable drawable = getDrawable();
		if (drawable != null) {  
			Bitmap bitmap = ((BitmapDrawable) drawable).getBitmap();  
			Bitmap b = getCircleBitmap(bitmap, 14);
			int z = Math.min(b.getWidth(),b.getHeight());
			final Rect rectSrc = new Rect(0, 0, z , z);
			final Rect rectDest = new Rect(0,0,getWidth(),getHeight());
			paint.reset();  
			canvas.drawBitmap(b, rectSrc, rectDest, paint);  

		} else { 
			super.onDraw(canvas);  
		}  
	} 

	/**
	 * 获取圆形图片方法
	 * @param bitmap
	 * @param pixels
	 * @return Bitmap
	 * @author se7en
	 */ 
	private Bitmap getCircleBitmap(Bitmap bitmap, int pixels) {  
		Bitmap output = Bitmap.createBitmap(bitmap.getWidth(),  
				bitmap.getHeight(), Config.ARGB_8888);  
		Canvas canvas = new Canvas(output);
		final int color = 0xff424242; 
		int min = Math.min(bitmap.getWidth(),bitmap.getHeight());
		final Rect rect = new Rect(0, 0, min , min);  
		paint.setAntiAlias(true);  
		canvas.drawARGB(0, 0, 0, 0);  
		paint.setColor(color);	
		canvas.drawCircle(min / 2, min / 2, min / 2, paint);  
		paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));  
		canvas.drawBitmap(bitmap, rect, rect, paint);
		return output;  
	}  
} 

要说明的有如下几点:

  1.   注意导入包的选择,请看清楚我导的那具体的包,导错了,我不保证能不能实现;
  2.   int z = Math.min(b.getWidth(),b.getHeight()); 这句代码非常重要,如果你原始图片的宽和长不相等的话,这句代码就能保证画出来的是一个圆。而不是那种一个圆被砍了一刀,我不知道那种图形叫什么名字,暂且这样描述;
  3.  
    int min = Math.min(bitmap.getWidth(),bitmap.getHeight());
    
final Rect rect = new Rect(0, 0, min , min); 
canvas.drawCircle(min / 2, min / 2, min / 2, paint); 这3句代码也是和第2点差不多,能够保证画出来的圆是一个填充满的圆,而不是椭圆或者少了一点(像是被砍了一刀)的圆;
  1. paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));这句代码是为paint设置绘图模式,具体含义如下:
    
setXfermode设置两张图片相交时的模式。
在正常的情况下,

就是在已有的图像上绘图将会在其上面添加一层新的形状。如果新的Paint是完全不透明的,那么它将完全遮挡住下面的Paint;如果它是部分透明的,那么它将会被染上下面的颜色。
而setXfermode就可以来解决这个问题 .
canvas原有的图片可以理解为背景,就是dst;
新画上去的图片可以理解为前景,就是src。请看如下图表:

自定好了CircleImageView 后就可以在xml中使用了,用起来非常的方便,大家也可以把这个代码封装起来,以后直接用就可以了;
xml的代码如下:

<pre name="code" class="html"><?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/ray_menu"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/menu_bg"
    android:orientation="vertical"
    android:gravity="center" >

    <com.youle.bige.view.CircleImageView
        android:id="@+id/person_title_image"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:src="@drawable/zhoujielun" />

</LinearLayout>

效果如下:

现在看起来就非常漂亮和美观了;好了下班吃饭了!88

文章导航