最近迷上进度条，使用进度条可以增强用户体验，让用户心里有个底，再无奈的等待中体会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 @Override
17 public void handleMessage(Message msg) {
18 // TODO Auto-generated method stub
19 super.handleMessage(msg);
20 pb.setProgress(msg.what);
21 }
22
23
24
25 };
26 @Override
27 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 @Override
39 public void onClick(View v) {
40 // TODO Auto-generated method stub
41
42 pb.incrementProgressBy(10);
43
44
45 }
46 });
47 }
48 }
以后还会更新其他应用的一些UI设计揭秘，敬请关注！