自定义环形加载进度条和原生ProgressBar使用

已于 2022-05-12 14:32:30 修改
阅读量477 收藏
点赞数
分类专栏： android 文章标签： android
于 2022-05-11 20:30:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chingxing/article/details/124710860
版权

1.自定义


/**
 * 旋转加载动画控件
 */
public class RotateLoadingView extends View {

    /**
     * 默认圆弧的宽度
     */
    private static final int DEFAULT_ARC_WIDTH = 6;
    /**
     * 默认旋转度数的速度
     */
    private static final int DEFAULT_SPEED_OF_DEGREE = 5;
    /**
     * 是否需要画图
     */
    private boolean mIsDraw;
    /**
     * 是否是自动模式，无需人工干预
     */
    private boolean mIsAutoMode = true;

    /**
     * 圆弧画笔
     */
    private Paint mArcPaint;
    /**
     * 圆弧画笔的粗细
     */
    private int mArcWidth;
    /**
     * 圆弧的颜色
     */
    private int mArcColor;

    /**
     * 背景圆弧颜色
     */
    private int mbgArcColor;

    private boolean mIsSingleArc;
    /**
     * 圆弧所在的椭圆对象
     */
    private RectF mLoadingRectF;
    /**
     * 上弧的度数
     */
    private int mTopDegree = 10;
    /**
     * 下弧的度数
     */
    private int mBottomDegree = 190;
    /**
     * 圆弧的角度
     */
    private float mArcDegree;
    /**
     * 圆弧的最大角度
     */
    private int mMaxArcDegree;
    /**
     * 上下弧度数的变化速度
     */
    private int mSpeedOfDegree;
    /**
     * 圆弧角度的变化速度
     */
    private float mSpeedOfArc;
    /**
     * 圆弧是否开始变大
     */
    private boolean mChangeBigger = true;

    /**
     * 图标
     */
    private Bitmap mIconBitmap;
    /**
     * 图标缩放比例
     */
    private float mIconScale;
    /**
     * 绘制图标的画笔
     */
    private Paint mIconPaint;
    /**
     * 背景画笔
     */
    private Paint mBackPaint;

    private int mWidth;
    private int mHeight;
    private float mStrokeWidth = 50;
    private float mRadius = 50;

    public RotateLoadingView(Context context) {
        super(context);
        initAttrs(context, null);
    }

    public RotateLoadingView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initAttrs(context, attrs);
    }

    public RotateLoadingView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initAttrs(context, attrs);
    }

    private void initAttrs(Context context, AttributeSet attrs) {
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.LoadingView);
        mArcColor = typedArray.getColor(R.styleable.LoadingView_lv_color, ThemeUtils.getMainThemeColor(context));
        mbgArcColor=typedArray.getColor(R.styleable.LoadingView_lv_bg_color, ThemeUtils.getMainThemeColor(context));
        mArcWidth = typedArray.getDimensionPixelSize(R.styleable.LoadingView_lv_width, DensityUtils.dp2px(getContext(), DEFAULT_ARC_WIDTH));
        mSpeedOfDegree = typedArray.getInt(R.styleable.LoadingView_lv_speed, DEFAULT_SPEED_OF_DEGREE);
        mSpeedOfArc = mSpeedOfDegree >> 2;
        mIsDraw = mIsAutoMode = typedArray.getBoolean(R.styleable.LoadingView_lv_auto, true);
        mIsSingleArc = typedArray.getBoolean(R.styleable.LoadingView_lv_arc_single, false);
        mMaxArcDegree = mIsSingleArc ? 280 : 160;
        boolean hasIcon = typedArray.getBoolean(R.styleable.LoadingView_lv_has_icon, true);
        if (hasIcon) {
            Drawable icon = ResUtils.getDrawableAttrRes(getContext(), typedArray, R.styleable.LoadingView_lv_icon);
            if (icon != null) {
                mIconBitmap = Utils.getBitmapFromDrawable(icon);
            } else {
                Drawable appIcon = Utils.getAppIcon(getContext());
                if (appIcon != null) {
                    mIconBitmap = Utils.getBitmapFromDrawable(appIcon);
                }
            }
            mIconScale = typedArray.getFloat(R.styleable.LoadingView_lv_icon_scale, 0.5F);
        }
        typedArray.recycle();

        initPaint();
    }

    /**
     * 初始化画笔
     */
    private void initPaint() {
        mBackPaint = new Paint();
        mBackPaint.setColor(mbgArcColor);
        mBackPaint.setAntiAlias(true);
        mBackPaint.setStyle(Paint.Style.STROKE);
        mBackPaint.setStrokeWidth(mArcWidth);
        mBackPaint.setStrokeCap(Paint.Cap.ROUND);

        mArcPaint = new Paint();
        mArcPaint.setColor(mArcColor);
        mArcPaint.setAntiAlias(true);
        mArcPaint.setStyle(Paint.Style.STROKE);
        mArcPaint.setStrokeWidth(mArcWidth);
        mArcPaint.setStrokeCap(Paint.Cap.ROUND);

        mIconPaint = new Paint();
        mIconPaint.setColor(mArcColor);
        mIconPaint.setAntiAlias(true);
        mIconPaint.setStyle(Paint.Style.STROKE);
        mIconPaint.setStrokeCap(Paint.Cap.ROUND);
    }
    //重写测量大小的onMeasure方法和绘制View的核心方法onDraw()
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        mWidth = getRealSize(widthMeasureSpec);
        mHeight = getRealSize(heightMeasureSpec);
        setMeasuredDimension(mWidth, mHeight);

    }
    public int getRealSize(int measureSpec) {
        int result = 1;
        int mode = MeasureSpec.getMode(measureSpec);
        int size = MeasureSpec.getSize(measureSpec);

        if (mode == MeasureSpec.AT_MOST || mode == MeasureSpec.UNSPECIFIED) {
            //自己计算
            result = (int) (mRadius * 2 + mStrokeWidth);
        } else {
            result = size;
        }

        return result;
    }
    @Override
    protected void onSizeChanged(int width, int height, int oldWidth, int oldHeight) {
        super.onSizeChanged(width, height, oldWidth, oldHeight);
        mArcDegree = 10;
        mLoadingRectF = new RectF(mArcWidth, mArcWidth, width - mArcWidth, height - mArcWidth);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        if (!mIsDraw) {
            return;
        }
        canvas.drawCircle(mWidth / 2, mHeight / 2, mRadius, mBackPaint);
        drawArc(canvas);

        changeArcDegree();

        invalidate();
    }

    /**
     * 画圆弧
     *
     * @param canvas
     */
    private void drawArc(Canvas canvas) {
        if (mIconBitmap != null) {
            canvas.drawBitmap(mIconBitmap, null, getIconBitmapRectF(mIconBitmap), mIconPaint);
        }

        drawTopArc(canvas);

        if (!mIsSingleArc) {
            drawBottomArc(canvas);
        }
    }

    /**
     * 画上弧
     *
     * @param canvas
     */
    private void drawTopArc(Canvas canvas) {
        canvas.drawArc(mLoadingRectF, mTopDegree, mArcDegree, false, mArcPaint);
        mTopDegree += mSpeedOfDegree;
        if (mTopDegree > 360) {
            mTopDegree = mTopDegree - 360;
        }
    }

    /**
     * 画下弧
     *
     * @param canvas
     */
    private void drawBottomArc(Canvas canvas) {
        canvas.drawArc(mLoadingRectF, mBottomDegree, mArcDegree, false, mArcPaint);
        mBottomDegree += mSpeedOfDegree;

        if (mBottomDegree > 360) {
            mBottomDegree = mBottomDegree - 360;
        }
    }

    /**
     * 改变圆弧的角度
     */
    private void changeArcDegree() {
        if (mChangeBigger) {
            if (mArcDegree < mMaxArcDegree) {
                mArcDegree += mSpeedOfArc;
            }
        } else {
            if (mArcDegree > mSpeedOfDegree) {
                mArcDegree -= 2 * mSpeedOfArc;
            }
        }
        if (mArcDegree >= mMaxArcDegree || mArcDegree <= mSpeedOfDegree) {
            mChangeBigger = !mChangeBigger;
        }
    }

    /**
     * 获取中心图标所在的区域
     *
     * @return
     */
    public RectF getIconBitmapRectF(Bitmap bitmap) {
        float width = bitmap.getWidth(), height = bitmap.getHeight();
        if (width >= height) {
            height = getWidth() / width * height;
            width = getWidth();
        } else {
            width = getHeight() / height * width;
            height = getHeight();
        }
        float left = (getWidth() - width * mIconScale) / 2;
        float top = (getHeight() - height * mIconScale) / 2;
        float right = getWidth() - left;
        float bottom = getHeight() - top;
        return new RectF(left, top, right, bottom);
    }

    /**
     * 设置loading的图标
     *
     * @param icon
     * @return
     */
    public RotateLoadingView setLoadingIcon(Drawable icon) {
        if (icon != null) {
            mIconBitmap = Utils.getBitmapFromDrawable(icon);
        }
        return this;
    }

    /**
     * 设置loading的图标
     *
     * @param iconBitmap
     * @return
     */
    public RotateLoadingView setLoadingIcon(Bitmap iconBitmap) {
        mIconBitmap = iconBitmap;
        return this;
    }

    public RotateLoadingView setLoadingColor(int color) {
        mArcColor = color;
        return this;
    }

    public int getLoadingColor() {
        return mArcColor;
    }

    /**
     * 开始旋转
     */
    public void start() {
        if (!mIsAutoMode) {
            mIsDraw = true;
            invalidate();
        }
    }

    /**
     * 停止旋转
     */
    public void stop() {
        if (!mIsAutoMode) {
            pause();
        }
    }

    /**
     * 暂停旋转并消失
     */
    private void pause() {
        mIsDraw = false;
        invalidate();
    }

    public boolean isStart() {
        return mIsDraw;
    }

    /**
     * 资源释放
     */
    public void recycle() {
        pause();

        if (mIconBitmap != null) {
            mIconBitmap.recycle();
            mIconBitmap = null;
        }
        mBackPaint=null;
        mArcPaint = null;
        mIconPaint = null;
        mLoadingRectF = null;
    }

}

public class Utils {
    /**
     * 将Drawable转化为Bitmap
     *
     * @param drawable Drawable
     * @return Bitmap
     */
    public static Bitmap getBitmapFromDrawable(Drawable drawable) {
        int width = drawable.getIntrinsicWidth();
        int height = drawable.getIntrinsicHeight();
        Bitmap bitmap = Bitmap.createBitmap(width, height, drawable
                .getOpacity() != PixelFormat.OPAQUE ? Bitmap.Config.ARGB_8888
                : Bitmap.Config.RGB_565);
        Canvas canvas = new Canvas(bitmap);
        drawable.setBounds(0, 0, width, height);
        drawable.draw(canvas);
        return bitmap;
    }
    /**
     * 获取应用的图标
     *
     * @param context
     * @return
     */
    public static Drawable getAppIcon(Context context) {
        try {
            PackageManager pm = context.getPackageManager();
            ApplicationInfo info = pm.getApplicationInfo(context.getPackageName(), 0);
            return info.loadIcon(pm);
        } catch (PackageManager.NameNotFoundException e) {
            e.printStackTrace();
        }
        return null;
    }

}

   themeUtils.java
 /**
     * 获取主题色
     *
     * @param context 上下文
     * @return 主题色
     */
    @ColorInt
    public static int getMainThemeColor(Context context) {
        return resolveColor(context, R.attr.colorAccent, getColor(context, R.color.xui_config_color_main_theme));
    }
  @ColorInt
    public static int resolveColor(Context context, @AttrRes int attr) {
        return resolveColor(context, attr, 0);
    }

    @ColorInt
    public static int resolveColor(Context context, @AttrRes int attr, int fallback) {
        TypedArray a = context.getTheme().obtainStyledAttributes(new int[]{attr});
        try {
            return a.getColor(0, fallback);
        } finally {
            a.recycle();
        }
    }

使用：

-        <RotateLoadingView
            android:id="@+id/loading"
            android:layout_width="26dp"
            android:layout_height="26dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:lv_arc_single="true"
            app:lv_speed="8"
            app:lv_width="2dp"
            app:lv_color="#FFFFFF"
            app:lv_bg_color="#33FFFFFF"
            app:lv_auto="true"
            app:lv_has_icon="false" />

attr.xml

 <!--LoadingView-->
    <declare-styleable name="LoadingView">
        <!--loading加载画笔的粗细-->
        <attr name="lv_width" format="dimension" />
        <!--loading加载画笔的颜色-->
        <attr name="lv_color" format="color" />
        <!--loading背景颜色-->
        <attr name="lv_bg_color" format="color" />
        <!--loading加载旋转的速度-->
        <attr name="lv_speed" format="integer" />
        <!--是否有loading中心的图标， 默认是true-->
        <attr name="lv_has_icon" format="boolean" />
        <!--loading中心的图标-->
        <attr name="lv_icon" format="reference" />
        <!--loading中心图标缩放的比例, 默认是0.5-->
        <attr name="lv_icon_scale" format="float" />
        <!--圆弧的角度-->
        <attr name="lv_arc_degree" format="integer" />
        <!--是否自动旋转，无需人工控制，默认是true-->
        <attr name="lv_auto" format="boolean" />
        <!--是否单弧旋转，默认false-->
        <attr name="lv_arc_single" format="boolean" />
    </declare-styleable>

2.ProgressBar

 <ProgressBar
            android:id="@+id/arc_loading"
            android:layout_width="26dp"
            android:layout_height="26dp"
            android:layout_marginLeft="15dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:indeterminateDrawable="@drawable/bar" />

1.bar.xml 自己填充颜色

<?xml version="1.0" encoding="utf-8"?>
<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="360">
    <shape
        android:innerRadiusRatio="3"
        android:shape="ring"
        android:thicknessRatio="10"
        android:useLevel="false">
        <gradient
            android:centerY="0.5"
            android:endColor="#FFFFFF" //结束的颜色
            android:startColor="#10FFFFFF" //开始的颜色
            android:type="sweep"
            android:useLevel="false" />
    </shape>
</animated-rotate>

2、设置图片 

一 首相在drawable文件夹中建立如下旋转动画文件

<?xml version="1.0" encoding="utf-8"?>
<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"    
    android:drawable="@drawable/loading1"    
    android:pivotX="50%"    
    android:pivotY="50%" />

其中loading1即为您想用的图片

二 在布局文件中设置progressbar

<ProgressBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
         android:indeterminateDrawable="@drawable/progressbg"
         android:indeterminateOnly="true"
         android:indeterminateBehavior="repeat"
    
       />

参考：android画笔,Android自定义View系列之画笔（一）_Gaosaroma的博客-CSDN博客

           Android编程之ProgressBar圆形进度条颜色设置方法 / 张生荣

          XUI

卷心菜的媛
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android自定义带加载动画效果的环状进度条
08-28
主要介绍了Android自定义带加载动画效果的环状进度条，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
android 画圆环进度条,Android自定义圆形进度条学习
weixin_30000283的博客
06-07 1091
Android中圆形进度条的应用还是挺多的，最近学习实现了圆形进度条。RingProgressBarmeizu style思路要实现圆形进度条，首先要画灰色背景圆环再画蓝色进度圆环再画进度数字搞定。首先自定义各种属性初始化各种属性TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.RingProgres...
【Android进度条】三种方式实现自定义圆形进度条ProgressBar
mmdev
03-29 371
一、通过动画实现定义res/anim/loading.xml如下：&lt;?xml version="1.0" encoding="UTF-8"?&gt; &lt;animation-list android:oneshot="false" xmlns:android="http://schemas.android.com/apk/res/android"&gt; &lt;item
Android 自定义圆形进度条带图片旋转
xiaxiangnanxp1989的专栏
03-16 1025
由于需求需要做一个圆形进度条并且中间填充的是圆形图片并且能有旋转，找了一下没找到合适的，所以自己撸一个。 主要思路是两个控件组合起来。 一个自定义画的圆，另一个自定义一个圆形的imageview。 先看一下主布局： <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xml...
Android 自定义圆形进度条
Black_Hao的博客
05-23 983
自定义的圆形progressBar可以设置背景色，进度条颜色、宽度，进度百分比的值、颜色、大小。
NumberProgress:自定义的环形和水平进度条，重写progressbar
06-21
环形进度条通常用于显示一个圆形的百分比完成状态，而水平进度条则常见于显示线性的任务进度。在`NumberProgress`中，这两种模式都是通过调整`onDraw()`中的绘制代码来实现的。开发者可以通过设置不同的属性，比如`...
android自定义环形进度条ProgressWheel
02-12
环形进度条在许多应用中都有广泛的应用，如加载动画、数据上传下载进度指示等。Android原生系统并没有提供这样的控件，因此开发者通常需要自定义View来实现。在本案例中，`ProgressWheel`是一个实现了环形进度展示...
Android-CircularProgressView一个可以调节颜色和线条粗细的环形进度条控件
08-12
与Android原生的`ProgressBar`不同，它可以改变环形进度条的颜色，这使得开发者能够更好地匹配应用的主题或者创建更吸引人的视觉效果。通过设置不同的颜色值，你可以实现动态变化的颜色效果，例如渐变色或者根据进度...
自定义进度条
05-26
1. 动态加载效果：例如环形进度条、水平滚动进度条、水波纹进度条等，这些可以通过CSS3动画或JavaScript实现。 2. 多段进度条：用于显示多个子任务的进度，可以是并行或顺序的。 3. 进度条指示器：除了视觉表示外...
Android 圆形颜色渐变进度条 自定义控件
01-23
首先，我们需要创建一个新的`View`类来继承`ProgressBar`，这是我们自定义进度条的基础。在Java代码中，我们可以定义这个新的类，例如命名为`CircleGradientProgressBar`。在构造函数中，我们可以设置默认属性，如...
自定义加载中圆形进度条
zxf_2016的博客
01-16 325
之前通过ProgressBar实现一个加载中的圆形进度条，因为是ProgressBar自带的旋转效果，在高版本的弹窗中并不是匀速转动的，所以稍作修改，通过rotate旋转动画，实现自定义加载框的效果。 一、rotate动画如下注释详细，不在赘述： &amp;amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;utf-8&amp;quot;?&amp;amp;gt; &amp;am
【游戏客户端】如何实现环形进度条
Lampard的博客
01-24 2312
今天主要是分享如何在cocos制作一个环形的进度条
多式样ProgressBar
iteye_15118的博客
01-22 547
多式样ProgressBar普通圆形ProgressBar该类型进度条也就是一个表示运转的过程，例如发送短信，连接网络等等，表示一个过程正在执行中。一般只要在XML布局中定义就可以了。 &lt;progressBar android:id="@+id/widget43"       android:layout_width="wrap_content"       andr...
android实现圆形的ProgressBar停止转动
maojiangmiao的博客
11-14 3098
圆形的ProgressBar停止转动，禁止加载转动，可以自由设置圆形进度条的进度
android自定义动画平移旋转
9960607的博客
12-21 723
//主方法 public class SplashActivity extends AppCompatActivity { private ProgressBarView pbv; private int progress = 120; private int time = 3; private Handler handler = new Handler(
【Kotlin】使用 ProgressBar 的样式属性来实现圆形进度条，进度使用gradient渐变效果
资深全栈开发工程师
06-20 3049
Android ProgressBar 默认提供了水平和圆形两种进度条，水平进度条通过控件实现，而圆形进度条通过控件实现。如果想要将控件设置为圆形进度条，可以使用的样式属性来实现。首先，在布局文件中添加一个控件，并设置其样式为style在上面的代码中，我们设置了的样式为，并将属性设置为true，表示使用不确定模式。然后，在 styles.xml 文件中，定义一个名为的样式，将其父样式设置为，并将其样式属性设置为一个圆形进度条的 Drawable：
2023-03-18 Android app 用进度条ProgressBar 圆形样式做加载loading效果，旋转动画
海月汐辰
03-18 2062
通过修改thicknessRatio值修改圆边边的粗细。
Android花样loading进度条（二）-简单环形进度条
海阔天空
04-14 9649
背景 Android花样loading进度条系列文章主要讲解如何自定义所需的进度条，包括水平、圆形、环形、圆弧形、不规则形状等。 本篇我们从圆形进度条讲起，讲简单形式的环形进度条，只有进度色彩，没有进度文字，主要是使用Canvas绘制圆和圆弧。 效果 先上图看效果，这里有6个进度条，样式上有微妙区别，基本都属于一个类别的进度条了。 6个进度条基本上分为3类： 背景条与进度条...
Android开发之ProgressBar控件（实现加载动画与条形进度条）
ShadyPi的IT笔记
03-05 5605
实现圆形/条形加载动画与进度条
android progressbar自定义半圆形进度条
最新发布
09-14
要自定义半圆形进度条，我们可以通过继承ProgressBar类，并重写其中的一些方法来实现。 首先，我们需要创建一个自定义的ProgressBar类，并在构造方法中定义一些必要的属性，如进度条的颜色、进度值等。然后，我们...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值