【问题标题】:Android: Start the circular progress bar from top (270°)Android:从顶部开始循环进度条(270°)
【发布时间】:2014-06-07 21:19:44
【问题描述】:

我使用以下可绘制的"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>

我已经使用以下代码在我的布局中为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" />

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

progressWheel.setSecondaryProgress(percent);

(使用二级进度,因为绿色应该在环的黑色之上。)

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

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

我尝试将android:angle="270" 放在drawable xml 的渐变标签中,但没有成功。有什么办法可以从顶部开始扫角?

【问题讨论】:

    标签: android android-custom-view android-progressbar


    【解决方案1】:

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

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

    【讨论】:

    • 谢谢。经过一些实验,我发现我需要将 fromDegress 和 toDegrees 设置为 270,这样它就不会旋转并从顶部开始。
    • 您可以只将旋转设置为secondaryProgress项目,不需要第一个。但无论如何,谢谢,我一直在努力解决这个问题。
    • 我可以在 ProgressBar 中设置起始角度吗?
    【解决方案2】:

    感谢@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>
    

    【讨论】:

    • 使用完全相同的教程。当您将次要进度设置为 100% / 无论最大值是什么时,您如何解决整个事情崩溃的问题?
    • 到底是什么问题?即使进度或二次进度达到 100%,我也看不到任何问题。我的上限只有 100 个。
    • 令人讨厌的是,这原来是 Android Studio 中的一个错误,而不是代码问题。
    【解决方案3】:

    您还可以在布局 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" />
    

    【讨论】:

      【解决方案4】:

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

      参考来自这里:circular progress bar android

      首先创建一个名为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>
      

      现在在您的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.xml 中,我使用了一张白色背景的圆形图像来显示百分比周围的白色背景。这是图片:

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

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

      【讨论】:

      • 伙计,你为什么需要那个白色的图像?接受的答案没有解决您的问题吗?
      【解决方案5】:

      我发现一个更简单的解决方案是将视图旋转 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>
      

      【讨论】:

        【解决方案6】:

        将任何视图旋转某个角度的简单解决方案是在 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" />
        

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 2014-05-04
          • 1970-01-01
          • 2014-11-12
          • 1970-01-01
          • 2021-04-17
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多