圆角图片 自定义控件属性

一、在res文件夹下添加attres.xml文件

image.png

添加属性

<resources>
    <declare-styleable name="CustomizeView">
        <attr name="CustomizeRadius" format="integer" />
    </declare-styleable>
</resources>

二、创建自定义文件

public class CustomizeView extends ImageView {
    private Paint paint;
    private int mRadius;

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

    public CustomizeView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        paint = new Paint();
        initViews(context, attrs);
    }

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

    private void initViews(Context context, AttributeSet attrs) {
        //重点
        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.CustomizeView);
        //重点
        mRadius = array.getInteger(R.styleable.CustomizeView_CustomizeRadius, 0);
        //重点
        array.recycle();
        paint = new Paint();
    }

    /**
     * 绘制圆角矩形图片
     *
     * @author caizhiming
     */
    @Override
    protected void onDraw(Canvas canvas) {
        Drawable drawable = getDrawable();
        if (null != drawable) {
            Bitmap bitmap = ((BitmapDrawable) drawable).getBitmap();
            Bitmap b = getRoundBitmap(bitmap, mRadius);
            final Rect rectSrc = new Rect(0, 0, b.getWidth(), b.getHeight());
            final Rect rectDest = new Rect(0, 0, getWidth(), getHeight());
            paint.reset();
            canvas.drawBitmap(b, rectSrc, rectDest, paint);
        } else {
            super.onDraw(canvas);
        }
    }

    /**
     * 获取圆角矩形图片方法
     *
     * @param bitmap
     * @param roundPx,一般设置成14
     * @return Bitmap
     * @author caizhiming
     */
    private Bitmap getRoundBitmap(Bitmap bitmap, int roundPx) {
        Bitmap output = Bitmap.createBitmap(bitmap.getWidth(),
                bitmap.getHeight(), Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(output);
        final int color = 0xff424242;
        final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
        final RectF rectF = new RectF(rect);
        paint.setAntiAlias(true);
        canvas.drawARGB(0, 0, 0, 0);
        paint.setColor(color);
        int x = bitmap.getWidth();
        canvas.drawRoundRect(rectF, roundPx, roundPx, paint);
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        canvas.drawBitmap(bitmap, rect, rect, paint);
        return output;
    }
}

三、使用方法

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <liang.test.myapplication.view.CustomizeView
        android:id="@+id/iv_one"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginStart="20dp"
        android:layout_marginTop="20dp"
        app:CustomizeRadius="20" />

    <liang.test.myapplication.view.CustomizeView
        android:id="@+id/iv_two"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginStart="20dp"
        android:layout_marginTop="20dp"
        app:CustomizeRadius="40" />

    <liang.test.myapplication.view.CustomizeView
        android:id="@+id/iv_three"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginStart="20dp"
        android:layout_marginTop="20dp"
        app:CustomizeRadius="60" />
</LinearLayout>

四、Activity中使用

public class CustomizeViewActivity extends AppCompatActivity {

    ImageView ivOne;
    ImageView ivTwo;
    ImageView ivThree;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activitiy_customize_view);

        ivOne = findViewById(R.id.iv_one);
        ivTwo = findViewById(R.id.iv_two);
        ivThree = findViewById(R.id.iv_three);

        Glide.with(this).load(R.mipmap.image_bg).asBitmap().centerCrop().diskCacheStrategy(DiskCacheStrategy.ALL).priority(Priority.HIGH).into(ivOne);
        Glide.with(this).load(R.mipmap.image_bg).asBitmap().centerCrop().diskCacheStrategy(DiskCacheStrategy.ALL).priority(Priority.HIGH).into(ivTwo);
        Glide.with(this).load(R.mipmap.image_bg).asBitmap().centerCrop().diskCacheStrategy(DiskCacheStrategy.ALL).priority(Priority.HIGH).into(ivThree);

    }
}

五、效果

image.png