昨天在简书上看到一篇文章,写的是通过20行代码写出一个圆形的ImageView,自己也尝试了一下,效果还说得过去。
大家都知道,我们自己要写一个圆形的ImageView,先写一个类继承于ImageView。然后实现构造方法,重写onDraw(Canvas canvas)。
下面上代码:
package com.lucasey.demo0808;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.util.AttributeSet;
import android.widget.ImageView;
/**
* 20行代码写出一个圆形的imageview
* @author Administrator
*/
public class CircleImage extends ImageView{
public CircleImage(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
protected void onDraw(Canvas canvas) {
//获得图片的宽度
int width=getWidth();
//获得图片的高度
int height=getHeight();
//短的二分之一作为半径
int radius=height>width?width/2:height/2;
//重新定义的一个画布,这一步很关键
Paint mPaint = new Paint();
//抗锯齿
mPaint.setAntiAlias(true);
Bitmap bitmap = Bitmap.createBitmap(width,height,
Bitmap.Config.ARGB_8888);
Canvas bitmapCanvas = new Canvas(bitmap);
super.onDraw(bitmapCanvas);
//圆形的框
Bitmap cB = Bitmap.createBitmap(width, height,
Bitmap.Config.ARGB_8888);
Canvas cCanv = new Canvas(cB);
//在控件中间画一个
cCanv.drawCircle(width/ 2, height/ 2, radius,
mPaint);
canvas.drawBitmap(bitmap, 0.0f, 0.0f, mPaint);
//dst是后画的图形
mPaint.setXfermode(new PorterDuffXfermode(
PorterDuff.Mode.DST_IN));
//一定要用之前的画布,不然会出现边角是黑色
bitmapCanvas.drawBitmap(cB, 0.0f, 0.0f, mPaint);
//给图形加边框
Paint paint =new Paint();
paint.setAntiAlias(true);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(5);
paint.setColor(Color.BLACK);
canvas.drawCircle(width/ 2, height/ 2, radius,
paint);
}
}
在这里面,主要是用到PoterDuffXfermode来设置两个图层交集区域的显示方式,最后的边框可根据自己的需要进行自定义修改
如此,一个圆形的ImageView就实现了
下面是xml中的引用:
<com.lucasey.demo0808.CircleImage
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/m90" />
补充下android.graphics.Paint方法setXfermode
用法:设置两张图片相交时的模式
例子:
1 mPaint = new Paint();
2 mPaint.setXfermode( new PorterDuffXfermode(PorterDuff.Mode.SCREEN));
常见的Xfermode(SRC为原图,DST为目标图),把代码中的SRC_IN换成下图指定的模式就会出现对应的效果图。
Canvas canvas = new Canvas(Src);
paint.setXfermode( new PorterDuffXfermode(Mode.SRC_IN));
canvas.drawBitmap(Dst, 0f, 0f, paint);