我们之前学习了PorterDuffXfermode了,现在我们来用它做一下简单的圆角和圆形图片
首先自定义属性:
<resources>
<declare-styleable name="RoundImageView">
<attr name="backgroundresource" format="reference"></attr>
</declare-styleable>
</resources>
添加图片资源属性,然后建一个类集成ImageView.,初始化画笔和属性
private int backgroundresource;
/**
* 控件宽度
*/
private int mWidth;
/**
* 控件高度
*/
private int mHeight;
private Bitmap bitmap;
private Paint paint;
public RoundImageView(Context context) {
this(context,null);
}
public RoundImageView(Context context, AttributeSet attrs) {
this(context, attrs,0);
}
public RoundImageView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray array = context.obtainStyledAttributes(attrs,R.styleable.RoundImageView);
backgroundresource = array.getResourceId(R.styleable.RoundImageView_backgroundresource,0);
array.recycle();
initPaint();
}
private void initPaint() {
bitmap = BitmapFactory.decodeResource(getResources(),backgroundresource);
paint = new Paint();
paint.setAntiAlias(true);
}
然后我们应该计算控件的高度:
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
if (widthMode == MeasureSpec.EXACTLY){ //matchparent 自定义
mWidth = widthSize;
}else {
int imageWidth = getPaddingLeft() + getPaddingLeft() + bitmap.getWidth();
if (widthMode == MeasureSpec.AT_MOST){//wrapcontent
mWidth = Math.min(imageWidth,widthSize);
}else {
mWidth = imageWidth;
}
}
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
if (heightMode == MeasureSpec.EXACTLY){
mHeight = heightSize;
}else {
int imageHeight = getPaddingBottom() + getPaddingTop() + bitmap.getHeight();
if (heightMode == MeasureSpec.AT_MOST){
mHeight = Math.min(imageHeight,heightSize);
}else {
mHeight = imageHeight;
}
}
setMeasuredDimension(mWidth,mHeight);
}
再然后,我们应该开始作画了:
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int centerRadius = Math.min(mWidth,mHeight);
//通过最小值进行缩放
bitmap = Bitmap.createScaledBitmap(bitmap,centerRadius,centerRadius,false);
canvas.drawBitmap(createRoundBitmap(bitmap),0,0,null);
}
/**
* 圆形图片
* @param bitmap
* @return
*/
private Bitmap createRoundBitmap(Bitmap bitmap){
Bitmap copyBitmap = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_8888);
//获取与图片大小的相同的画布
Canvas canvas = new Canvas(copyBitmap);
//先画圆
canvas.drawCircle(bitmap.getWidth()/2,bitmap.getHeight()/2,bitmap.getHeight()/2,paint);
//设置Xfermode模式
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(bitmap,0,0,paint);
return copyBitmap;
}
通过代码可以知道,我们是先画圆,再画图片,这样就能显示圆形图片了,然后,我们也可以显示出圆角图片:
/**
* 圆角图片
* @param bitmap
* @return
*/
private Bitmap createRectBitmap(Bitmap bitmap){
Bitmap copyBitmap = Bitmap.createBitmap(bitmap.getWidth(),bitmap.getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(copyBitmap);
RectF rectf = new RectF(0,0,bitmap.getWidth(),bitmap.getHeight());
//画圆角
canvas.drawRoundRect(rectf,50,50,paint);
//设置模式
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(bitmap,0,0,paint);
return copyBitmap;
}
效果图我就不添加了,你通过我的代码肯定能实现圆角和圆形图片的,有什么问题欢迎留言