android 快速实现 圆角矩形控件 及 圆形控件

1.自定义RoundImageView

java 复制代码
package com.examle.widget;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.widget.ImageView;

import androidx.annotation.ColorInt;
import androidx.annotation.Dimension;
import androidx.annotation.Nullable;

import com.examlpe.R;

public class RoundImageView extends ImageView {
    private String TGA=RoundImageView.class.getSimpleName();
    private final PorterDuffXfermode xfermode=new PorterDuffXfermode(PorterDuff.Mode.DST_ATOP);//绘制模式
    private final Paint mPaint;//实体paint
    private final Paint mStrokePaint;//描边paint
    private int mRadius;//圆角值
    private int mStrokeWidthColor;//描边颜色
    private int mStrokeWidth;//描边宽度
    private boolean mIsCircle;//true-圆形模式,false-圆角矩形模式

    public RoundImageView(Context context) {
        this(context, null);
    }

    public RoundImageView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public RoundImageView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        this(context, attrs, defStyleAttr, 0);
    }

    public RoundImageView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.RoundImageView);
        mStrokeWidthColor = a.getColor(R.styleable.RoundImageView_riv_stroke_color, Color.WHITE);
        mStrokeWidth = a.getDimensionPixelSize(R.styleable.RoundImageView_riv_stroke_width, 0);
        mRadius = a.getDimensionPixelSize(R.styleable.RoundImageView_riv_round_radius, 0);
        mIsCircle = a.getBoolean(R.styleable.RoundImageView_riv_circle, false);
        a.recycle();

        mPaint = new Paint();
        mPaint.setAntiAlias(true);//抗锯齿
        mPaint.setColor(Color.WHITE);
        mPaint.setStyle(Paint.Style.FILL);

        mStrokePaint = new Paint();
        mStrokePaint.setAntiAlias(true);//抗锯齿
        mStrokePaint.setStyle(Paint.Style.STROKE);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        int layerId = canvas.saveLayer(0, 0, getWidth(), getHeight(), null);//保存图层
        super.onDraw(canvas);
        Drawable src = getDrawable();
        int tmpBpW = getWidth() - getPaddingLeft() - getPaddingRight();//位图宽度,必须大于0
        int tmpBpH = getHeight() - getPaddingTop() - getPaddingBottom();//位图高度,必须大于0
        if (src != null && getWidth() > 0 && getHeight() > 0 && tmpBpW>0 && tmpBpH>0) {
            Bitmap tmpBp = Bitmap.createBitmap(tmpBpW, tmpBpH, Bitmap.Config.ARGB_8888);
            Canvas tmpCv = new Canvas(tmpBp);//tmpBp画布
            float tmpR = Math.min(tmpBp.getWidth(), tmpBp.getHeight()) * 0.5f;//取最小宽度
            if (mIsCircle) {//圆形模式
                tmpCv.drawCircle(tmpR, tmpR, tmpR, mPaint);//绘制圆形
            } else {//圆角矩形模式
                tmpCv.drawRoundRect(0, 0, tmpBp.getWidth(), tmpBp.getHeight(), mRadius, mRadius, mPaint);//绘制圆角矩形
            }
            mPaint.setXfermode(xfermode);//绘制模式
            canvas.drawBitmap(tmpBp, getPaddingLeft(), getPaddingTop(), mPaint);//绘制位图

            if (mStrokeWidth > 0) {//描边
                mStrokePaint.setColor(mStrokeWidthColor);//描边颜色
                mStrokePaint.setStrokeWidth(mStrokeWidth);//描边宽度
                if (mIsCircle) {//圆形模式
                    canvas.drawCircle(getPaddingLeft()+tmpR, getPaddingTop()+tmpR, tmpR-mStrokeWidth*0.5f, mStrokePaint);
                } else {//圆角矩形模式
                    canvas.drawRoundRect(getPaddingLeft()+mStrokeWidth*0.5f, getPaddingTop()+mStrokeWidth*0.5f, getWidth() - getPaddingRight()-mStrokeWidth*0.5f, getHeight() - getPaddingBottom()-mStrokeWidth*0.5f, mRadius-mStrokeWidth*0.5f, mRadius-mStrokeWidth*0.5f, mStrokePaint);//绘制圆角
                }
            }
        }
        canvas.restoreToCount(layerId);//恢复图层
    }

    /**
     * 圆角值 dp
     * @param dpValue
     */
    public void setRadius(@Dimension int dpValue) {
        this.mRadius =(int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,dpValue,getResources().getDisplayMetrics());
        invalidate();
    }

    /**
     * 描边颜色
     * @param strokeWidthColor
     */
    public void setStrokeWidthColor(@ColorInt int strokeWidthColor) {
        this.mStrokeWidthColor = strokeWidthColor;
        invalidate();
    }

    /**
     * 描边宽度 dp
     * @param dpValue
     */
    public void setStrokeWidth(@Dimension int dpValue) {
        this.mStrokeWidth =(int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,dpValue,getResources().getDisplayMetrics());
        invalidate();
    }

    /**
     * 圆角矩形 或 圆形控件
     * @param isCircle
     */
    public void setCircle(boolean isCircle) {
        this.mIsCircle = isCircle;
        invalidate();
    }
}

2.新建attrs.xml 文件,路径 res/values/attrs.xml

XML 复制代码
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="RoundImageView">
        <attr name="riv_stroke_width" format="dimension" />
        <attr name="riv_stroke_color" format="color" />
        <attr name="riv_round_radius" format="dimension" />
        <attr name="riv_circle" format="boolean"/>
    </declare-styleable>
</resources>

3.布局使用:圆角矩形

XML 复制代码
        <com.examlpe.widget.RoundImageView
            android:id="@+id/riv"
            android:layout_width="180dp"
            android:layout_height="180dp"
            app:riv_circle="false"
            android:scaleType="fitXY"
            app:riv_round_radius="20dp"
            app:riv_stroke_width="2dp"
            app:riv_stroke_color="@color/white"
            android:src="@mipmap/ic_launcher" />

4.布局使用:圆形控件

XML 复制代码
        <com.examlpe.widget.RoundImageView
            android:id="@+id/riv"
            android:layout_width="180dp"
            android:layout_height="180dp"
            app:riv_circle="true"
            android:scaleType="fitXY"
            app:riv_stroke_width="2dp"
            app:riv_stroke_color="@color/white"
            android:src="@mipmap/ic_launcher" />
相关推荐
石山岭9 小时前
自己动手写了一个 Android 虚拟定位 App:GPSSimulate 技术实
android·前端
杉氧11 小时前
副作用 (Side Effects) 全攻略:如何像大师一样掌控 Composable 的生命周期?
android·架构·android jetpack
Kapaseker16 小时前
Kotlin Toolchain 0.11 发布:主要是把 Amper 干没了
android·kotlin
三少爷的鞋17 小时前
Android 现代架构不需要事件总线进阶篇
android
杉氧1 天前
深入理解 Compose 重组机制:快照系统如何驱动 UI 精准刷新?
android·架构·android jetpack
召钱熏1 天前
状态枚举正确≠渲染正确:一个语音按钮的状态机边界修复实录
android·前端
杉氧1 天前
深度解析:Jetpack Compose 核心架构与底层原理 —— 十年安卓老兵的“破茧重生”
android·架构·android jetpack
通玄1 天前
Jetpack Compose 入门系列(七):ViewModel 与界面状态管理
android
落魄Android在线炒饭1 天前
Android Framework 开发技巧:android.jar 生成与系统快速编译验证
android
如此风景1 天前
Kotlin Flow操作符学习
android·kotlin