天天看点

自定义带边框的圆角图片

这里是利用图层绘制的原理,绘制一个圆角矩形的遮罩来遮挡部分原图,达到视觉上的圆角效果。

具体步骤:

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" />
           

继续阅读