Android开发自定义ProgressBar样式

先看效果图：

uploading.png

1、分析，先看左边的加载圈圈ProgressBar

由于它不是进度条，所以得用indeterminateDrawable

<ProgressBar
    android:id="@+id/pr_upload"
    android:layout_width="@dimen/d100px"
    android:layout_height="@dimen/d100px"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    android:layout_margin="@dimen/d48px"
    android:indeterminateDrawable="@drawable/progressbar_uploading"
    />

它的drawable如下：

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

<animated-rotate
xmlns:android="http://schemas.android.com/apk/res/android"
android:pivotX="50%" android:pivotY="50%"
android:fromDegrees="0"
android:toDegrees="360">

<shape
    android:shape="ring"
    android:innerRadiusRatio="3"
    android:thicknessRatio="8"
    android:useLevel="false">
    <gradient
        android:type="sweep"
        android:useLevel="false"
        android:startColor="@color/main_color"
        android:centerColor="@color/c_main_20"
        android:centerY="0.50"
        android:endColor="@color/transparent" />
</shape>

</animated-rotate>

2、中间的进度条，它是横向的

它要配置progressDrawable和横向style

<ProgressBar
    android:id="@+id/pr_upload_value"
    android:layout_width="0dp"
    android:layout_height="@dimen/d10px"
    app:layout_constraintLeft_toLeftOf="@id/tv_uploading"
    app:layout_constraintRight_toLeftOf="@id/ic_close_upload_dialog"
    app:layout_constraintTop_toBottomOf="@id/tv_uploading"
    android:layout_marginTop="@dimen/d16px"
    android:progressDrawable="@drawable/progressbar_upload_value_horizontal"
    android:min="0"
    android:max="100"
    tools:progress="30"
    style="@android:style/Widget.ProgressBar.Horizontal"
    />  

它的drawable如下：

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

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background">
    <shape>
        <corners android:radius="2.5dip" />
        <solid android:color="@color/background"/>

    </shape>
</item>
<item android:id="@android:id/progress">
    <clip>
        <shape>
            <corners android:radius="2.5dip" />
            <solid android:color="@color/c_main"/>
        </shape>
    </clip>
</item>
</layer-list>