我要设计这个＆QUOT;红＆QUOT;个圈动态 [英] I need to design this "red" percentage circle dynamically

问题描述

如何创建这样的设计在Android应用程序。 请帮助me..I需要动态地设计这个红个圈。

How do i create this design in Android App. Please help me..I need to design this "red" percentage circle dynamically.

推荐答案

您需要有两个进度条另一个上方，一个有背景颜色，一个用红色。让他们从XML的绘制，并让他们到安卓progressDrawable

You need to have two progress bars one above the other, one with background color and one with red. Get them from xml in drawable and give them to the android:progressDrawable

circle_progress_background.xml在绘制文件夹如下：

circle_progress_background.xml in drawable folder is as follows

<?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在绘制文件夹如下：

circle_progress_foreground.xml in drawable folder is as follows

<?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如下：

and your layout_main.xml in layout folder is as follows

<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>

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

Now use the layout in activity as follows

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();
            }
        });
    }
}

这篇关于我要设计这个＆QUOT;红＆QUOT;个圈动态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！