文档章节

Android 两种自定义ProgressBar

yaly
 yaly
发布于 2015/05/05 11:13
字数 780
阅读 1983
收藏 14

横向的ProgressBar

在res下创建drawable文件夹,新建文件drawable/progressbar_color.xml


<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
 
    <!-- 背景  gradient是渐变,corners定义的是圆角 -->
    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="10dp" />
 
            <solid android:color="#ffffff" />
        </shape>
    </item>
    <!-- 第二条进度条颜色 -->
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="10dip" />
 
                <gradient
                    android:angle="90.0"
                    android:centerColor="#ac6079"
                    android:centerY="0.45"
                    android:endColor="#6c213a"
                    android:startColor="#e71a5e" />
            </shape>
        </clip>
    </item>
    <!-- 进度条 -->
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="10dip" />
 
                <solid android:color="#FF8080" />
            </shape>
        </clip>
    </item>
 
</layer-list>

然后在布局中引用就可以了。

activity_main.xml

<ProgressBar 
        android:id="@+id/my_progress"
        android:layout_width="match_parent"
        android:layout_height="12dp"
        android:max="100"
        android:progress="40"
        android:secondaryProgress="70"
        style="?android:attr/progressBarStyleHorizontal"
        android:progressDrawable="@drawable/progressbar_color"/>

圆形的ProgressBar

自定义圆形的ProgressBar

  效果图:

  圆形ProgressBar的样式主要有以下几个,我们这里以progressBarStyleLarge为例进行样式的修改,其他的类似。

<ProgressBar  android:layout_width="wrap_content"    android:layout_height="wrap_content"  style="?android:attr/progressBarStyleLarge"/>



 首先看一下style="?android:attr/progressBarStyleLarge"的源码,在 \frameworks\base\core\res\res\values\styles.xml



<style name="Widget.ProgressBar.Large">
  <item name="android:indeterminateDrawable">@android:drawable/progress_large_white</item>
  <item name="android:minWidth">76dip</item>
  <item name="android:maxWidth">76dip</item>
  <item name="android:minHeight">76dip</item>
  <item name="android:maxHeight">76dip</item>
</style>

  看到这一行<item name="android:indeterminateDrawable">@android :drawable/progress_large_white</item>有木有,我们去看一下它的源码,在 \frameworks\base\core\res\res\drawable\progress_large_white.xml

<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/spinner_white_76"
    android:pivotX="50%"
    android:pivotY="50%"
    android:fromDegrees="0"
    android:toDegrees="360" />



 看到这一行 android:drawable="@drawable/spinner_white_76" 我们就明白了,原来它在这里放了一张图片,进行旋转。

  接下来我定义自己的ProgressBarStyle:

  首先我们先找一张图片加入我们的项目中(如一开始的效果图片),然后在drawable下新建progress_large.xml文件

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



 在 \value\style.xml中定义myProgressBarStyleLarge
<style name="myProgressBarStyleLarge" >
  <item name="android:indeterminateDrawable">@drawable/progress_large</item>
  <item name="android:minWidth">76dip</item>
  <item name="android:maxWidth">76dip</item>
  <item name="android:minHeight">76dip</item>
  <item name="android:maxHeight">76dip</item>
</style>



 最后在ProgressBar中使用我们自己定义的style,android:indeterminateDuration="700"指定图片旋转的速度,这样我们就可以根据自己的需要来定义ProgressBar的样式。
<ProgressBar
  style="@style/myProgressBarStyleLarge"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:indeterminateDuration="700" />



上面是通过一张图片填充android:indeterminateDrawable,我们也可以定义一个动画或者自定义颜色来实现,跟图片的用法一样:

  定义res/anim/progress_large_loading.xml如下:

<?xml version="1.0" encoding="UTF-8"?>  
<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中引入<item name="android:indeterminateDrawable">@anim/progress_large_loading</item>

  定义res/drawable/progress_large_shape.xml如下:

<?xml version="1.0" encoding="utf-8"?>  
<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中引入
<item name="android:indeterminateDrawable">@drawable/progress_large_shape</item>




本文转载自:http://my.oschina.net/u/1251149/blog/360788 & http://www.cnblogs.com/xingfuzzhd/archive/2013/12/2...

yaly
粉丝 3
博文 103
码字总数 48740
作品 0
海淀
Android工程师
私信 提问
Android Progressbar

各种类型的Android进度条:CircleProgress: http://www.open-open.com/lib/view/open1415936845930.html#label0 自定义圆形的ProgressBar: http://www.cnblogs.com/xingfuzzhd/archive/2013......

当空皓月
2015/04/20
176
0
Android组件(三)

Progress(进度条):打开文件等的进度显示,用以给用户提示。其中最常见的两种是“环形进度条”和“水平进度条”。如下图所示: 代码如下: 这里介绍进度条事件的两种方法,一种是Activity直...

晨曦之光
2012/05/16
110
0
Android中自定义ProgressBar

<ProgressBar android:id="@+id/morevprogressmore" android:layout_width="30dip" android:layout_height="30dip" android:layout_centerVertical="true" android:indeterminateDrawable="@......

宇宙执政
2013/01/11
1K
0
使用android ProgressBar和Toast生成一个界面

首先我需要这样一个界面 这个界面是在使用AudioManager.adjustStreamVolume(int streamType, int direction, int flags)显示出来的,记住flags这里传 AudioManager.FLAGSHOWUI才会显示 不然只...

simpower
2014/10/04
86
0
android中使用surfaceview+MediaPlayer播放视频

Android中播放视频主要有两种方式: 使用其自带的播放器。指定Action为ACTION_VIEW,Data为Uri,Type为其MIME类型 使用android自带的VideoView,这种方法太简单就不介绍了 使用SurfaceView+Med...

天王盖地虎626
2018/12/24
21
0

没有更多内容

加载失败,请刷新页面

加载更多

使用CSS自定义属性构建骨架屏

写在前面 几天前看到薄荷前端团队分享的《前端骨架屏方案小结》,突然回想起一年前看到的max bock写的《Building Skeleton Screens with CSS Custom Properties》,翻译整理写下出此文,分享...

前端老手
昨天
9
0
Docker常用命令小记

除了基本的<font color="blue">docker pull</font>、<font color="blue">docker image</font>、<font color="blue">docker ps</font>,还有一些命令及参数也很重要,在此记录下来避免遗忘。 ......

程序员欣宸
昨天
5
0
MAT使用-jvm内存溢出问题分析定位

1.MAT简介: MAT 全称 Eclipse Memory Analysis Tools 是一个分析 Java堆数据的专业工具,可以计算出内存中对象的实例数量、占用空间大小、引用关系等,看看是谁阻止了垃圾收集器的回收工作,...

xiaomin0322
昨天
5
0
内网和外网之间的通信(端口映射原理)

首先解释一下“内网”与“外网”的概念: 内网:即所说的局域网,比如学校的局域网,局域网内每台计算机的IP地址在本局域网内具有互异性,是不可重复的。但两个局域网内的内网IP可以有相同的...

Jack088
昨天
6
0
3.深入jvm内核-原理、诊断与优化-4. GC算法和种类

一、GC算法和种类 GC的概念 GC算法 引用计数法 标记清除 标记压缩 复制算法 可触及性 Stop-The-World GC的对象是堆空间和永久区 引用计数法 老牌垃圾回收算法 通过引用计算来回收垃圾 使用者...

hexiaoming123
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部