我需要设计这个＆＃34; red＆＃34;百分比圈动态

Question

如何在Android App中创建此设计。 请帮帮我......我需要设计这个＆＃34; red＆＃34;百分比圈动态。

Answer 1

你需要有两个进度条一个在另一个上面，一个有背景颜色，一个有红色。从drawable中的xml中获取它们并将它们提供给android:progressDrawable

可绘制文件夹中的

circle_progress_background.xml如下

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:id="@android:id/progress">
        <shape
            android:innerRadius="@dimen/sixty_dp"
            android:shape="ring"
            android:thickness="@dimen/seven_dp">

            <gradient
                android:startColor="@color/light_gray"
                android:endColor="@color/light_gray"
                android:type="sweep" />   
        </shape>
    </item>
</layer-list>

可绘制文件夹中的

circle_progress_foreground.xml如下

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:id="@android:id/progress">
            <shape
                android:innerRadius="@dimen/sixty_dp"
                android:shape="ring"
                android:thickness="@dimen/seven_dp">

                <gradient
                    android:startColor="@android:color/holo_blue_bright"
                    android:endColor="@android:color/holo_blue_light"
                    android:type="sweep" />   
            </shape>
    </item>
</layer-list>

，布局文件夹中的layout_main.xml如下

<FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <ProgressBar
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:indeterminate="false"
            android:max="100"
            android:progress="100"
            android:progressDrawable="@drawable/circle_progress_background"
            android:rotation="-90" />

        <ProgressBar
            android:id="@+id/circle_progress_bar"
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:indeterminate="false"
            android:max="100"
            android:progressDrawable="@drawable/circle_progress_foreground"
            android:rotation="-90" />
    </FrameLayout>

现在使用活动中的布局如下

package com.example.usingcircletimer;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;
import android.util.Log;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ProgressBar;

public class MainActivity extends Activity {

    private ProgressBar mProgressBar;
    private Handler handler = new Handler();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.layout_main);
        mProgressBar = (ProgressBar) findViewById(R.id.circle_progress_bar);
        Button btn = (Button) findViewById(R.id.btn);

        btn.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                new Thread(new Runnable() {
                    int i = 0;
                    int progressStatus = 0;

                    public void run() {
                        while (progressStatus < 100) {
                            progressStatus += 5;
                            try {
                                Thread.sleep(200);
                            } catch (InterruptedException e) {
                                e.printStackTrace();
                            }

                            // Update the progress bar
                            handler.post(new Runnable() {
                                public void run() {
                                        mProgressBar
                                                .setProgress(progressStatus);
                                    i++;
                                }
                            });
                        }
                    }
                }).start();
            }
        });
    }
}

Answer 2

为此，您需要创建自定义视图并覆盖onDraw方法。

这是一个可以帮助您入门的大纲：

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

    // define mOvalRect to be the rectangle which will contain the circle.
    // define mPaint to the paint with which the circle will be drawn, setting the proper colour

    // define mAnimationPhase to be between 0 & 1, depending on the completion of the circle. 0 means empty circle, 1 means full circle.

    // define START_ANGLE to be the angle at which the circle will start.

    canvas.drawArc(mOvalRect, START_ANGLE, 360f * mAnimationPhase, false, mPaint);
}