Android - Round ProgressBar从错误的地方开始

时间:2014-12-05 23:39:56

标签: android progress-bar

我试图在我的应用中添加一个圆形进度条,我想从圆圈的顶部开始,然后在顶部结束。但是,我尝试角度等的任何事情都不会改变外观。我对Android很新,所以对我很轻松。这是我的代码:

<ProgressBar
    android:id="@+id/progressBar"
    android:layout_width="300dp"
    android:layout_height="300dp"
    android:indeterminate="false"
    android:layout_centerInParent="true"
    android:progressDrawable="@drawable/circular_progress_bar"
    android:background="@drawable/circle_shape"
    style="?android:attr/progressBarStyleHorizontal"
    android:max="100"
    android:progress="30" />

circle_shape.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:innerRadiusRatio="2.5"
android:thickness="6dp"
android:useLevel="false">

<solid android:color="#CCC" />

</shape>

circular_progress_bar.xml

<?xml version="1.0" encoding="utf-8"?>
<clip>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="270"
android:toDegrees="270" >
<shape
    android:innerRadiusRatio="2.5"
    android:shape="ring"
    android:thickness="6dp">
    <gradient
        android:angle="0"
        android:endColor="#38C0F4"
        android:startColor="#38C0F4"
        android:centerColor="#56ccb7"
        android:type="sweep"
        android:useLevel="false" />
</shape>
</rotate>
</clip>

以下是30%进展情况的截图: 30% progress

1 个答案:

答案 0 :(得分:1)

您需要编辑circular_progress_bar.xml

  1. 摆脱剪辑标签
  2. 将[android:useLevel =“true”]添加到形状属性中。 (这是Android 5(21)的新功能)

       
    <rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="270"
    android:toDegrees="270" >
    <shape
        android:innerRadiusRatio="2.5"
        android:shape="ring"
        android:thickness="6dp"
        android:useLevel="true">
        <gradient
            android:angle="0"
            android:endColor="#38C0F4"
            android:startColor="#38C0F4"
            android:centerColor="#56ccb7"
            android:type="sweep"
            android:useLevel="false" />
    </shape>
    </rotate>