关于ProgressBar的美化问题

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"/>

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

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" />

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

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

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" />

每一种取值都代表一种样式。我就不一一去试了。大家能够自行尝试，依据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"

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

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" />

这是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>

事实上就是两张图片：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" />

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" />

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"/>

效果图例如以下：

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

就是这么简单。

时间： 2024-07-31 01:31:01

关于ProgressBar的美化问题的相关文章

玩转Android之Drawable的使用

Drawable天天用,可你是否对Drawable家族有一个完整的认知?今天我们就来系统的学习一下Drawable的使用. 1.概述 用过Drawable的筒子都知道Drawable有很多种,有的时候Drawable是一张图片,有的时候Drawable是我们通过颜色构造出来的某种图形.最常见的自己构造的Drawable图形莫过于ShapeDrawable,我们在开发中可能经常需要自己绘制一个矩形.圆形.椭圆等等各种各样的图形.一般来说,Drawable并没大小的概念(虽然可以通过getIntri

android学习ProgressBar的简单使用

android 提供的ProgressBar控件分为两种,一种是不带进度的进度条,一种是带进度的进度条,如果可以计算任务的完成量那么就用带进度条的,如果无法计算任务量,那么就使用不带进度的进度条.ProgressBar如果说只使用系统提供的,那就很简单,就只有那些属性方法,但是感觉比较难得就是ProgressBar的样式,一般做应用都不会直接使用系统提供的,而是在它的额基础上做进一步的美化. ProgressBar的关键属性 android:max 最大值 android:proress 第一进

【幻化万千戏红尘】qianfeng-Android-Day03-RadioButton及RadioGroup的用法、CheckBox、ProgressBar基础学习：

一.RadioButton及RadioGroup的用法[重点]        RadioButton.RadioGroup的常用属性   // 获得选中的RadioButton的id   int checkedRadioButtonId = gender.getCheckedRadioButtonId();        绑定RadioGroup特有监听器   // 监听单选项改变  gender.setOnCheckedChangeListener(new OnCheckedChangeLis

HTML5文件上传组件美化jQuery插件

简要教程 jQuery.filer是一款简单的HTML5文件上传组件美化jQuery插件.它能够完成单文件和多文件的上传,支持文件的拖拽,支持不同的文件格式校验,支持缩略图和图标等,是一款非常实用的文件上传插件.它的特点还有: 对文件上传File Input组件进行美化 支持多文件上传 支持校验文件:大小,扩展名等 支持创建文件的缩略图 每种类型的文件可以自定义图标 可以为缩略图,图标和input自定义模板和主题 可以移出已选择的文件 可以从剪切板粘贴图片 所有的图标在一个字体文件中 支持文件拖

CSS 美化复选框 - 无图片方式

今天和大家分享一个不使用图片美化复选框的方式.来看下效果图吧,如下是3种不同状态下的效果: 一. Html结构 <div class="check-wrap"> <input type="checkbox" class="icheck" id="icheck" /> <label for="icheck" class="ilabel"></lab

美化MFC 之调整静态文本的颜色 字体。 用于添加公司标题 联系方式 口号等数据

很多人都觉得自己的程序的界面不那么美观,往往VC默认产生的对话框比较单调, 因此很多人往往找到很多其它的控件对对话框进行美化修饰, 例如给静态控件设置字体,设置背景颜色等等, 其实这些完全可以由VC自己的WM_CTLCOLOR消息来完成! 一个对话框 假设叫A. 我们可以在他的 WM_CTLCOLOR 里面做一些事情 来达到 ,美化节目的效果. 下面代码就是调整 静态文本的颜色. //对话框 WM_CTLCOLOR 消息的响应函数 //OnCtlColor 这个函数的名字 猜测是 控件 颜色的消

【原创】android——SQLite实现简单的注册登陆（已经美化）

1,Main_activity的xmL配置 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns:tools="http://schemas.android.com/tools" 3 android:layout_width="match_parent" 4 android:layout_height="match_pa

JAVA程序生成ＸＭＬ文件的格式规范化，缩进，美化。

//开始把Document映射到文件 TransformerFactory transFactory = TransformerFactory.newInstance(); Transformer transFormer = transFactory.newTransformer(); transFormer.setOutputProperty(OutputKeys.INDENT, "yes"); //美化缩进!!!!!!!!!! //设置输出结果 DOMSource domSourc

WinFrom ProgressBar控件的使用

在WinForm程序中,大多数情况下我们是知道程序运行所需要的时间或步骤的,比如批量复制文件时文件的数量,数据导出或导入时数据的总行数等等.对于步骤比较确定的操作,如果程序执行过程时间较长,很容易使用BackgroundWorker结合ProgressBar来显示一个实时的进度.相关内容大家可以看我博客中的其它文章,有关如何使用BackgroundWorker和ProgressBar.但是,有的时候我们是不确定程序执行的具体步骤或时长的,比如连接一个远程服务或数据库服务,或者调用一个远程过程或W