具体步骤:
1.绘制一个白色矩形背景
2.绘制一个圆角矩形背景
3.利用图层绘制中的PorterDuff.Mode.DST_OUT模式(显示下层非交集部分,交集部分透明显示)显示圆角。
4.绘制边框
public class RoundCornerImageView extends android.support.v7.widget.AppCompatImageView {
private Paint mPaintBg;//遮罩画笔
private Paint mBorderPaint;//边框画笔
private float mBorderWidth;//边框宽度
private int mBorderCorlor;//边框颜色
private float mRoundCorner;//圆角角度
private int width;//控件宽度
private int height;//控件高度
public RoundCornerImageView(Context context) {
this(context, null);
}
public RoundCornerImageView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public RoundCornerImageView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
//获取自定义属性
TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.RoundCornerImageView, defStyleAttr, 0);
mBorderWidth = array.getDimension(R.styleable.RoundCornerImageView_border_width, 0);
mBorderCorlor = array.getColor(R.styleable.RoundCornerImageView_border_color, Color.GRAY);
mRoundCorner = array.getDimension(R.styleable.RoundCornerImageView_round_corner, 0);
init();
}
private void init() {
//背景
mPaintBg = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaintBg.setStyle(Paint.Style.FILL);
mPaintBg.setColor(Color.WHITE);
//边框
mBorderPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mBorderPaint.setColor(mBorderCorlor);
mBorderPaint.setStyle(Paint.Style.STROKE);
mBorderPaint.setStrokeWidth(mBorderWidth);
//禁用硬件加速(api19以上使用图层绘制功能必须禁用硬件加速,Android手机默认开启)
setLayerType(View.LAYER_TYPE_SOFTWARE, null);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
width = w;
height = h;
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//使用离屏绘制,防止背景干扰绘制结果
int layer = canvas.saveLayer(0, 0, width, height, mPaintBg, Canvas.ALL_SAVE_FLAG);
//绘制下层矩形
canvas.drawRect(0, 0, width, height, mPaintBg);
mPaintBg.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));//取下层非交集部分,交集部分透明
mPaintBg.setColor(Color.WHITE);
//绘制上层圆角矩形
RectF rect = new RectF(mBorderWidth+ getPaddingLeft(), mBorderWidth+getPaddingTop(), width - mBorderWidth-getPaddingRight(), height - mBorderWidth-getPaddingBottom());
canvas.drawRoundRect(rect, mRoundCorner, mRoundCorner, mPaintBg);
mPaintBg.setXfermode(null);
//restoreToCount()与saveLayer()成对出现
canvas.restoreToCount(layer);
//绘制边框
RectF rectBorder = new RectF(mBorderWidth+ getPaddingLeft(), mBorderWidth+getPaddingTop(), width - mBorderWidth-getPaddingRight(), height - mBorderWidth-getPaddingBottom());
canvas.drawRoundRect(rectBorder, mRoundCorner, mRoundCorner, mBorderPaint);
}
}
<!-- 自定义属性-->
<declare-styleable name="RoundCornerImageView">
<attr name="border_width" format="dimension"></attr>
<attr name="border_color" format="color"></attr>
<attr name="round_corner" format="dimension"></attr>
</declare-styleable>
xml文件调用
<com.xxx.xxx.RoundCornerImageView
android:id="@+id/iv_avatar"
android:layout_width="44dp"
android:layout_height="44dp"
app:border_color="@color/colorAccent"
app:border_width="1dp"
app:round_corner="5dp"
android:src="@drawable/avatar1" />