当前位置: 首页 > 知识库问答 >
问题:

如何在Android中创建一个循环进度条,并在其上旋转?

井嘉胜
2023-03-14

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

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

这是我的示例代码。

<ProgressBar
            android:id="@+id/ProgressBar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            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%的进度显示的方式,红色箭头显示方向。

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

共有3个答案

王成化
2023-03-14

我在我的博客demonuts.com上写了关于android循环进度条的详细示例。你也可以在那里找到完整的源代码和解释。

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

首先创建一个名为圆形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_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/dialog"
    tools:context="com.example.parsaniahardik.progressanimation.MainActivity">

    <ProgressBar

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

    <ImageView
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:background="@drawable/whitecircle"
        android:layout_centerInParent="true"/>

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

</RelativeLayout>

在activity_main中。我使用了一个白色背景的圆形图像来显示百分比周围的白色背景。图片如下:

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

现在,最后将以下代码添加到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

姬念
2023-03-14

我用简单的方法做了:

请检查相同的屏幕截图。

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_width="match_parent"
    android:layout_height="match_parent"
    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_width="wrap_content"
        android:layout_centerInParent="true"
        android:layout_height="wrap_content">

        <ProgressBar
            android:id="@+id/progressBar"
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="250dp"
            android:layout_height="250dp"
            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_width="wrap_content"
            android:layout_height="wrap_content"
            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>

希望这对你有帮助。

壤驷雅达
2023-03-14

以下是我的两个解决方案。

简短的回答:

我没有创建图层列表,而是将其分成两个文件。一个用于ProgressBar,一个用于它的背景。

这是ProgressDrawable文件(@drawable文件夹):circular\u progress\u 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>

这是它的背景(@drawable folder):circle\u 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_width="200dp"
        android:layout_height="200dp"
        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的自定义视图

这是github上的完整项目

 类似资料:
  • 当我的数据从启动屏幕的数据库加载时,我正在使用进度条(圆圈)。我使用了xml中的进度条,使用了它的标记。。。但在活动中,它并不旋转。。。建议帮助。。怎么了?

  • 本文向大家介绍Android Shape属性创建环形进度条,包括了Android Shape属性创建环形进度条的使用技巧和注意事项,需要的朋友参考一下 1,实现效果       2,实现代码: 【1】 shape_drawable.xml 文件  【2】 我们将该自定义环形圈设置给一个旋转动画,并利用该旋转动画自定义成一个环形进度圈的style,最后将该自定义的style赋值给Progress组件

  • 我正在开发一个应用程序,我想在其中显示一个,但我想替换默认的Android。 那么如何自定义呢? 我需要一些图形和动画吗? 我读了下面的帖子,但没能成功: 自定义进度条Android

  • 问题内容: 在创建PDF文件的过程中单击按钮时如何显示进度条,在完成创建文件后如何隐藏进度条? 问题答案: 此代码将使用推荐的AsyncTask来完成您想做的事情! 现在使用以下命令在AsyncTask上方调用 从你的活动课

  • 我想研究一下在Android和Renderscript上创建Renderscript脚本,在过去的一年里,Android-Studio成为谷歌支持Android应用程序开发的唯一IDE。 null 但对我不起作用。 我从找到的某个示例(用于Eclipse)中创建了一个名为“julia.rs”的文件。代码如下: 在java文件中,我想访问新创建的文件,所以我开始编写“scriptc”,并希望它填充所

  • 问题内容: 假设我有一个小型数据库,其中包含三列:“ id1”,“ id2”和“ date”。我在字段“ id1”上建立数据库索引,因为它是一个经常选择的字段(许多选择查询都使用ex来运行:其中“ id1” = 125548)。 在某些特定的查询中,我需要根据未建立索引的表中的“日期”字段对用户的记录进行排序。我的好奇心是如果对日期进行排序操作(基本上是按订单执行的操作)字段将在整个数据库上运行,