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設計揭秘，敬請關注！