AndroidのUI设计研究（一）——自定义ProgressBar

最近迷上进度条，使用进度条可以增强用户体验，让用户心里有个底，再无奈的等待中体会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

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello" />

    <Button android:id="@+id/bt"
        android:text="开始"
         android:layout_width="fill_parent"
        android:layout_height="wrap_content"/>
    
    <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"/>
    
</LinearLayout>

progress_vertical.xml

<?xml version="1.0" encoding="utf-8"?>
<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="#fff" 
                    android:endColor="#f00" 
                    android:angle="270" 
            /> 
        </shape> 
    </item> -->
   
     
    <item android:id="@android:id/progress"  > 
        <clip android:clipOrientation="vertical" 
            android:gravity = "bottom"
            android:drawable="@drawable/progress"
            > 
            <!-- 
           
           
            <shape > 
                <corners android:radius="5dip" /> 
                <gradient 
                         android:startColor="#ffffd300" 
                        android:centerColor="#ffffb600" 
                        android:centerX="0.75" 
                        android:endColor="#ffffcb00" 
                        android:angle="90"
                /> 
            </shape>  -->
        </clip> 
    </item> 
     
</layer-list> 

 

MainActivity.java

package com.bvin.study.progress;

import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.view.View;
import android.widget.Button;
import android.widget.ProgressBar;

public class MainActivity extends Activity {
    /** Called when the activity is first created. */
    ProgressBar pb ;
    Handler handler = new Handler(){

        @Override
        public void handleMessage(Message msg) {
            // TODO Auto-generated method stub
            super.handleMessage(msg);
            pb.setProgress(msg.what);
        }
    
        
        
    };
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        init();
    }
    
    void init(){
        pb = (ProgressBar)findViewById(R.id.pb);
        Button bt = (Button)findViewById(R.id.bt);
        bt.setOnClickListener(new View.OnClickListener() {
            
            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                
                pb.incrementProgressBy(10);
                
                
            }
        });
    }
}

 

以后还会更新其他应用的一些UI设计揭秘，敬请关注！