android中实现图片圆形效果

Posted 2021-05-15 kaolagirl

话不多说，先上效果：

实现逻辑：
这里参考的博文【原文】
圆形图片色实现是通过自定义ImageRound来的，主要是在onDraw（）方法中实现绘制圆形图片，在onMeasure（）中测量圆形的半径并设置View的宽高。代码如下：

public class ImageRound extends androidx.appcompat.widget.AppCompatImageView {
    //画笔
    private Paint mPaint;
    //圆形图片半径
    private int mRadius;
    //圆形的缩放比例
    private float mScale;

    public ImageRound(Context context) {
        super(context);
    }

    public ImageRound(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    public ImageRound(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //由于是圆形，宽高应保持一致
        int size = Math.min(getMeasuredWidth(),getMeasuredHeight());
        mRadius = size / 2;
        setMeasuredDimension(size,size);
    }

    @Override
    protected void onDraw(Canvas canvas) {
       mPaint = new Paint();
        Drawable drawable = getDrawable();
        if(drawable !=null){
            Bitmap bitmap = drawableToBitmap(getDrawable());
            //初始化BitmapShader，传入bitmap对象
            BitmapShader bitmapShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP,Shader.TileMode.CLAMP);
            //计算缩放比例
            mScale = (mRadius * 2.0f) / Math.min(bitmap.getHeight(),bitmap.getWidth());
            Matrix matrix = new Matrix();
            matrix.setScale(mScale,mScale);
            bitmapShader.setLocalMatrix(matrix);
            mPaint.setShader(bitmapShader);

            //画圆形，指定好坐标，半径，画笔
            canvas.drawCircle(mRadius, mRadius, mRadius, mPaint);
        }else{
            super.onDraw(canvas);
        }
    }


    /**
     * 写一个drawble转BitMap的方法
     * @param drawable
     * @return
     */
    private Bitmap drawableToBitmap(Drawable drawable) {
        if (drawable instanceof BitmapDrawable) {
            BitmapDrawable bd = (BitmapDrawable) drawable;
            return bd.getBitmap();
        }
        int w = drawable.getIntrinsicWidth();
        int h = drawable.getIntrinsicHeight();
        Bitmap bitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);
        drawable.setBounds(0, 0, w, h);
        drawable.draw(canvas);
        return bitmap;
    }

然后在页面上使用

<com.example.chunjiafu.ImageRound
        android:src="@drawable/indexgoods4"
        android:layout_marginTop="30dp"
        android:layout_gravity="center"
        android:scaleType="centerCrop"
        android:layout_width="150dp"
        android:layout_height="150dp"/>

需要注意的是，如果是设置background的话图片是不会出现圆形效果的