Android基础控件——ProgressBar自定义的介绍、动画效果实现、附加三个漂亮的进度条

ProgressBar自定义的介绍、动画效果实现、附加三个漂亮的进度条

shape属性介绍：

corners 圆角   gradient 渐变   padding 内容离边界距离   size 大小   solid 填充颜色   stroke 描边

gradient 属性介绍：

android:startColor：颜色渐变的开始颜色。
android:endColor：颜色渐变的结束颜色。
android:centerColor：颜色渐变的中间颜色，主要用于多彩。

android:centerX：(0 - 1.0) 相对X的渐变位置。
android:centerY：(0 - 1.0) 相对Y的渐变位置。  
这两个属性只有在type不为linear情况下起作用。

android:angle：当设置填充颜色后，无渐变效果。
angle的值必须是45的倍数（包括0），仅在type="linear"有效，不然会报错。

属性介绍演示图：

angle对应值的起点如图

xml文件：

<item android:id="@android:id/background">
        <shape>
            <corners android:radius="5dip" />
            <gradient
                android:centerColor="#00ff00"
                android:endColor="#0000ff"
                android:startColor="#ff0000" />
        </shape>
</item>

angle效果图[演示从0-45-90-135-180]（为了更好的理解）

centerX效果图[演示从0-0.2-0.4-0.6-0.8-1.0]（为了更好的理解）

步骤一：创建出drawable的xml文件

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="5dip" />
            <stroke android:color="#f6f1f7" />
        </shape>
    </item>

    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="5dip" />
                <gradient
                    android:centerColor="#88ff3939"
                    android:endColor="#50ff3939"
                    android:startColor="#90ff3939" />
            </shape>
        </clip>
    </item>

    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="5dip" />
                <gradient
                    android:centerColor="#88221e12"
                    android:endColor="#50221e12"
                    android:startColor="#90221e12" />
            </shape>
        </clip>
    </item>

</layer-list>

步骤二：在layout的xml文件中使用

<ProgressBar
        android:id="@+id/pb"
        style="@style/Base.Widget.AppCompat.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:progressDrawable="@drawable/custom_download_progress_bar" />

步骤三：查看效果图

步骤四：动画效果实现（这里使用indeterminateDrawable这个属性）

准备一组图片，在drawable\xml中：

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <item
        android:drawable="@drawable/app_refresh_people_0"
        android:duration="200" />
    <item
        android:drawable="@drawable/app_refresh_people_1"
        android:duration="200" />
    <item
        android:drawable="@drawable/app_refresh_people_2"
        android:duration="200" />
    <item
        android:drawable="@drawable/app_refresh_people_3"
        android:duration="200" />
</animation-list>

在layout\xml文件中：

 <ProgressBar
        style="?android:attr/progressBarStyle"
        android:layout_width="98dp"
        android:layout_height="146dp"
        android:layout_centerInParent="true"
        android:indeterminate="false"
        android:indeterminateDrawable="@drawable/custom_animation_progress_bar" />

效果图：

步骤五：附加三个漂亮的进度条

先看效果图：

三个drawable的xml文件：

orange

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="10dp" />
            <solid android:color="#DD541C" />
        </shape>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="10dip" />
                <solid android:color="#F9FFFF" />
            </shape>
        </clip>
    </item>
</layer-list>

red

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="10dp" />
            <solid android:color="#D91A36" />
        </shape>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="10dip" />
                <solid android:color="#F9FFFF" />
            </shape>
        </clip>
    </item>
</layer-list>

blue

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="10dp" />
            <solid android:color="#1691AB" />
        </shape>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="10dip" />
                <solid android:color="#F9FFFF" />
            </shape>
        </clip>
    </item>
</layer-list>

三个在layout的xml文件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:background="#F07C4E"
        android:orientation="horizontal"
        android:padding="8dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:background="#DB551D"
            android:paddingBottom="8dp"
            android:paddingLeft="16dp"
            android:paddingRight="16dp"
            android:paddingTop="8dp"
            android:text="18%"
            android:textColor="#ffffff"
            android:textSize="16dp" />

        <ProgressBar
            style="@style/Base.Widget.AppCompat.ProgressBar.Horizontal"
            android:layout_width="match_parent"
            android:layout_height="22dp"
            android:layout_gravity="center_vertical"
            android:paddingBottom="6dp"
            android:paddingLeft="12dp"
            android:paddingRight="12dp"
            android:paddingTop="6dp"
            android:progress="18"
            android:progressDrawable="@drawable/custom_orange_progress_bar" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:background="#F14E69"
        android:orientation="horizontal"
        android:padding="8dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:background="#DA1C38"
            android:paddingBottom="8dp"
            android:paddingLeft="16dp"
            android:paddingRight="16dp"
            android:paddingTop="8dp"
            android:text="62%"
            android:textColor="#ffffff"
            android:textSize="16dp" />

        <ProgressBar
            style="@style/Base.Widget.AppCompat.ProgressBar.Horizontal"
            android:layout_width="match_parent"
            android:layout_height="22dp"
            android:layout_gravity="center_vertical"
            android:paddingBottom="6dp"
            android:paddingLeft="12dp"
            android:paddingRight="12dp"
            android:paddingTop="6dp"
            android:progress="62"
            android:progressDrawable="@drawable/custom_red_progress_bar" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:background="#4ED9EC"
        android:orientation="horizontal"
        android:padding="8dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:background="#1DBADB"
            android:paddingBottom="8dp"
            android:paddingLeft="16dp"
            android:paddingRight="16dp"
            android:paddingTop="8dp"
            android:text="47%"
            android:textColor="#ffffff"
            android:textSize="16dp" />

        <ProgressBar
            style="@style/Base.Widget.AppCompat.ProgressBar.Horizontal"
            android:layout_width="match_parent"
            android:layout_height="22dp"
            android:layout_gravity="center_vertical"
            android:paddingBottom="6dp"
            android:paddingLeft="12dp"
            android:paddingRight="12dp"
            android:paddingTop="6dp"
            android:progress="47"
            android:progressDrawable="@drawable/custom_blue_progress_bar" />

    </LinearLayout>
</LinearLayout>