安卓中的饼状进度条

Question

您好，我想在Android中制作一个饼形进度条，就像附图所示。

我已经尝试了以下代码，但没有获得成功。点击此处查看链接

因此，我决定编写自己的ProgressBarView。这是我的样本代码...

public class PieProgressView extends View {

private float mProgress;

private int MAX_ANGLE = 360;


public PieProgressView(Context context) {
    super(context);
}

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

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



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

}

public void setProgress(int progress){
    mProgress = (float) ((float)progress*3.6);
    invalidate();
}

private void drawOval(Canvas canvas){
    canvas.drawColor(Color.CYAN);
    Paint paint = new Paint();
    // smooths
    paint.setStyle(Paint.Style.FILL);
    paint.setColor(Color.RED);
    RectF oval2 = new RectF(50, 50, 500, 500);
    canvas.drawOval(oval2, paint);// opacity

    Paint p = new Paint();
    p.setColor(Color.BLACK);
    canvas.drawArc(oval2, 270, mProgress, true, p);
    System.out.println("drawOval Progress == "+mProgress);


    //p.setAlpha(0x80); //
}

我需要从中调用活动类，这里是相关的IT技术内容。

并且我从中调用了活动类。

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

    button = (Button)findViewById(R.id.button);
    pieProgressView = (PieProgressView)findViewById(R.id.pieprogress);

    button.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            fillProgress();
        }
    });

}

private void fillProgress(){
    for(int i=0;i<100 ; i++) {

            pieProgressView.setProgress(i);
            try {
                Thread.sleep(1000);
            } catch (InterruptedException e) {
                e.printStackTrace();

        }
    }
}

现在，在这个 for 循环中没有显示任何进度，但是在循环完成后，它将显示进度条，就像附图所示的黑色进度条一样。

有人能告诉我这段代码的问题在哪里吗？为什么这段代码不能持续更新？

- nitin tyagi

---

setProgress() 这个函数独立使用时是否正常工作？ - An SO User

@LittleChild，如果不使用循环，它是可以正常工作的，但是当我运行循环时，它只会在循环完成后进行更新。 实际上，在我的应用程序中，我正在从服务器下载一些文件，并且我希望以这种方式显示进度对话框。 因此，我使用for循环来连续更新视图。 - nitin tyagi

Answer 1

我像这样实现它：

<ProgressBar
        android:id="@+id/pr_progress_in_circle"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:indeterminate="false"
        android:max="100"
        android:progress="60"
        android:progressDrawable="@drawable/progress"
        android:rotation="-90" />

进度.xml文件的位置

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">


    <item
        android:bottom="@dimen/dimen_2"
        android:left="@dimen/dimen_2"
        android:right="@dimen/dimen_2"
        android:top="@dimen/dimen_2">
        <shape android:shape="oval">
            <solid android:color="@color/grey_lighter" />
            <stroke android:color="@android:color/transparent" />
        </shape>
    </item>
    <item>
        <shape
            android:innerRadiusRatio="100"
            android:shape="ring"
            android:thicknessRatio="2.5"
            android:useLevel="true">
            <gradient
                android:centerColor="@color/orange_above_avg"
                android:endColor="@color/orange_above_avg"
                android:startColor="@color/orange_above_avg"
                android:type="sweep"
                android:useLevel="false" />
        </shape>
    </item>


</layer-list>

你可以通过测试来验证它

        mProgressBar.setMax(totalQuestions);
        mProgressBar.setProgress(correctQuestion);

或者使用这个库

- Zar E Ahmer

Answer 2

Thread.sleep( ) 导致 UI 线程阻塞，因此当线程唤醒时，您会看到“填充”饼图。我将代码更改为使用 CountDownTimer，现在它像魔术一样工作了。这是代码：

public class MainActivity extends AppCompatActivity {
    PieProgressView pie;
    CountDownTimer timer;
    int progress = 1;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        pie = (PieProgressView) findViewById(R.id.pie);
        scheduleNextTimer();
    }

    private CountDownTimer getTimer(){
        return new CountDownTimer(1000,1000) {
            @Override
            public void onTick(long millisUntilFinished) {

            }

            @Override
            public void onFinish() {
                Log.d("PROG",progress + "");
                pie.setProgress( progress++ );
                scheduleNextTimer();
            }
        };
    }

    private void scheduleNextTimer(){
        if( progress < 100 ){
            timer = getTimer();
            timer.start();
        }
    }
}

- An SO User

---

你的解决方案很好用，这只是我的一个小错误。非常感谢。 - nitin tyagi

Answer 3

尝试使用此代码片段作为进度绘制：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@android:id/background"
        android:bottom="3dp"
        android:left="3dp"
        android:right="3dp"
        android:top="3dp">
        <shape android:shape="oval">
            <solid android:color="@color/transparent" />
        </shape>
    </item>
    <item android:id="@android:id/progress">
        <shape
            android:innerRadiusRatio="100"
            android:shape="ring"
            android:thicknessRatio="2.5"
            android:useLevel="true">
            <solid
                android:color="@color/dark_black_half_transparent"
                android:useLevel="false" />
        </shape>
    </item>

</layer-list>

你可以通过这个变化来选择进度是顺时针还是逆时针。

  android:scaleX="-1"

你的布局中进度条应该像这样：

 <ProgressBar
        android:id="@+id/progressbar"
        style="?android:progressBarStyleHorizontal"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:progress="@{viewModel.progressUpload}"
        android:max="100"
        android:rotation="90"
        android:scaleX="-1"
        android:progressDrawable="@drawable/custom_progressbar_drawable"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

- Rami