如何在Android中创建一个在其上旋转的圆形进度条?

Posted

技术标签:

【中文标题】如何在Android中创建一个在其上旋转的圆形进度条?【英文标题】:How to Create a circular progressbar in Android which rotates on it? 【发布时间】:2014-02-15 12:25:24 【问题描述】:

我正在尝试创建一个圆形进度条。这就是我想要实现的目标

有一个灰色的背景环。在它上面,会出现一个蓝色进度条,它在 60 秒或任何秒数内以从 0 到 360 的圆形路径移动。

这是我的示例代码。

<ProgressBar
            android:id="@+id/ProgressBar"
            android:layout_
            android:layout_
            style="?android:attr/progressBarStyleLarge"
            android:indeterminateDrawable="@drawable/progressBarBG"
            android:progress="50"
            />

为此,在可绘制的“progressBarBG”中,我创建了一个图层列表,并在该图层列表中给出了两个项目,如图所示。

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background">
    <shape
            android:shape="ring"
            android:innerRadius="64dp"
            android:thickness="8dp"
            android:useLevel="false">

        <solid android:color="@color/grey" />
    </shape>
</item>

<item android:id="@android:id/progress">
    <clip>
        <shape
                android:shape="ring"
                android:innerRadius="64dp"
                android:thickness="8dp"
                android:useLevel="false">

            <solid android:color="@color/blue" />
        </shape>
    </clip>
</item>

现在,第一个灰色环生成良好。然而,蓝色环从可绘制对象的左侧开始并向右移动,就像线性进度条的工作方式一样。这就是进度 50% 时的显示方式,红色箭头指示方向。

我想按预期在圆形路径中移动蓝色进度条。

【问题讨论】:

我在发布这个问题之前看过。我找到了一些答案,但它们不适用于我想要实现的目标。也许有人认为这是重复的帖子而对我投了反对票。 我认为您需要一个定制的解决方案。 ProgressBar,当不处于不确定模式时,使用可绘制的剪辑来剪辑可绘制的进度层。但是剪辑可绘制对象只能水平或垂直工作,而不是角楔。我认为您必须创建 Drawable 的子类来绘制跨越getLevel()*360 度的弧。然后,由于您不能在 xml drawable 中使用自定义视图,因此您必须将 ProgressBar 子类化,以便它直接使用您的自定义 Drawable。 查看这篇文章:***.com/questions/12776587/… 也许这可以为您指明正确的方向github.com/grmaciel/two-level-circular-progress-bar 你可以使用这个库github.com/emre1512/CircleProgressBar 【参考方案1】:

这是我的两个解决方案。

简答:

我没有创建layer-list,而是将其分成两个文件。一张用于ProgressBar,一张用于其背景。

这是ProgressDrawable 文件(@drawable 文件夹):circular_progress_bar.xml

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="270"
    android:toDegrees="270">
    <shape
        android:innerRadiusRatio="2.5"
        android:shape="ring"
        android:thickness="1dp"
        android:useLevel="true"><!-- this line fixes the issue for lollipop api 21 -->

        <gradient
            android:angle="0"
            android:endColor="#007DD6"
            android:startColor="#007DD6"
            android:type="sweep"
            android:useLevel="false" />
    </shape>
</rotate>

这是针对它的background(@drawable 文件夹):circle_shape.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadiusRatio="2.5"
    android:thickness="1dp"
    android:useLevel="false">

    <solid android:color="#CCC" />

</shape>

最后,在您正在工作的布局内:

<ProgressBar
        android:id="@+id/progressBar"
        android:layout_
        android:layout_
        android:indeterminate="false"
        android:progressDrawable="@drawable/circular_progress_bar"
        android:background="@drawable/circle_shape"
        style="?android:attr/progressBarStyleHorizontal"
        android:max="100"
        android:progress="65" />

结果如下:

长答案:

使用继承android.view.View的自定义视图

这是完整的项目on github

【讨论】:

@Pedram 我应该如何设置进度条的百分比?例如,目前它是 50%。我应该如何将 50% 设置为进度条? @20 Cents,阅读文档,您应该获得对进度条的引用并调用其setProgress 方法,然后传递值。 google.com/… 我疯狂地试图找到正确的值,红色的几十个***主题,只是在这里找到了解决方案..android:fromDegrees="270" android:toDegrees="270"解决了它!非常感谢! @Skynet 是的,我还没有尝试修复它,因为我更喜欢创建一个完全自定义的扩展视图类developer.android.com/training/custom-views/index.html @MimArmand 嘿,谢谢,实际上它在棒棒糖 5.1 更新中再次开始工作,并且该行修复了 api 21 的问题。【参考方案2】:

我已经完成了简单的方法:

请检查屏幕截图是否相同。

CustomProgressBarActivity.java

public class CustomProgressBarActivity extends AppCompatActivity 

    private TextView txtProgress;
    private ProgressBar progressBar;
    private int pStatus = 0;
    private Handler handler = new Handler();

    @Override
    protected void onCreate(Bundle savedInstanceState) 
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_custom_progressbar);

        txtProgress = (TextView) findViewById(R.id.txtProgress);
        progressBar = (ProgressBar) findViewById(R.id.progressBar);

        new Thread(new Runnable() 
            @Override
            public void run() 
                while (pStatus <= 100) 
                    handler.post(new Runnable() 
                        @Override
                        public void run() 
                            progressBar.setProgress(pStatus);
                            txtProgress.setText(pStatus + " %");
                        
                    );
                    try 
                        Thread.sleep(100);
                     catch (InterruptedException e) 
                        e.printStackTrace();
                    
                    pStatus++;
                
            
        ).start();

    

activity_custom_progressbar.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_
    android:layout_
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.skholingua.android.custom_progressbar_circular.MainActivity" >


    <RelativeLayout
        android:layout_
        android:layout_centerInParent="true"
        android:layout_>

        <ProgressBar
            android:id="@+id/progressBar"
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_
            android:layout_
            android:layout_centerInParent="true"
            android:indeterminate="false"
            android:max="100"
            android:progress="0"
            android:progressDrawable="@drawable/custom_progressbar_drawable"
            android:secondaryProgress="0" />


        <TextView
            android:id="@+id/txtProgress"
            android:layout_
            android:layout_
            android:layout_alignBottom="@+id/progressBar"
            android:layout_centerInParent="true"
            android:textAppearance="?android:attr/textAppearanceSmall" />
    </RelativeLayout>



</RelativeLayout>

custom_progressbar_drawable.xml

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="-90"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="270" >

    <shape
        android:shape="ring"
        android:useLevel="false" >
        <gradient
            android:centerY="0.5"
            android:endColor="#FA5858"
            android:startColor="#0099CC"
            android:type="sweep"
            android:useLevel="false" />
    </shape>

</rotate>

希望这会对你有所帮助。

【讨论】:

嗨Hiren,我试图在视图中只显示两种颜色。红色和绿色。但我在圆圈中也看到了一些红色和绿色的混合。我怎样才能删除它?【参考方案3】:

我已经在我的博客demonuts.com 上写了关于circular progress bar in android 的详细示例。您还可以在此处查看完整的源代码和解释。

这是我在没有任何库的纯代码中制作带有圆圈内百分比的圆形进度条的方法。

首先创建一个名为circular.xml的可绘制文件

<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/secondaryProgress">
        <shape
            android:innerRadiusRatio="6"
            android:shape="ring"
            android:thicknessRatio="20.0"
            android:useLevel="true">


            <gradient
                android:centerColor="#999999"
                android:endColor="#999999"
                android:startColor="#999999"
                android:type="sweep" />
        </shape>
    </item>

    <item android:id="@android:id/progress">
        <rotate
            android:fromDegrees="270"
            android:pivotX="50%"
            android:pivotY="50%"
            android:toDegrees="270">

            <shape
                android:innerRadiusRatio="6"
                android:shape="ring"
                android:thicknessRatio="20.0"
                android:useLevel="true">


                <rotate
                    android:fromDegrees="0"
                    android:pivotX="50%"
                    android:pivotY="50%"
                    android:toDegrees="360" />

                <gradient
                    android:centerColor="#00FF00"
                    android:endColor="#00FF00"
                    android:startColor="#00FF00"
                    android:type="sweep" />

            </shape>
        </rotate>
    </item>
</layer-list>

现在在您的activity_main.xml 中添加以下内容:

  <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_
    android:layout_
    android:background="@color/dialog"
    tools:context="com.example.parsaniahardik.progressanimation.MainActivity">

    <ProgressBar

        android:id="@+id/circularProgressbar"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_
        android:layout_
        android:indeterminate="false"
        android:max="100"
        android:progress="50"
        android:layout_centerInParent="true"
        android:progressDrawable="@drawable/circular"
        android:secondaryProgress="100"
        />

    <ImageView
        android:layout_
        android:layout_
        android:background="@drawable/whitecircle"
        android:layout_centerInParent="true"/>

    <TextView
        android:id="@+id/tv"
        android:layout_
        android:layout_
        android:gravity="center"
        android:text="25%"
        android:layout_centerInParent="true"
        android:textColor="@color/colorPrimaryDark"
        android:textSize="20sp" />

</RelativeLayout>

activity_main.xml 中,我使用了一张白色背景的圆形图像来显示百分比周围的白色背景。这是图片:

您可以更改此图像的颜色以设置百分比文本周围的自定义颜色。

现在最后将以下代码添加到MainActivity.java

import android.content.res.Resources;
import android.graphics.drawable.Drawable;
import android.os.Handler;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.animation.DecelerateInterpolator;
import android.widget.ProgressBar;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity 

    int pStatus = 0;
    private Handler handler = new Handler();
    TextView tv;
    @Override
    protected void onCreate(Bundle savedInstanceState) 
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Resources res = getResources();
        Drawable drawable = res.getDrawable(R.drawable.circular);
        final ProgressBar mProgress = (ProgressBar) findViewById(R.id.circularProgressbar);
        mProgress.setProgress(0);   // Main Progress
        mProgress.setSecondaryProgress(100); // Secondary Progress
        mProgress.setMax(100); // Maximum Progress
        mProgress.setProgressDrawable(drawable);

      /*  ObjectAnimator animation = ObjectAnimator.ofInt(mProgress, "progress", 0, 100);
        animation.setDuration(50000);
        animation.setInterpolator(new DecelerateInterpolator());
        animation.start();*/

        tv = (TextView) findViewById(R.id.tv);
        new Thread(new Runnable() 

            @Override
            public void run() 
                // TODO Auto-generated method stub
                while (pStatus < 100) 
                    pStatus += 1;

                    handler.post(new Runnable() 

                        @Override
                        public void run() 
                            // TODO Auto-generated method stub
                            mProgress.setProgress(pStatus);
                            tv.setText(pStatus + "%");

                        
                    );
                    try 
                        // Sleep for 200 milliseconds.
                        // Just to display the progress slowly
                        Thread.sleep(8); //thread will take approx 1.5 seconds to finish
                     catch (InterruptedException e) 
                        e.printStackTrace();
                    
                
            
        ).start();
    

如果你想制作水平进度条,点击这个链接,它有很多有价值的例子和源代码:http://www.skholingua.com/android-basic/user-interface/form-widgets/progressbar

【讨论】:

漂亮漂亮的酒吧!但我不明白你为什么使用 png 图像作为背景,而不是复合可绘制对象,所以这里是:&lt;shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" &gt; &lt;corners android:radius="1dp" /&gt; &lt;solid android:color="@android:color/white" /&gt; &lt;size android:width="250dp" android:height="250dp" /&gt; &lt;/shape&gt;【参考方案4】:

我在 GitHub 上实现了一个开源库 CircularProgressBar,它以最简单的方式完全满足您的需求:

用法

要制作圆形 ProgressBar,请在布局 XML 中添加 CircularProgressBar 并在投影仪中添加 CircularProgressBar 库,或者您也可以通过 Gradle 获取它:

compile 'com.mikhaellopez:circularprogressbar:1.0.0'

XML

<com.mikhaellopez.circularprogressbar.CircularProgressBar
    android:layout_
    android:layout_
    app:background_progressbar_color="#FFCDD2"
    app:background_progressbar_
    app:progressbar_color="#F44336"
    app:progressbar_ />

您必须在 XML 中使用以下属性来更改 CircularProgressBar。

属性:

app:progress(整数)>>默认0 app:progressbar_color(颜色)>>默认黑色 app:background_progressbar_color(颜色)>>默认灰色 app:progressbar_width(尺寸)>>默认7dp app:background_progressbar_width(尺寸)>>默认3dp

JAVA

CircularProgressBar circularProgressBar = (CircularProgressBar)findViewById(R.id.yourCircularProgressbar);
circularProgressBar.setColor(ContextCompat.getColor(this, R.color.progressBarColor));
circularProgressBar.setBackgroundColor(ContextCompat.getColor(this, R.color.backgroundProgressBarColor));
circularProgressBar.setProgressBarWidth(getResources().getDimension(R.dimen.progressBarWidth));
circularProgressBar.setBackgroundProgressBarWidth(getResources().getDimension(R.dimen.backgroundProgressBarWidth));
int animationDuration = 2500; // 2500ms = 2,5s
circularProgressBar.setProgressWithAnimation(65, animationDuration); // Default duration = 1500ms

在此处分叉或下载此库 >> https://github.com/lopspower/CircularProgressBar

【讨论】:

我试试这个,它真的很棒,但现在发现任何动画更改监听器。你知道吗? @lopez.mikhael 嘿,您知道如何在圆形之间添加图像吗? @DeniseTan 你可以简单地使用 FrameLayout 或 RelativeLayout 来做到这一点。【参考方案5】:

借助材质组件库,您可以使用 CircularProgressIndicator

类似:

<com.google.android.material.progressindicator.CircularProgressIndicator
    app:indicatorColor="@color/...."
    app:trackColor="@color/...."
    app:indicatorSize="64dp"/>

您可以使用这些属性:

indicatorSize:定义圆形进度条的半径 trackColor:进度轨迹的颜色。如果未定义,它将设置为 indicatorColor 并应用主题中的 android:disabledAlphaindicatorColor:在确定/不确定模式下用于指标的单一颜色。默认使用主题原色

使用progressIndicator.setProgressCompat((int) value, true); 更新指标中的值。

注意:至少需要1.3.0-alpha04的版本。

【讨论】:

所需的库依赖是什么? @bikram google 提供的Material Components library。 我在 build.gradle 中添加了实现 'com.google.android.material:material:1.1.0' 但 ProgressIndicator 仍然没有出现。 @bikram 如答案所述:它至少需要版本1.3.0-alpha01【参考方案6】:

这是一个简单的自定义视图,用于显示圆圈进度。您可以修改和优化更多以适合您的项目。

class CircleProgressBar @JvmOverloads constructor(
        context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) 
    private val backgroundWidth = 10f
    private val progressWidth = 20f

    private val backgroundPaint = Paint().apply 
        color = Color.LTGRAY
        style = Paint.Style.STROKE
        strokeWidth = backgroundWidth
        isAntiAlias = true
    

    private val progressPaint = Paint().apply 
        color = Color.RED
        style = Paint.Style.STROKE
        strokeWidth = progressWidth
        isAntiAlias = true
    

    var progress: Float = 0f
        set(value) 
            field = value
            invalidate()
        

    private val oval = RectF()
    private var centerX: Float = 0f
    private var centerY: Float = 0f
    private var radius: Float = 0f

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) 
        centerX = w.toFloat() / 2
        centerY = h.toFloat() / 2
        radius = w.toFloat() / 2 - progressWidth
        oval.set(centerX - radius,
                centerY - radius,
                centerX + radius,
                centerY + radius)
        super.onSizeChanged(w, h, oldw, oldh)
    

    override fun onDraw(canvas: Canvas?) 
        super.onDraw(canvas)
        canvas?.drawCircle(centerX, centerY, radius, backgroundPaint)
        canvas?.drawArc(oval, 270f, 360f * progress, false, progressPaint)
    

使用示例

xml

<com.example.androidcircleprogressbar.CircleProgressBar
    android:id="@+id/circle_progress"
    android:layout_
    android:layout_ />

科特林

class MainActivity : AppCompatActivity() 
    val TOTAL_TIME = 10 * 1000L

    override fun onCreate(savedInstanceState: Bundle?) 
        ...

        timeOutRemoveTimer.start()
    

    private var timeOutRemoveTimer = object : CountDownTimer(TOTAL_TIME, 10) 
        override fun onFinish() 
            circle_progress.progress = 1f
        

        override fun onTick(millisUntilFinished: Long) 
            circle_progress.progress = (TOTAL_TIME - millisUntilFinished).toFloat() / TOTAL_TIME
        
    

结果

【讨论】:

谢谢,这工作正常,一件事我可以手动完成进度 如何禁用背景布局,因为它表现得像透明【参考方案7】:

我是新人,所以我无法发表评论,但我想分享一下这个懒惰的修复。我也使用 Pedram 的原始方法,只是遇到了同样的 Lollipop 问题。但是在另一篇文章中的alanv 有一个单行修复。它是 API21 中的某种错误或疏忽。从字面上看,只需将 android:useLevel="true" 添加到您的圈子进度 xml 中。 Pedram 的新方法仍然是正确的修复方法,但我只是认为我也分享了惰性修复方法。

【讨论】:

【参考方案8】:

尝试此方法创建位图并将其设置为图像视图。

private void circularImageBar(ImageView iv2, int i) 


    Bitmap b = Bitmap.createBitmap(300, 300,Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(b); 
    Paint paint = new Paint();

        paint.setColor(Color.parseColor("#c4c4c4"));
        paint.setStrokeWidth(10);
        paint.setStyle(Paint.Style.STROKE);
        canvas.drawCircle(150, 150, 140, paint);

        paint.setColor(Color.parseColor("#FFDB4C"));
        paint.setStrokeWidth(10);   
        paint.setStyle(Paint.Style.FILL);
        final RectF oval = new RectF();
        paint.setStyle(Paint.Style.STROKE);
        oval.set(10,10,290,290);

        canvas.drawArc(oval, 270, ((i*360)/100), false, paint);
        paint.setStrokeWidth(0);    
        paint.setTextAlign(Align.CENTER);
        paint.setColor(Color.parseColor("#8E8E93")); 
        paint.setTextSize(140);

        canvas.drawText(""+i, 150, 150+(paint.getTextSize()/3), paint); 

        iv2.setImageBitmap(b);

【讨论】:

【参考方案9】:

@Pedram,您的旧解决方案在棒棒糖中实际上也可以正常工作(并且比新解决方案更好,因为它可以在任何地方使用,包括在远程视图中)只需将您的 circular_progress_bar.xml 代码更改为:

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="270"
    android:toDegrees="270">
    <shape
        android:innerRadiusRatio="2.5"
        android:shape="ring"
        android:thickness="1dp"
        android:useLevel="true"> <!-- Just add this line -->
        <gradient
            android:angle="0"
            android:endColor="#007DD6"
            android:startColor="#007DD6"
            android:type="sweep"
            android:useLevel="false" />
    </shape>
</rotate>

【讨论】:

android:useLevel="true" 好评!!!您帮助我解决了 Android 5 上的重要问题!非常感谢!【参考方案10】:

https://github.com/passsy/android-HoloCircularProgressBar 是执行此操作的库的一个示例。正如 Tenfour04 所说,它必须是有点自定义的,因为它不支持直接开箱即用。如果这个库的行为不像你希望的那样,你可以分叉它并修改细节以使其符合你的喜好。如果您实现了其他人可以重用的东西,您甚至可以提交拉取请求以将其重新合并!

【讨论】:

我也看到了这个库,但不想只为这个小任务使用另一个第三方库。但是,我将尝试您和Tenfour04提到的两种方法,看看哪种方法适合我并在这里回复。 @SauravSrivastava:我也在我的应用程序中寻找类似的动画。你找到解决方案了吗?如果是,请分享解决方案。 @Travis 请看这个问题 - ***.com/questions/44801280/…【参考方案11】:
package com.example.ankitrajpoot.myapplication;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.ProgressBar;


public class MainActivity extends Activity 

    private ProgressBar spinner;
    @Override
    protected void onCreate(Bundle savedInstanceState) 
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        spinner=(ProgressBar)findViewById(R.id.progressBar);
        spinner.setVisibility(View.VISIBLE);
    

xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/loadingPanel"
android:layout_
android:layout_
android:gravity="center">

<ProgressBar
    android:id="@+id/progressBar"

    android:layout_
    style="?android:attr/progressBarStyleLarge"
    android:layout_
    android:indeterminateDrawable="@drawable/circular_progress_bar"
    android:indeterminate="true" />
</RelativeLayout>





<?xml version="1.0" encoding="utf-8"?>
<rotate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:pivotX="50%"
    android:pivotY="50%"
    android:fromDegrees="0"
    android:toDegrees="1080">
    <shape
        android:shape="ring"
        android:innerRadiusRatio="3"
        android:thicknessRatio="8"
        android:useLevel="false">

        <size
            android:
            android: />

        <gradient
            android:type="sweep"
            android:useLevel="false"
            android:startColor="@android:color/transparent"
            android:endColor="#1e9dff"
            android:angle="0"
            />

    </shape>
</rotate>

【讨论】:

您应该考虑添加对建议解决方案的描述。【参考方案12】:

好消息是material design library 现在也支持确定循环进度条:

<com.google.android.material.progressindicator.CircularProgressIndicator
    android:layout_
    android:layout_ />

有关此的更多信息,请参阅here。

【讨论】:

【参考方案13】:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_
    android:layout_>
    <ProgressBar
        android:id="@+id/progress_circular_id"
        android:layout_
        android:layout_
        android:layout_centerInParent="true"
        android:indeterminate="false"
        android:progress="30"
        android:progressDrawable="@drawable/circular_progress_bar"
        android:background="@drawable/circle_shape"
        style="?android:attr/progressBarStyleHorizontal"
        android:max="100">
    </ProgressBar>
    <TextView
        android:id="@+id/textview_progress_status_id"
        android:layout_
        android:layout_
        android:text="50%"
        android:layout_centerInParent="true"
        android:textStyle="bold"
        android:textColor="@color/blue"
        android:textSize="35dp">
    </TextView>

    <Button
        android:id="@+id/check"
        android:layout_
        android:layout_
        android:layout_marginTop="50dp"
        android:text="click me"
        android:textColor="@color/white"
        android:layout_below="@+id/progress_circular_id"
        android:layout_centerHorizontal="true"
        >
    </Button>
</RelativeLayout>

创建一个名为 circle_shape.xml

的可绘制文件
<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadiusRatio="2.5"
    android:thickness="25dp"
    android:useLevel="false">
    <solid android:color="#CCC" />

</shape>

使用 circular_progress_bar.xml

创建一个文件
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="270"
    android:toDegrees="270">
    <shape
        android:innerRadiusRatio="2.5"
        android:shape="ring"
        android:thickness="25dp"
        android:useLevel="true"><!-- this line fixes the issue for lollipop api 21 -->

        <gradient
            android:angle="0"
            android:endColor="#007DD6"
            android:startColor="#007DD6"
            android:type="sweep"
            android:useLevel="false" />
    </shape>
</rotate>

在 java 文件中,例如使用片段。

public class FragmentRegistration extends BaseFragmentHelper 
    View registrationFragmentView;
    ProgressBar progressBar;
    Button button;
    int count=0;
    @Override
    public void onAttachFragment(@NonNull Fragment childFragment) 
        super.onAttachFragment(childFragment);
    

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) 
        super.onCreate(savedInstanceState);
    

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) 
        registrationFragmentView = inflater.inflate(R.layout.new_device_registration, container, false);
        progressBar=(ProgressBar)registrationFragmentView.findViewById(R.id.progress_circular_id);
        button=(Button) registrationFragmentView.findViewById(R.id.check);
        button.setOnClickListener(new View.OnClickListener() 
            @Override
            public void onClick(View v) 
                count=count+10;
                progressBar.setProgress(count);
            
        );
        return registrationFragmentView;
    

    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) 
        super.onActivityCreated(savedInstanceState);
    

    @Override
    public void onStart() 
        super.onStart();
    

    @Override
    public void onResume() 
        super.onResume();
    

    @Override
    public void onDetach() 
        super.onDetach();
    

    @Override
    public void onDestroy() 
        super.onDestroy();
    

    @Override
    public void onDestroyView() 
        super.onDestroyView();
    

【讨论】:

【参考方案14】:

改变

android:useLevel="false"

android:useLevel="true"

第二次使用id="@android:id/progress sahpe

希望有效果

【讨论】:

以上是关于如何在Android中创建一个在其上旋转的圆形进度条?的主要内容,如果未能解决你的问题,请参考以下文章

在 ios sdk 中创建半圆形旋钮

如何在 Android 中创建圆形 ImageView? [复制]

如何在 Vue 组件内创建圆形进度

如何在 Android 中创建类似于“选项卡布局”的圆形数组?

如何在 android 屏幕中创建轮播以显示不同的元素?

在 Qt 中创建旋转进度条