自定义progressbar

来源：互联网发布：千牛卖家版mac不能用编辑：程序博客网时间：2024/05/01 13:16

http://www.cnblogs.com/bvin/archive/2012/08/08/2628856.html

最近迷上进度条，使用进度条可以增强用户体验，让用户心里有个底，再无奈的等待中体会loading的乐趣。

记得以前优乐美的官网，进入主页加载资源，显示给用户看的就是，炫彩背景下，一个杯子里的奶茶随着加载进度慢慢加上来，这对于浏览网站的人来讲，等于一种享受，并不是难熬等待的时间，在等待的时间的时候，她们看到确实另一番景象而不是单纯的进度条。

百度手机浏览器的做法又不一样，用户打开一个网页的时候，在后台请求资源并渲染，前台界面就是产品的宣传，几张宣传图相互切换，大部分PC软件的安装过程也是如此，在用户等待的时候，向用户宣传自己，让眼睛不会过度疲劳和产生厌倦感。

好了，话不多少，今天我们看看手机QQ空间，点击一张图片，然后加载。我们看图说话。

这个图片类型的进度条是怎么做的呢。

首先，这肯定是继承一个进度条ProgressBar,那我们分析一下ProgressBar的构成，主题分格是圆形的还是条状的，背景background，进度前景progressDrawable。

好我们看一下进度条的xml布局。

<ProgressBar android:id="@+id/pb"        style="?android:attr/progressBarStyleHorizontal"        android:background="@drawable/progress_bg"        android:progressDrawable="@drawable/progress_vertical"        android:layout_width="100dp"        android:layout_height="80dp"/>

style定义了条状进度条，background设置进度条背景（这里我们可以把灰色的背景图放进去），progressDrawable设置进度前景（前景图可以放一张蓝色图）。

但是如果这样设置的话，会产生什么情况呢，进度条是从左边往右边进展的，问题就来了，我怎么把进度条的增长方向改为垂直向上呢？

我们看下ProgressBar布局源码,progress是一个layer-list文件。

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

可以看到android:id/progress这项包含了一个clip标签，在这里就可以控制自增方向，clip发现有3个属性，clipOrientation， gravity， drawable。在clipOrientation设置为纵向，drawable设置为蓝色图就大功告成啦！

看下实际效果：

不错吧！

相关源码：

main.xml

 1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3     android:layout_width="fill_parent" 4     android:layout_height="fill_parent" 5     android:orientation="vertical" > 6  7     <TextView 8         android:layout_width="fill_parent" 9         android:layout_height="wrap_content"10         android:text="@string/hello" />11 12     <Button android:id="@+id/bt"13         android:text="开始"14          android:layout_width="fill_parent"15         android:layout_height="wrap_content"/>16     17     <ProgressBar android:id="@+id/pb"18         style="?android:attr/progressBarStyleHorizontal"19         android:background="@drawable/progress_bg"20         android:progressDrawable="@drawable/progress_vertical"21         android:layout_width="100dp"22         android:layout_height="80dp"/>23     24 </LinearLayout>


progress_vertical.xml

 1 <?xml version="1.0" encoding="utf-8"?> 2 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">  3   <!--     4   <item android:id="@android:id/background" >  5         <shape>  6             <corners android:radius="5dip" />  7             <gradient  8                     android:startColor="#fff"  9                     android:endColor="#f00" 10                     android:angle="270" 11             /> 12         </shape> 13     </item> -->14    15      16     <item android:id="@android:id/progress"  > 17         <clip android:clipOrientation="vertical" 18             android:gravity = "bottom"19             android:drawable="@drawable/progress"20             > 21             <!-- 22            23            24             <shape > 25                 <corners android:radius="5dip" /> 26                 <gradient 27                          android:startColor="#ffffd300" 28                         android:centerColor="#ffffb600" 29                         android:centerX="0.75" 30                         android:endColor="#ffffcb00" 31                         android:angle="90"32                 /> 33             </shape>  -->34         </clip> 35     </item> 36      37 </layer-list>

MainActivity.java

 1 package com.bvin.study.progress; 2  3 import android.app.Activity; 4 import android.os.Bundle; 5 import android.os.Handler; 6 import android.os.Message; 7 import android.view.View; 8 import android.widget.Button; 9 import android.widget.ProgressBar;10 11 public class MainActivity extends Activity {12     /** Called when the activity is first created. */13     ProgressBar pb ;14     Handler handler = new Handler(){15 16         @Override17         public void handleMessage(Message msg) {18             // TODO Auto-generated method stub19             super.handleMessage(msg);20             pb.setProgress(msg.what);21         }22     23         24         25     };26     @Override27     public void onCreate(Bundle savedInstanceState) {28         super.onCreate(savedInstanceState);29         setContentView(R.layout.main);30         init();31     }32     33     void init(){34         pb = (ProgressBar)findViewById(R.id.pb);35         Button bt = (Button)findViewById(R.id.bt);36         bt.setOnClickListener(new View.OnClickListener() {37             38             @Override39             public void onClick(View v) {40                 // TODO Auto-generated method stub41                 42                 pb.incrementProgressBy(10);43                 44                 45             }46         });47     }48 }

0 0