android ImageView圆形的图片自定义教程
相关话题
ImageView 是android提供的一个图片展示控件,常见的形状是都是矩形的,我们在应用中往往看到都是圆形的图片,那么如何实现呢?下面小编告诉你!
android ImageView圆形的图片自定义教程
首先,新建一个android项目,名称为CircleImageView,其余参数可以自己设置,点击完成生成项目信息。这个例子中,CircleImageViewShow不用做任何改变
定义一个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);
}
针对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;
}
其中 paint.setXfermode(new PorterDuffXfermode(android.graphics.PorterDuff.Mode.SRC_IN));
设置两张图片相交时的模式 我们知道 在正常的情况下,在已有的图像上绘图将会在其上面添加一层新的形状。 如果新的Paint是完全不透明的,那么它将完全遮挡住下面的Paint; 而setXfermode就可以来解决这个问题 ,具体的遮挡的效果可以参见下图
在main.xml中调用自定义的控件CircleImageEx,
<.cn.CircleImageEx
android:id="@+id/imageView"
android:layout_width="200dip" //定义图片的宽度
android:layout_height="200dip" //这个就是定义图片的高度
android:scaleType="centerInside"
android:src="@drawable/seven" /> //图片来源
我们运行程序,观察下结果,我们先看下原图片
END
android ImageView圆形的图片自定义教程的评论条评论