Android-做个性化的进度条

1.案例效果图

2.准备素材

                              

progress1.png(78*78)              progress2.png(78*78)

3.原理

采用一张图片作为ProgressBar的背景图片(一般采用颜色比较浅的)。另一张是进度条的图片(一般采用颜色比较深的图片)。进度在滚动时:进度图片逐步显示,背景图片逐步隐藏,达到上面的效果。

4.灵感来自Android控件提供的源码

4.1 默认带进度的进度条,如下图

1     <ProgressBar
2     android:id="@+id/progressBar2"
3    style="@android:style/Widget.ProgressBar.Horizontal"
4     android:layout_width="268dp"
5     android:layout_height="wrap_content"
6     android:progress="45" /> 

注意:关键是style属性在起作用

4.2 找到样式定义的位置

鼠标放在style属性值上,按下Ctrl键,出现超链接,点击超链接跳转到样式的定义位置

样式定义的内容如下

重点研究:

android:progressDrawable:进度条的样式

@android:drawable/progress_horizontal:样式定义的文件

在android-sdk-windows\platforms\android-14\data\res目下搜索progress_horizontal.xml文件,搜索结果如下:

打开progress_horizontal.xml文件,内容如下

 1 <layer-listxmlns:android="http://schemas.android.com/apk/res/android">
 2     <itemandroid:id="@android:id/background">
 3         <shape>
 4             <cornersandroid:radius="5dip"/>
 5             <gradient
 6                     android:startColor="#ff9d9e9d"
 7                     android:centerColor="#ff5a5d5a"
 8                     android:centerY="0.75"
 9                     android:endColor="#ff747674"
10                     android:angle="270"
11             />
12         </shape>
13     </item>
14     <itemandroid:id="@android:id/secondaryProgress">
15         <clip>
16             <shape>
17                 <cornersandroid:radius="5dip"/>
18                 <gradient
19                         android:startColor="#80ffd300"
20                         android:centerColor="#80ffb600"
21                         android:centerY="0.75"
22                         android:endColor="#a0ffcb00"
23                         android:angle="270"
24                 />
25             </shape>
26         </clip>
27     </item>
28     <itemandroid:id="@android:id/progress">
29         <clip>
30             <shape>
31                 <cornersandroid:radius="5dip"/>
32                 <gradient
33                         android:startColor="#ffffd300"
34                         android:centerColor="#ffffb600"
35                         android:centerY="0.75"
36                         android:endColor="#ffffcb00"
37                         android:angle="270"
38                 />
39             </shape>
40         </clip>
41     </item>
42 </layer-list>

释义:

<item android:id="@android:id/background">:定义进度条的背景样式

<item android:id="@android:id/secondaryProgress">:辅助进度条的样式

<item android:id="@android:id/progress">:进度条的样式

思考:如果我想做垂直进度条,怎么办了?

关键在clip元素的属性上做修改

<clip
    android:clipOrientation="vertical"    定义滚动的方向 vertical为垂直方向
    android:drawable="@drawable/progress1"  定义进度的图片
    android:gravity="bottom" >  定义进度的开始位置
</clip>

5.定义样式文件progress_vertical.xml

progress_vertical.xml文件代码如下

 1 <?xmlversion="1.0"encoding="utf-8"?>
 2 <layer-listxmlns:android="http://schemas.android.com/apk/res/android">
 3     <itemandroid:id="@android:id/progress">
 4         <clip
 5             android:clipOrientation="vertical"
 6             android:drawable="@drawable/progress1"
 7             android:gravity="bottom">
 8         </clip>
 9     </item>
10 </layer-list>

6.应用自定义的样式

<Button
        android:id="@+id/btStart"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="150dp"
        android:text="开始"/>

    <ProgressBar
        android:id="@+id/pbPic"
        style="@android:style/Widget.ProgressBar.Horizontal"
        android:layout_width="50dp"
        android:layout_height="68dp"
        android:background="@drawable/progress2"
        android:max="100"
        android:progress="0"
        android:progressDrawable="@drawable/progress_vertical" />    <!-- 在此属性上应用 -->

    <TextView
        android:id="@+id/txtProgress"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

7.点击按钮模拟进度滚动的效果

publicclass  ProgressActivity extends Activity {
      ProgressBar pb = null;
      TextView txtProgress;
      Handler handler = new Handler();
      @Override
      publicvoid onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.main);
           System.out.println("主题=" + getTheme() + "");
           pb = (ProgressBar) findViewById(R.id.pbPic);
           Button btnStart = (Button) findViewById(R.id.btStart);//按钮
           txtProgress = (TextView) findViewById(R.id.txtProgress);//显示进度
           btnStart.setOnClickListener(new OnClickListener() {//按钮点击事件
                 publicvoid onClick(View v) {
                      new Thread(new Runnable() {//创建并启动线程,使用线程执行模拟的任务
                                       publicvoid run() {
                                             for (inti = 0; i < 100; i++) { //循环100遍
                                                  try {
                                                        handler.post(new Runnable() { //更新界面的数据
                                                              publicvoid run() {
                                                                   pb.incrementProgressBy(1);//增加进度
                                                                   txtProgress.setText(pb.getProgress() + "%");//显示完成的进度
                                                              }
                                                        });
                                                        Thread.sleep(100);
                                                  } catch (InterruptedException e) {

                                                  }
                                             }
                                       }
                                  }).start();
                 }
           });
      }
}

时间: 2024-10-20 20:42:07

Android-做个性化的进度条的相关文章

Android学习笔记(24):进度条组件ProgressBar及其子类

ProgressBar作为进度条组件使用,它还派生了SeekBar(拖动条)和RatingBar(星级评分条). ProgressBar支持的XML属性: Attribute Name Related Method Description style 设置ProgressBar指定风格 android:indeterminate 设置为true时,进度条不显示运行进度 android:indeterminateBehavior indeterminate模式下.当进度条达到最大值时的动画处理行为

Android自定义文本的进度条

工作中要求实现如下图中进度条(进度条上面是带比例数的文本,进度条颜色与比例数对应),写下自己的实现过程. 整体思路:Android中ProgressBar控件不支持自定义文本,所以需要写自定义progressBar. 1.progressBar上要自定义文本,需要重写onDraw()方法: 2.为实现进度是红色,底色是灰色效果,需要自定义progressBar样式 代码实现: 1.自定义的ProgressBar实现代码: 1 package com.example.myprogressbar;

Android百日程序:进度条对话框实现

显示由Activity管理的dialog. 这种dialog有多种多样,其中比较常见的是loading的时候,显示的一个loading进度条. Android显示这样的进度条还是非常方便的,因为有现成的模块可以调用. 首先看看本程序的效果吧: 1 主界面: 2 点击这个按钮之后,显示: 进度条到了100的时候就会自动关闭,当然这里是模拟下载,真实的下载算法还需要继续完善,不过也是很简单的算法了,不算是难点. 点击Cancel或者OK按钮也可以调用函数,进行有需要的操作,这里直接显示一个Toast

Android 5.0 - ProgressBar 进度条无法展示到按钮的前面

在低于SDK < 21 的版本中,ProgressBar 可以展示到按钮前面,并且为之在按钮的中间,但是切换到android 5.0后进度条ProgressBar 展示顺序变化了,按钮再前面,ProgressBar 在后面了 我的xml配置文件如下: <RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content"> <Button

Android控件TextProgressBar进度条上显文字

Android系统的进度条控件默认的设计的不是很周全,比如没有包含文字的显示,那么如何在Android进度条控件上显示文字呢? 来自Google内部的代码来了解下,主要使用的addView这样的方法通过覆盖一层Chronometer秒表控件来实现,整个代码如下 : public class TextProgressBar extends RelativeLayout implements OnChronometerTickListener { public static final String

android之实现ProgressBar进度条组件

android之实现ProgressBar进度条组件: (注意:横向那个进度条要android4.0以上版本支持,也就是最低(android:minSdkVersion="14")支持) 布局:layout/activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.a

Android自定义View——圆形进度条式按钮

介绍 今天上班的时候有个哥们问我怎么去实现一个按钮式的进度条,先来看看他需要实现的效果图. 和普通的圆形进度条类似,只是中间的地方有两个状态表示,未开始,暂停状态.而且他说圆形进度的功能已经实现了.那么我们只需要对中间的两个状态做处理就行了. 先来看看实现的效果图: 上面说了我们只需要处理中间状态的变化就可以了,对于进度的处理直接使用了弘洋文章中实现: http://blog.csdn.net/lmj623565791/article/details/43371299 下面开始具体实现. 具体实

Android 自定义View——动态进度条

效果图: 这个是看了梁肖的demo,根据他的思路自己写了一个,但是我写的这个貌似计算还是有些问题,从上面的图就可以看出来,左侧.顶部.右侧的线会有被截掉的部分,有懂得希望能给说一下,改进一下,这个过程还是有点曲折的,不过还是觉得收获挺多的.比如通动画来进行动态的展示(之前做的都是通过Handler进行更新的所以现在换一种思路觉得特别好),还有圆弧的起止角度,矩形区域的计算等!关于绘制我们可以循序渐进,比如最开始先画圆,然后再画周围的线,最后设置动画部分就可以了.不多说了,上代码了. 代码 自定义

Android学习笔记:进度条ProgressBar的使用以及与AsyncTask的配合使用

ProgressBar时android用于显示进度的组件.当执行一个比较耗时的操作(如io操作.网络操作等),为了避免界面没有变化让用户体验降低,提供一个进度条可以让用户知道程序还在运行. 一.ProgressBar有如下几种常见样式 1.默认进度条的样式为圆圈(为中等大小的圆圈) <ProgressBar android:layout_width="wrap_content" android:layout_height="wrap_content" />