android ImageView圆形的图片自定义教程

发布时间:2017-04-09 05:13

ImageView 是android提供的一个图片展示控件,常见的形状是都是矩形的,我们在应用中往往看到都是圆形的图片,那么如何实现呢?下面小编告诉你!

android ImageView圆形的图片自定义教程

首先,新建一个android项目,名称为CircleImageView,其余参数可以自己设置,点击完成生成项目信息。这个例子中,CircleImageViewShow不用做任何改变

android ImageView圆形的图片自定义教程

android ImageView圆形的图片自定义教程

定义一个CircleImageEx 继承ImageView,主要功能是改写onDraw函数完成,图片信息的改写。onDraw函数的实现:

@Override

protected void onDraw(Canvas canvas) {

// TODO Auto-generated method stub

Drawable drawable = getDrawable();

if (drawable == null) {

return;

}

if (getWidth() == 0 || getHeight() == 0) {

return;

}

//获取图片,转化为Bitmap

Bitmap b = ((BitmapDrawable)drawable).getBitmap();

if(null == b)

{

return;

}

//将图片转为32位ARGB位图,保证图片质量

Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);

// //获取图片的宽 高

int w = getWidth(), h = getHeight();

//通过getCroppedBitmap函数,返回一个圆形图片

Bitmap roundBitmap = getCroppedBitmap(bitmap, w);

//在自定义的CircleImageEx上展现

canvas.drawBitmap(roundBitmap, 0,0, null);

}

android ImageView圆形的图片自定义教程

android ImageView圆形的图片自定义教程

针对getCroppedBitmap函数,如何画出圆形的图片呢?

public static Bitmap getCroppedBitmap(Bitmap bmp, int radius) {

Bitmap p;

//判断图片的大小与传入radius是否相等,如果不相等,那么

//将图片设置成长 宽都是radius的图片

if(bmp.getWidth() != radius || bmp.getHeight() != radius)

p = Bitmap.createScaledBitmap(bmp, radius, radius, false);

else

p = bmp;

//最后输出的图片信息

Bitmap output = Bitmap.createBitmap(p.getWidth(),

p.getHeight(), Config.ARGB_8888);

Canvas canvas = new Canvas(output);

final int color = 0xffa19774;

final Paint paint = new Paint();

final Rect rect = new Rect(0, 0, p.getWidth(), p.getHeight());

//画笔加上 抗锯齿标志,图像更加平滑

paint.setAntiAlias(true);

//如果该项设置为true,则图像在动画进行中会滤掉对Bitmap图像的优化操作,加快显示

paint.setFilterBitmap(true);

//防抖动

paint.setDither(true);

// 透明色

canvas.drawARGB(0, 0, 0, 0);

//画笔的颜色

paint.setColor(Color.parseColor("#BAB399"));

//画出一个圆形

canvas.drawCircle(p.getWidth() / 2+0.7f, p.getHeight() / 2+0.7f,

p.getWidth() / 2+0.1f, paint);

//设置两张图片相交时的模式 ,就是在画布上遮上圆形的图片信息

paint.setXfermode(new PorterDuffXfermode(android.graphics.PorterDuff.Mode.SRC_IN));

canvas.drawBitmap(p, rect, rect, paint);

return output;

}

android ImageView圆形的图片自定义教程

其中 paint.setXfermode(new PorterDuffXfermode(android.graphics.PorterDuff.Mode.SRC_IN));

设置两张图片相交时的模式 我们知道 在正常的情况下,在已有的图像上绘图将会在其上面添加一层新的形状。 如果新的Paint是完全不透明的,那么它将完全遮挡住下面的Paint; 而setXfermode就可以来解决这个问题 ,具体的遮挡的效果可以参见下图

android ImageView圆形的图片自定义教程

在main.xml中调用自定义的控件CircleImageEx,

<.cn.CircleImageEx

android:id="@+id/imageView"

android:layout_width="200dip" //定义图片的宽度

android:layout_height="200dip" //这个就是定义图片的高度

android:scaleType="centerInside"

android:src="@drawable/seven" /> //图片来源

android ImageView圆形的图片自定义教程

我们运行程序,观察下结果,我们先看下原图片

android ImageView圆形的图片自定义教程

END

android ImageView圆形的图片自定义教程的评论条评论