Android冒险之旅-11-定制ProgressBar

1. 效果图

2. 基础使用

   <ProgressBar
        android:id="@+id/pb"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/Widget.AppCompat.ProgressBar.Horizontal"
        android:max="100"
        android:progress="50"
        android:secondaryProgress="70"/>

属性	作用
style	默认为圆圈，@style/Widget.AppCompat.ProgressBar.Horizontal设置为水平进度条
max	设置最大进度
progress	第一进度值
secondaryProgress	第二进度值

3. 访问源码

  有时候系统提供的样式并不满足我们的喜好，那么怎么修改呢？由于ProgressBar的样式由style属性决定，我们可以去看看@style/Widget.AppCompat.ProgressBar.Horizontal的源码。
  然后我们发现了这个：

    <style name="Widget.ProgressBar.Horizontal">
        <item name="indeterminateOnly">false</item>
        <item name="progressDrawable">@drawable/progress_horizontal</item>
        <item name="indeterminateDrawable">@drawable/progress_indeterminate_horizontal</item>
        <item name="minHeight">20dip</item>
        <item name="maxHeight">20dip</item>
        <item name="mirrorForRtl">true</item>
    </style>

  最后打开progressDrawable属性的@drawable/progress_horizontal发现了这个：

<?xml version="1.0" encoding="utf-8"?>
<!-- Copyright (C) 2008 The Android Open Source Project

     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.
     You may obtain a copy of the License at

          http://www.apache.org/licenses/LICENSE-2.0

     Unless required by applicable law or agreed to in writing, software
     distributed under the License is distributed on an "AS IS" BASIS,
     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
     See the License for the specific language governing permissions and
     limitations under the License.
-->

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    
    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="5dip" />
            <gradient
                    android:startColor="#ff9d9e9d"
                    android:centerColor="#ff5a5d5a"
                    android:centerY="0.75"
                    android:endColor="#ff747674"
                    android:angle="270"
            />
        </shape>
    </item>
    
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="5dip" />
                <gradient
                        android:startColor="#80ffd300"
                        android:centerColor="#80ffb600"
                        android:centerY="0.75"
                        android:endColor="#a0ffcb00"
                        android:angle="270"
                />
            </shape>
        </clip>
    </item>
    
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="5dip" />
                <gradient
                        android:startColor="#ffffd300"
                        android:centerColor="#ffffb600"
                        android:centerY="0.75"
                        android:endColor="#ffffcb00"
                        android:angle="270"
                />
            </shape>
        </clip>
    </item>
    
</layer-list>

4. 开始修改

  显然的progressDrawable.xml控制进图条具体样式。我们只需要将源码中的progressDrawable.xm复制到到项目中的res/drawable目录下，进行相应的修改即可。

4.1 修改的progressDrawable.xml

<?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="5dip" />
            <gradient
                android:startColor="@color/white"
                android:centerColor="@color/white"
                android:centerY="0.3"
                android:endColor="@color/white"
                android:angle="180"
                />
        </shape>
    </item>

    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="5dip" />
                <gradient
                    android:startColor="@color/green"
                    android:centerColor="@color/green"
                    android:centerY="0.75"
                    android:endColor="@color/green"
                    android:angle="270"
                    />
            </shape>
        </clip>
    </item>

    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="5dip" />
                <gradient
                    android:startColor="@color/blue"
                    android:centerColor="@color/red"
                    android:centerY="0.5"
                    android:endColor="@color/blue"
                    android:angle="180"
                    />
            </shape>
        </clip>
    </item>

</layer-list>

4.2 xml中使用

    <ProgressBar
        android:id="@+id/pbr"
        style="@style/Widget.AppCompat.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:layout_marginStart="32dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="32dp"
        android:progressDrawable="@drawable/layerlist_pbr"
        android:max="100"
        android:progress="50"
        android:secondaryProgress="70"/>

android:progressDrawable="@drawable/layerlist_pbr"
layerlist_pbr就是我修改后的progressDrawable.xml

kee