Android踩坑日记：自定义水平和圆形ProgressBar样式

Posted 2022-11-30 tuke_tuke

自定义水平和圆形ProgressBar样式

1.自定义水平ProgressBar样式

• ProgressBar分为两种，我们能明确看到进度，不确定的就是不清楚、不确定一个操作需要多长时间来完成，这个时候就需要用的不确定的ProgressBar了。
• ProgressBar（Horizontal　才有，无进度的没有）有两个进度，一个是android:progress，另一个是android:secondaryProgress。后者主要是为缓存需要所涉及的，比如在看网络视频时候都会有一个缓存的进度条以及还要一个播放的进度，在这里缓存的进度就可以是android:secondaryProgress，而播放进度就是android:progress，有了secondProgress，可以很方便定制ProgressBar。

1.ProgressBar的样式设定其实有两种方式，在API文档中说明的方式如下：

• Widget.ProgressBar.Horizontal
• Widget.ProgressBar.Small
• Widget.ProgressBar.Large
• Widget.ProgressBar.Inverse
• Widget.ProgressBar.Small.Inverse
• Widget.ProgressBar.Large.Inverse

使用的时候可以这样：style=”@android:style/Widget.ProgressBar.Horizontal”
另外还有一种方式就是使用系统的attr，下面的方式是系统的style：

• style=”?android:attr/progressBarStyle”
• style=”?android:attr/progressBarStyleHorizontal”
• style=”?android:attr/progressBarStyleInverse”
• style=”?android:attr/progressBarStyleLarge”
• style=”?android:attr/progressBarStyleLargeInverse”
• style=”?android:attr/progressBarStyleSmall”
• style=”?android:attr/progressBarStyleSmallInverse”
• style=”?android:attr/progressBarStyleSmallTitle”

比如：

<ProgressBar
    android:id="@+id/progressBar"
    style="@android:style/Widget.ProgressBar.Horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

ProgressBar
    android:id="@+id/progressBar"
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

我们去看看style=”@android:style/Widget.ProgressBar.Horizontal”　的源码

 <style name="Widget.ProgressBar.Horizontal">
        <item name="indeterminateOnly">false</item>
        <!-- 进度条的背景，progress ,secondaryProgress 的颜色-->
        <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>

下面看@android: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>

三个条目，对应了background，progress，secondaryProgress。所以只需要修改对应项就可以了，如下在drawable文件中创建一个　progressbar_horizontal_custom.xml
所以其实我们要修改样式的话只需要修改android:progressDrawable”对应的资源就可以

<item name="android:progressDrawable">@drawable/progressbar_horizontal</item><!-- progress_horizontal -->

video_view_bottom_progressbar_background.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"
        android:height="2dp"
        android:gravity="center">
        <shape>
            <size android:height="2dp"/>
            <corners android:radius="1dp" />
            <solid android:color="#dcdcdc"/>

        </shape>
    </item>

    <item android:id="@android:id/secondaryProgress"
        android:height="2dp"
        android:gravity="center">
        <clip >
            <shape>
                <size android:height="2dp"/>
                <corners android:radius="5dp" />
                <solid android:color="@android:color/darker_gray"/><!--darker_gray-->
            </shape>
        </clip>
    </item>

    <item android:id="@android:id/progress"
        android:height="2dp"
        android:gravity="center">
        <clip >
            <shape>
                <size android:height="2dp"/>
                <corners android:radius="5dp" />
                <solid android:color="#FF455B"/>
            </shape>
        </clip>
    </item>
</layer-list>

在布局文件xml中使用：

<ProgressBar
        android:id="@+id/pb_video_bottom_progress"
        style="@android:style/Widget.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:max="100"
        android:maxHeight="2dp"
        android:minHeight="2dp"
        android:progressDrawable="@drawable/video_view_bottom_progressbar_background"
        android:visibility="visible" />

总结：

1. 使用style=”@android:style/Widget.ProgressBar.Horizontal”
2. 重新自自定android:progressDrawable

2.自定义圆形ProgressBar样式

比如

<ProgressBar
    android:id="@+id/progressBar"
    style="@android:style/Widget.ProgressBar.Small"
    android:layout_gravity="center_vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

我们先看Widget.Progress的源码：

<style name="Widget.ProgressBar.Small">
        <!--圆形背景-->
        <item name="indeterminateDrawable">@drawable/progress_small_white</item>
        <item name="minWidth">16dip</item>
        <item name="maxWidth">16dip</item>
        <item name="minHeight">16dip</item>
        <item name="maxHeight">16dip</item>
    </style>

@drawable/progress_small_white的源码：

<animated-rotate 
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:drawable="@drawable/spinner_white_48"
   android:pivotX="50%"
   android:pivotY="50%"
   android:framesCount="12"
   android:frameDuration="100" />

发现其实就是一个不断重复的旋转动画是spinner_white_48的图片，所以我们只需要自定义name=”indeterminateDrawable”的属性，自定义自己的drawable使用animated-rotate 标签即可
总结：
1.修改indeterminateDrawable属性，编写animated-rotate 标签的drawable，替换系统的