`
ch_kexin
  • 浏览: 897724 次
  • 性别: Icon_minigender_2
  • 来自: 青岛
社区版块
存档分类
最新评论

Android ProgressBar 详解 改变 ProgressBar 颜色

 
阅读更多
ProgressBar 很简单就一进度条
默认情况下, 他是圆形的, 
但是它还有另一种 水平长条状的形态
 
同时还需要了解的有:
1. 水平形状的 ProgressBar 是有两个进度的 向我们看到 视频的精度条, 有一个是当前播放的,还有一个是下载的精度
2. ProgressBar 分为确定和不确定的两种, android:indeterminate 为true 表示不确定
3.系统的关于 ProgressBar的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的样式有两种方式:  
1. style="@style/StyleProgressBarMini" 
2.style="?android:attr/progressBarStyleLargeInverse" 
上面两种方式都可以设置PogressBar 的属性,我们在自定ProgressBar的时候一般用的都是第一种
 
下面看看 Android默认的两种 ProgressBar的Style
<style name="Widget.ProgressBar">  
    <item name="indeterminateOnly">true</item>  
    <item name="indeterminateDrawable">@drawable/progress_medium_white</item>  
    <item name="indeterminateBehavior">repeat</item>  
    <item name="indeterminateDuration">3500</item>  
    <item name="minWidth">48dip</item>  
    <item name="maxWidth">48dip</item>  
    <item name="minHeight">48dip</item>  
    <item name="maxHeight">48dip</item>  
    <item name="mirrorForRtl">false</item>  
</style>
 上面是默认的 的Style 是圆形的而且是不确定
<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>
 个是 水平的ProgressBar的 Style
progressDrawable 这个属性是 确定的进度条的属性
indeterminateDrawable 这个事不确定的 进度条的熟悉 
我可以看看 系统默认的 @drawable/progress_horizontal 
<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>
 上面有3个 item background、secondProgress、progress，看名字就能知道其大概作用, 我可以把这份文件copy 一份 就可以自己随心的改动 样式了
下面一份是自己定义的   
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >  
  
    <!-- background -->  
    <item  
        android:id="@android:id/background"  
        android:drawable="@drawable/progress_patch_green">  
    </item>  
    <!-- progress -->  
    <item android:id="@android:id/progress">  
        <clip>  
            <nine-patch android:src="@drawable/progress_patch_galy" />  
        </clip>  
    </item>  
    <!-- second progress -->  
  
    <item android:id="@android:id/secondaryProgress">  
        <clip>  
            <nine-patch android:src="@drawable/progresspatch_blue" />  
        </clip>  
    </item>  
  
</layer-list>
 需要注意的是 上面 .9 图的使用
关于 clip  nine-patch  这些标签, 现在自己页不是很熟悉, 以后会写一篇关于这个的文章
 
如果不用Drawable的画, 只是想单纯的使用颜色该如何处理呢?
尝试过这样:  
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">  
    <item  
        android:id="@android:id/background"  
        android:drawable="@color/white">  
    </item>  
    <item  
        android:id="@android:id/secondaryProgress"  
        android:drawable="@color/red">  
    </item>  
    <item  
        android:id="@android:id/progress"  
        android:drawable="@color/red">  
    </item>  
</layer-list>
 但是后面在设置 Progress的时候 不起作用, 看到的结果总是  
后面又尝试过 : 
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">  
    <item  
        android:id="@android:id/background"  
        >  
        <shape>  
            <solid android:color="@color/white"></solid>  
        </shape>  
  
    </item>  
    <item  
        android:id="@android:id/secondaryProgress"  
        >  
        <shape>  
            <solid android:color="@color/red"></solid>  
        </shape>  
  
    </item>  
    <item  
        android:id="@android:id/progress"  
        >  
        <shape>  
            <solid android:color="@color/red"></solid>  
        </shape>  
  
    </item>  
</layer-list>
 还是不行 和上面一样的
 
后面又尝试了这样的: 
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">  
    <item  
        android:id="@android:id/background"  
        >  
        <clip>  
            <shape>  
                <solid android:color="@color/white"></solid>  
            </shape>  
  
        </clip>  
    </item>  
    <item  
        android:id="@android:id/secondaryProgress"  
        >  
        <clip>  
            <shape>  
                <solid android:color="@color/red"></solid>  
            </shape>  
  
        </clip>  
    </item>  
    <item  
        android:id="@android:id/progress"  
        >  
        <clip>  
            <shape>  
                <solid android:color="@color/red"></solid>  
            </shape>  
  
        </clip>  
    </item>  
</layer-list>
 这下好了能够正常显示了:
 
后面又尝试了这样的: 
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">  
    <item android:id="@android:id/background">  
        <clip>  
            <shape>  
                <gradient  
                    android:endColor="@color/white"  
                    android:startColor="@color/white"/>  
            </shape>  
        </clip>  
    </item>  
    <item android:id="@android:id/secondaryProgress">  
        <clip>  
            <shape>  
                <gradient  
                    android:endColor="@color/colorPrimary"  
                    android:startColor="@color/colorPrimary"/>  
            </shape>  
        </clip>  
    </item>  
    <item android:id="@android:id/progress">  
        <clip>  
            <shape>  
                <gradient  
                    android:endColor="@color/colorPrimary"  
                    android:startColor="@color/colorPrimary"/>  
            </shape>  
        </clip>  
    </item>  
</layer-list>
 也是ok 如图:

这是自己定义的ProgressBar的style 

style name="StyleProgressBarMini" parent="Widget.AppCompat.ProgressBar.Horizontal">  
  
    <item name="android:maxHeight">50dp</item>  
    <item name="android:minHeight">10dp</item>  
    <item name="android:indeterminateOnly">false</item>  
    <item name="android:indeterminateDrawable">  
        @android:drawable/progress_indeterminate_horizontal  
    </item>  
    <item name="android:progressDrawable">@drawable/shape_progressbar_mini</item>  
  
</style>
 具体使用如下: 
<ProgressBar  
    android:id="@+id/pb_progressbar"  
    style="@style/StyleProgressBarMini"  
    android:layout_width="match_parent"  
    android:layout_height="wrap_content"  
    android:layout_margin="30dp"  
    android:max="100"  
    android:progress="50"/>
 ok 下面说说 自定义圆形的

 

圆形的主要修改  android:indeterminateDrawable 属性
 
第一步，在drawable文件夹下新建：progressbar_circle_1.xml，如下： 
<?xml version="1.0" encoding="utf-8"?>  
<rotate xmlns:android="http://schemas.android.com/apk/res/android"  
    android:drawable="@drawable/loading" //自定义的菊花图片  
    android:fromDegrees="0"  
    android:pivotX="50%"  
    android:pivotY="50%"  
    android:toDegrees="360" >  
</rotate>
 第二步，在Style中定义mProgress_circle，如下： 
<style name="mProgress_circle">  
    <item name="android:indeterminateDrawable">@drawable/progressbar_circle_1</item>  
    <item name="android:minWidth">25dp</item>  
    <item name="android:minHeight">25dp</item>  
    <item name="android:maxWidth">60dp</item>  
    <item name="android:maxHeight">60dp</item>  
</style>
 支持大小自己随意定，别失真就好
 
第三步，组件中引用，如下 
<ProgressBar  
    android:id="@+id/progressBar2"  
    style="@style/mProgress_circle"  
    android:layout_gravity="center_vertical"  
    android:layout_width="match_parent"  
    android:indeterminateDuration="1200"  
    android:layout_height="wrap_content" />
 上面是通过一张图片填充android:indeterminateDrawable，我们也可以定义一个动画或者自定义颜色（shape）来实现，跟图片的用法一样：
 
定义动画 progress_circle_loading,xml： 
<animation-list android:oneshot="false"  
  xmlns:android="http://schemas.android.com/apk/res/android">  
  <item android:duration="100" android:drawable="@drawable/loading_1" />  
  <item android:duration="100" android:drawable="@drawable/loading_2" />  
  <item android:duration="100" android:drawable="@drawable/loading_3" />  
  <item android:duration="100" android:drawable="@drawable/loading_4" />  
  <item android:duration="100" android:drawable="@drawable/loading_5" />  
  <item android:duration="100" android:drawable="@drawable/loading_6" />  
</animation-list>
style的indeterminateDrawable引入： 
<item name="android:indeterminateDrawable">@drawable/progress_circle_loading</item>
 
 
定义shape颜色 progress_circle_shape.xml 
<rotate xmlns:android="http://schemas.android.com/apk/res/android"  
  android:fromDegrees="0"  
  android:pivotX="50%"  
  android:pivotY="50%"  
  android:toDegrees="360" >  
  <shape  
    android:innerRadiusRatio="3"  
    android:shape="ring"  
    android:thicknessRatio="8"  
    android:useLevel="false" >  
    <gradient  
      android:centerColor="#FFFFFF"  
      android:centerY="0.50"  
      android:endColor="#1E90FF"  
      android:startColor="#000000"  
      android:type="sweep"  
      android:useLevel="false" />  
  </shape>  
</rotate>
 style的indeterminateDrawable引入： 
<item name="android:indeterminateDrawable">@drawable/progress_circle_shape</item>
 
分享到：
| Android布局中的空格以及占一个汉字宽度的 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    android ProgressBar各种用法

    ### Android ProgressBar 各种用法详解 #### 一、引言 `ProgressBar` 是 Android 开发中最常用的 UI 控件之一，用于表示任务处理进度或等待时间的状态。它可以帮助用户了解应用正在后台执行某些操作，避免因为等待...

    Android之ProgressBar即时显示下载进度详解

    这里利用 ProgressBar 即时显示下载进度。  途中碰到的问题：  1、主线程中不能打开 URL，和只能在主线程中使用 Toast 等  2、子线程不能修改 UI  3、允许网络协议  4、暂停下载和继续下载  ……..  ...

    Android进度条控件progressbar使用方法详解

    一、简介 二、方法 1）进度条ProgressBar使用方法 1、在layout布局文件中创建ProgressBar控件 &lt;ProgressBar nstyle=?...2、用ProgressBar对象指向ProgressBar控件 private ProgressBar pb_progressBar1; pb_pro

    Android ProgressBar进度条使用详解

    ProgressBar进度条，分为旋转进度条和水平进度条，进度条的样式根据需要自定义，之前一直不明白进度条如何在实际项目中使用，网上演示进度条的案例大多都是通过Button点击增加、减少进度值，使用方法...

    Android 开发技巧之 ProgressBar 各种样式大全.pdf

    #### 三、ProgressBar的样式详解 **1. 基本样式** ```xml &lt;ProgressBar android:id="@+id/progressBar" style="?android:attr/progressBarStyle" android:layout_width="wrap_content" android:layout_height=...

    Android 学习（13）ProgressBar

    在Android开发中，ProgressBar是一个非常重要的控件，它用于显示进度状态，无论是后台任务的执行、数据加载，还是用户等待某个操作完成时的反馈，它都能提供良好的用户体验。本篇文章将深入探讨Android中的...

    android中ProgressDialog与ProgressBar的使用详解

    在Android开发中，ProgressDialog和ProgressBar是两种常用的组件，用于向用户展示应用的后台处理过程，增强用户体验。下面我们将深入探讨这两个组件的使用方法和特点。 首先，ProgressDialog是一种对话框式的组件，...

    Android程序研发源码ProgressBar 几乎全部的用法.zip

    开发者可以通过自定义样式文件，改变ProgressBar的颜色、大小、边框宽度等外观属性。例如，可以使用`&lt;item name="android:progressDrawable"&gt;@drawable/progress_bar&lt;/item&gt;`来自定义填充的Drawable。 5. **动画...

    Android使用动画设置ProgressBar进度的方法

    需求场景：当我们在使用ProgressBar的时候，希望有进度加载的效果，此时我们传统的做法是使用Thread线程来实现，下面我们用属性动画来实现，简单粗暴。。哈哈哈 布局文件： &lt;?xml version=1.0 encoding=utf-8?&...

    小程序源码 ProgressBar 几乎全部的用法.rar

    2. **样式定制**：ProgressBar的样式可以通过设置`color`改变进度条颜色，`background-color`改变背景颜色，`border-radius`调整圆角，以及自定义宽度和高度等。 3. **动态更新**：在某些操作如文件下载、视频加载...

    Android的Window类详解

    ### Android的Window类详解 #### 一、概述 在Android开发过程中，`Window`类扮演着极其重要的角色，它是应用程序与用户交互的主要界面之一。本文将深入探讨Android系统的`Window`类，包括其属性和成员函数等内容。...

    仿网易的彩虹ProgressBar

    【彩虹ProgressBar详解】 在Android应用开发中，ProgressBar是常见的组件之一，用于展示进度或加载状态。而"仿网易的彩虹ProgressBar"则是一种视觉效果独特的进度条，它通过色彩的过渡和变化，使得加载过程更加生动...

    android ListView和ProgressBar(进度条控件)的使用方法

    ProgressBar是Android中用于显示进度或加载状态的控件，通常用于告知用户某个操作正在进行。它有多种样式，如水平、垂直、圆形等。使用ProgressBar的基本步骤如下： 1. **在XML布局文件中添加ProgressBar**： ```...

    Android中自定义进度条详解

    Android原生的ProgressBar控件只提供了一种简单的横向样式，但通过自定义，我们可以实现更多变化，如变换前背景、创建纵向进度条或者设计成弧形样式。 首先，我们来看如何变换进度条的前背景。在默认的ProgressBar...

    Android开发应用实战详解源代码

    3.2 改变屏幕窗口元素的背景颜色 3.3 改变textview的文字颜色 3.4 实现textview文字的替换 3.5 获取手机分辨率 3.6 样式修饰处理 3.7 按钮事件响应 3.8 页面间的转换 3.9 activity调用 3.10 多个activity间的数据...

    花样ProgressBar.pdf

    ### 花样ProgressBar知识点详解 #### 一、概述 在Android开发中，`ProgressBar`是一种常见的UI组件，用于向用户展示操作或进程的状态。它能够帮助提高用户体验，尤其是在加载数据或者执行耗时操作时。本文档《花样...

    android各组件详解- View

    标题与描述均指向了“Android各组件详解-View”，这表明文档内容主要聚焦于Android框架中的View组件，对其进行深入解析。接下来，我们将基于这一主题展开详细的讨论，涵盖View的概念、分类、自定义原理以及常见的...

Magicbox
Global site tag (gtag.js) - Google Analytics