首页 > 代码库 > 关于ProgressBar的美化问题

关于ProgressBar的美化问题

2024-10-15 08:42:02   214人阅读

Android自带的ProgressBar事实上也算不上丑陋，可是假设全部的App都使用一个模式的ProgressBar，那么预计用户就要崩溃了，打开不论什么一个App。擦，进度条都一模一样。

。有鉴于此。我们今天就来谈谈ProgressBar的美化问题。学会了ProgressBar的美化。那么SeekBar和RatingBar的美化应该就不在话下了，由于SeekBar和RatingBar都是继承自ProgressBar。OK，废话不多说，我们来进入今天的正题。

进度条Style的两种设置方式

正常情况下。我们在布局文件里加入一个进度条是这样的：

    <ProgressBar
        android:id="@+id/pb1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

显示效果是这样的：

技术分享

这是系统默认的情况。假设有须要。我们能够改动进度条的样式，仅仅需加入一个属性。例如以下：

    <ProgressBar
        android:id="@+id/pb1"
        style="?android:attr/progressBarStyleLarge"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

这个时候显示效果例如以下：

技术分享

毫无疑问。进度条变大了。

style属性就是我们用来设置进度条样式的，这样的设置方式有好几种取值。例如以下：

技术分享

每一种取值都代表一种样式。我就不一一去试了。大家能够自行尝试，依据Google提供给我们的资料，我们知道。给ProgressBar设置style除了这一种方式之外，另一种方式。那就是这样：

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

大家注意看取值的不同。那么这样的方式的显示效果是什么样的呢？看下图：

技术分享

都是转圈，可是非常明显第一个看起来更舒服一些，那么这样的设置方式也有好几种取值，例如以下：

技术分享

每一种取值都代表了一种样式，大家能够自行尝试。

OK，上面是给大家简介了一下Google给我们提供的两种给ProgressBar设置Style的方式，以下我们就要探究怎么样来自己定义Style。

自己定义水平进度条样式

进度条我们能够让它转圈圈。也能够让它水平显示，水平显示我们能够通过以下随意一行代码来让我们的进度条水平显示：

style="@android:style/Widget.ProgressBar.Horizontal"


style="?
android:attr/progressBarStyleHorizontal"

仅仅只是这两行代码显示出来的水平进度条的样式有些许差异罢了。例如以下图：

技术分享

这是Google给我们提供的两种样式，以下我们就要看看如何来自己定义水平进度条的样式。通过自己定义进度条来让我们的App与众不同。要自己定义水平进度条的样式。我们首先要弄明确系统的这个样式是怎么显示出来的，我们追踪

style="@android:style/Widget.ProgressBar.Horizontal"

这行代码所指向的位置，我们看到了这样一个Style：

    <style name="Widget.ProgressBar.Horizontal">
        <item name="android:indeterminateOnly">false</item>
        <item name="android:progressDrawable">@android:drawable/progress_horizontal</item>
        <item name="android:indeterminateDrawable">@android:drawable/progress_indeterminate_horizontal</item>
        <item name="android:minHeight">20dip</item>
        <item name="android:maxHeight">20dip</item>
        <item name="android:mirrorForRtl">true</item>
    </style>
在这个Style中，有一个progressDrawable属性，这个属性事实上就是我们的progressBar显示的样式，我们点击去看一下：

<?
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>
这个里边一共同拥有三个item，这三个item就是progressBar所显示出来的三层，最底层是背景色，第二层是secondaryProgress的颜色。第三层就是我们progress的颜色。看到这些我们就明确了，原来progressBar的样式是在这里设置的。那么我们模仿Google的源代码，自己定义一个样式看看：

<?
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="#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="#EE5C42"
                        android:centerColor="#EE5C42"
                        android:centerY="0.75"
                        android:endColor="#EE5C42"
                        android:angle="270"
                />
            </shape>
        </clip>
    </item>
    
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="5dip" />
                <gradient
                        android:startColor="#EE0000"
                        android:centerColor="#EE0000"
                        android:centerY="0.75"
                        android:endColor="#EE0000"
                        android:angle="270"
                />
            </shape>
        </clip>
    </item>
    
</layer-list>

OK，我仅仅是改动了secondaryProgress的颜色，其它的东西都没有改动。然后我再模仿Google的Style，自己定义一个Style。例如以下：

    <style name="m_progress_bar_style">
        <item name="android:indeterminateOnly">false</item>
        <item name="android:progressDrawable">@drawable/m_progress_horizontal</item>
        <item name="android:indeterminateDrawable">@android:drawable/progress_indeterminate_horizontal</item>
        <item name="android:minHeight">2dip</item>
        <item name="android:maxHeight">2dip</item>
        <item name="android:mirrorForRtl">true</item>
    </style>
OK。这里的Style。我改动了当中的三个值，各自是progressDrawable、minHeight、maxHeight。首先将progressDrawable改动为我自己定义的进度条颜色。然后我考虑到这里的进度条过高，因此我把它的高度改为2dp。这个时候的显示效果例如以下：

技术分享

progress和secondaryProgress的颜色已经被我成功改动为红色和浅红色了。

假设我愿意，我也能够把剩余的灰色改动为其它颜色。事实上。我们能够省略上面一步。直接在布局文件里给progressBar加入progressDrawable属性，例如以下：

    <ProgressBar
        android:id="@+id/pb1"
        style="@android:style/Widget.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="100"
        android:maxHeight="2dp"
        android:minHeight="2dp"
        android:progress="20"
        android:progressDrawable="@drawable/m_progress_horizontal"
        android:secondaryProgress="40" />

这个时候显示效果和上面还是一样的。依据这个特性，我们能够实现以下这样的歌词进度的效果，如图：

技术分享

代码例如以下：

<?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:drawable="@drawable/t1"/>
    <item
        android:id="@android:id/progress"
        android:drawable="@drawable/t2"/>

</layer-list>

事实上就是两张图片：

技术分享

技术分享

OK，这里就是我们对水平进度条样式的一个简单改动，使它更符合我们的审美。

自己定义圆形进度条样式

当我们不知道我们的耗时操作到底要运行多长时间的时候。我们通常都会採用圆形进度条来显示。安卓自带的圆形进度条如第一幅图所看到的，但很多其它情况下我们见到的圆形进度条都比較好看。比方一个小人在跑等等，那么这里我们先来看一个简单的原型进度条。

和上面一样。要想自己定义一个圆形进度条，我们首先得知道android默认的圆形进度条的样式是怎么显示出来的，我们追踪

style="@android:style/Widget.ProgressBar"

这一行代码的源代码，例如以下：

    <style name="Widget.ProgressBar">
        <item name="android:indeterminateOnly">true</item>
        <item name="android:indeterminateDrawable">@android:drawable/progress_medium_white</item>
        <item name="android:indeterminateBehavior">repeat</item>
        <item name="android:indeterminateDuration">3500</item>
        <item name="android:minWidth">48dip</item>
        <item name="android:maxWidth">48dip</item>
        <item name="android:minHeight">48dip</item>
        <item name="android:maxHeight">48dip</item>
        <item name="android:mirrorForRtl">false</item>
    </style>
我们看到这里有一个属性叫做indeterminateDrawable。这个属性事实上决定了圆形进度条的样式，同一时候我们还看到indeterminateBehavior和indeterminateDuration两个属性分别用来设置小圈旋转的模式以及每一圈的旋转时间。那么看到这里我们就明确了该怎么样来改动圆形进度条的样式了吧，我们自己定义一个progressbar_rotate.xml文件，例如以下：

<?
xml version="1.0" encoding="utf-8"?
>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/loading_32dp"
    android:fromDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="359" >

</rotate>
loading_32dp是一张图片。例如以下：

技术分享

我们让这张图片绕自身的中心点旋转。OK，progressbar_rotate.xml文件写好之后。下一步就是自己定义style了，我们能够模仿Widget.ProgressBar来自己定义style，也能够直接在布局文件里设置indeterminateDrawable属性，我採用另外一种方式。代码例如以下：

    <ProgressBar
        android:id="@+id/pb4"
        style="@android:style/Widget.ProgressBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/pb1"
        android:layout_marginTop="20dp"
        android:indeterminateDrawable="@drawable/progressbar_rotate"/>

效果图例如以下：

技术分享

我们看到有一个圆圈在不停的转动。就这么简单。我们自己定义了一个圆形进度条样式。


就是这么简单。



关于ProgressBar的美化问题


联系
我们