Android：从顶部启动圆形进度条（270°）

Android: Start the circular progress bar from top (270°)

提问by Rajkiran

I have defined a circular progress bar using the following drawable "ciruclar_progress_bar.xml"

我使用以下可绘制对象定义了一个圆形进度条 "ciruclar_progress_bar.xml"

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

<item android:id="@android:id/progress">
    <shape
        android:innerRadiusRatio="2.5"
        android:shape="ring"
        android:thicknessRatio="25.0" >
        <gradient
            android:centerColor="@color/gray"
            android:endColor="@color/gray"
            android:startColor="@color/gray"
            android:type="sweep" />
    </shape>
</item>
<item android:id="@android:id/secondaryProgress">
    <shape
        android:innerRadiusRatio="2.5"
        android:shape="ring"
        android:thicknessRatio="25.0" >
        <gradient
            android:centerColor="@color/green"
            android:endColor="@color/green"
            android:startColor="@color/green"
            android:type="sweep" />
    </shape>
</item>

and I have used this drawable for ProgressBarin my layout using the following code

我已经使用ProgressBar以下代码在我的布局中使用了这个 drawable

  <ProgressBar
            android:id="@+id/progressWheel"
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="152dp"
            android:layout_height="152dp"
            android:layout_centerInParent="true"
            android:progress="100"
            android:indeterminate="false"
            android:progressDrawable="@drawable/circular_progress_bar" />

I used following code to show progress on the ProgressBar

我使用以下代码来显示进度 ProgressBar

progressWheel.setSecondaryProgress(percent);

(Used secondary progress because the green color should come on top of the black color of the ring.)

（使用次要进度，因为绿色应该位于戒指的黑色之上。）

This draws the circular ProgressBarwhose starting position is on the right (0°) as shown in the following image

这将绘制ProgressBar起始位置在右侧 (0°)的圆形，如下图所示

I want the progress to start from the top as shown in the following image

我希望进度从顶部开始，如下图所示

I tried putting android:angle="270"in the gradient tag of drawable xml but had no luck. Is there any way I can start the sweep angle from the top?

我尝试放入android:angle="270"drawable xml 的渐变标签，但没有运气。有什么办法可以从顶部开始扫角吗？

回答by Zeba

Try specifying rotation degrees to your progress items.

尝试为您的进度项目指定旋转度数。

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:id="@android:id/progress">
        <rotate
            android:fromDegrees="270"
            android:toDegrees="270"
            android:pivotX="50%"
            android:pivotY="50%" >
            <shape
                android:innerRadiusRatio="2.5"
                android:shape="ring"
                android:thicknessRatio="25.0" >
                <gradient
                    android:centerColor="@color/gray"
                    android:endColor="@color/gray"
                    android:startColor="@color/gray"
                    android:type="sweep" />
            </shape>
        </rotate>
    </item>
    <item android:id="@android:id/secondaryProgress">
        <rotate
            android:fromDegrees="270"
            android:toDegrees="270"
            android:pivotX="50%"
            android:pivotY="50%" >
            <shape
                android:innerRadiusRatio="2.5"
                android:shape="ring"
                android:thicknessRatio="25.0" >
                <gradient
                    android:centerColor="@color/green"
                    android:endColor="@color/green"
                    android:startColor="@color/green"
                    android:type="sweep" />
            </shape>
        </rotate>
    </item>
</layer-list>    

回答by Bojan Kseneman

You can also apply a rotation to your ProgressBar in layout XML. In your case -90° would solve your problem.

您还可以在布局 XML 中对 ProgressBar 应用旋转。在您的情况下，-90° 可以解决您的问题。

    <ProgressBar
        android:id="@+id/progressDemo"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="152dp"
        android:layout_height="152dp"
        android:layout_centerInParent="true"
        android:indeterminate="false"
        android:progress="10"
        android:rotation="-90"
        android:progressDrawable="@drawable/circular_progress_bar" />

回答by Parsania Hardik

Here's how I made circular progressbar with percentage inside circle in pure code without any library.

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

Reference is taken from here : circular progress bar android

参考取自这里：圆形进度条android

first create a drawable file called circular.xml

首先创建一个名为的可绘制文件 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>

Now in your activity_main.xmladd following:

现在在您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>

In activity_main.xmlI have used one circular image with white background to show white background around percentage. Here is the image:

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

You can change color of this image to set custom color around percentage text.

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

Now finally add following code to MainActivity.java:

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

If you want to make horizontal progressbar, follow this link, it has many valuable examples with source code:
http://www.skholingua.com/android-basic/user-interface/form-widgets/progressbar

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

回答by Rajkiran

Thanks to @Zeba I got my answer. For people having the same problem here is the updated circular_progress_bar.xml

感谢@Zeba，我得到了答案。对于有同样问题的人，这里是更新的circular_progress_bar.xml

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

<item android:id="@android:id/progress">
        <shape
            android:innerRadiusRatio="2.5"
            android:shape="ring"
            android:thicknessRatio="25.0" >
            <gradient
                android:angle="120"
                android:centerColor="@color/gray"
                android:endColor="@color/gray"
                android:startColor="@color/gray"
                android:type="sweep" />
        </shape>
</item>
<item android:id="@android:id/secondaryProgress">
    <rotate
        android:fromDegrees="270"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="270" >
        <shape
            android:innerRadiusRatio="2.5"
            android:shape="ring"
            android:thicknessRatio="25.0" >
            <gradient
                android:angle="120"
                android:centerColor="@color/green"
                android:endColor="@color/green"
                android:startColor="@color/green"
                android:type="sweep" />
        </shape>
    </rotate>
</item>

回答by ProBul

A more simple solution I found is rotating the view 270 degrees, setting the inner text to transparent and setting new TextView on top of the circular progress bar with your data-

我发现的一个更简单的解决方案是将视图旋转 270 度，将内部文本设置为透明，并使用您的数据在圆形进度条顶部设置新的 TextView-

<FrameLayout
    android:id="@+id/linearLayout5"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.github.lzyzsd.circleprogress.DonutProgress
        android:id="@+id/donut_progress_lodging"
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:layout_gravity="left|top"
        android:layout_marginLeft="30dp"
        app:donut_text_color="@color/tw__transparent"
        android:rotation="270"
        app:donut_finished_color="#34c6f1"
        app:donut_finished_stroke_width="5dp"
        app:donut_unfinished_color="#276894"
        app:donut_unfinished_stroke_width="5dp" />

  <TextView
        android:layout_width="40dp"
        android:layout_height="wrap_content"
        android:text="0%"
        android:textColor="#ffffff"
        android:layout_marginLeft="55dp"
        android:layout_marginBottom="10dp"
        android:textAlignment="center"
        android:id="@+id/textView_percentage_lodging"
        android:layout_gravity="left|center_vertical" />

</FrameLayout>

回答by Sharath kumar

A simple solution for rotating any view by some angle is giving rotation in XML.

将任何视图旋转某个角度的一个简单解决方案是在 XML 中进行旋转。

<ProgressBar
      android:id="@+id/progress_bar"
      style="?android:attr/progressBarStyleHorizontal"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:max="100"
      android:progress="0"
      android:rotation="-90"
      android:progressDrawable="@drawable/circular" />