Android 自定义View实现圆形加载进度条

最新推荐文章于 2024-09-20 10:09:41 发布

是只废狗了

最新推荐文章于 2024-09-20 10:09:41 发布

阅读量3.3k

点赞数 1

分类专栏： Android 文章标签： Android

本文链接：https://blog.csdn.net/weixin_43566836/article/details/123319578

版权

这篇博客介绍了如何在Android中实现两种不同样式的圆形加载进度条。通过创建自定义View，设置自定义属性，重写onMeasure和onDraw方法，并添加动画，实现了效果炫酷的加载进度条。同时还提供了全部源码供读者参考。

摘要由CSDN通过智能技术生成

效果图

话不多说,咱们直接看代码

首先第一种:

1、创建自定义View类

public class MyRelative extends View {
  
    public MyRelative(Context context) {
        this(context, null); //手动改成this...
    }

    public MyRelative(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);//手动改成this...
    }

    @SuppressLint("ResourceAsColor")
    public MyRelative(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
      
    }
}

2、自定义属性,(在values文件夹下创建一个XML,取名为atts_circle_view.xml)

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="MyRelative"> //这个name最好和你创建的自定义View类名一样
        <!--外圆颜色-->
        <attr name="outer_color" format="color" />
        <!--内圆颜色-->
        <attr name="inner_color" format="color" />
        <!--圆形宽度-->
        <attr name="border_width" format="dimension" />
        <!--字体颜色-->
        <attr name="step_text_color" format="color" />
        <!--字体大小-->
        <attr name="step_text_size" format="dimension" />
        <!--步数最大值-->
        <attr name="max_step" format="integer"/>
        <!--当前步数-->
        <attr name="curren_step" format="integer"/>
    </declare-styleable>
</resources>

3、在第三个构造方法中得到自定义属性

  @SuppressLint("ResourceAsColor")
    public MyRelative(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.MyRelative);
        //圆弧宽度
        mBorderWidth = (int) typedArray.getDimension(R.styleable.MyRelative_border_width, 10);
        //外圆弧颜色
        mOuterColor = typedArray.getColor(R.styleable.MyRelative_outer_color, mOuterColor);
        //内圆弧颜色
        mInnerColor = typedArray.getInteger(R.styleable.MyRelative_inner_color, mInnerColor);
        //字体颜色
        mTextColor = typedArray.getColor(R.styleable.MyRelative_step_text_color, mTextColor);
        //字体大小
        mTextSize = (int) typedArray.getDimensionPixelSize(R.styleable.MyRelative_step_text_size, mTextSize);
        //最大步数
        mMaxStep = typedArray.getInteger(R.styleable.MyRelative_max_step, 10000);
        //当前步数
        mCurrentStep = typedArray.getInteger(R.styleable.MyRelative_curren_step, 8000);
        typedArray.recycle();
}

4、重写onMeasure方法(测量view大小)

 @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //测量宽高
        int width = MeasureSpec.getSize(widthMeasureSpec);
        int height = MeasureSpec.getSize(heightMeasureSpec);
        //将控件截成正方形
        //三目运算符取长度短的一边作为宽高
        setMeasuredDimension(width > height ? height : width, width > height ? height : width);
    }

5、重写onDraw方法（绘制）

 @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //绘制内圆弧
        int center = getWidth() / 2;
        int r = (getWidth() - mBorderWidth) / 2;
        RectF rectF = new RectF(mBorderWidth / 2, mBorderWidth / 2, center + r, center + r);
        canvas.drawArc(rectF, 135, 270, false, mInnerPaint);
        //绘制外圆弧
        if (mMaxStep == 0) {
            return;
        }
        float radio = (float) mCurrentStep / mMaxStep;
        canvas.drawArc(rectF, 135, 270 * radio, false, mOuterPaint);
        //文字
        String mText =