Android-做個人化的捲軸

標籤：progressbar   捲軸   個人化捲軸   android個人化捲軸   android捲軸   

1.案例

2.準備素材

  

                                        

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

3.原理

採用一張圖片作為ProgressBar的背景圖片(一般採用顏色比較淺的)。另一張是捲軸的圖片(一般採用顏色比較深的圖片)。進度在滾動是：滾動圖片逐步顯示，背景圖片逐步隱藏，達到上面的效果。

4.靈感來自Android控制項提供的源碼

4.1 預設帶進度的捲軸，如

    <ProgressBar    android:id="@+id/progressBar2"   style="@android:style/Widget.ProgressBar.Horizontal"    android:layout_width="268dp"    android:layout_height="wrap_content"    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檔案，內容如下

<layer-listxmlns:android="http://schemas.android.com/apk/res/android">      <itemandroid:id="@android:id/background">       <shape>           <cornersandroid:radius="5dip"/>           <gradient                   android:startColor="#ff9d9e9d"                   android:centerColor="#ff5a5d5a"                   android:centerY="0.75"                   android:endColor="#ff747674"                   android:angle="270"           />       </shape>   </item>      <itemandroid:id="@android:id/secondaryProgress">       <clip>           <shape>               <cornersandroid:radius="5dip"/>               <gradient                       android:startColor="#80ffd300"                       android:centerColor="#80ffb600"                       android:centerY="0.75"                       android:endColor="#a0ffcb00"                       android:angle="270"               />           </shape>       </clip>   </item>      <itemandroid:id="@android:id/progress">       <clip>           <shape>               <cornersandroid:radius="5dip"/>               <gradient                       android:startColor="#ffffd300"                       android:centerColor="#ffffb600"                       android:centerY="0.75"                       android:endColor="#ffffcb00"                       android:angle="270"               />           </shape>       </clip>   </item></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檔案代碼如下

<?xmlversion="1.0"encoding="utf-8"?><layer-listxmlns:android="http://schemas.android.com/apk/res/android">   <itemandroid:id="@android:id/progress">       <clip           android:clipOrientation="vertical"           android:drawable="@drawable/progress1"           android:gravity="bottom">       </clip>   </item></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"/><span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span>

7.點擊按鈕類比滾動的效果

publicclass ProgressActivity extends Activity {          ProgressBar pb =null;     TextView txtProgress;     Handler handler =new Handler();     @Override     publicvoid onCreate(BundlesavedInstanceState) {          super.onCreate(savedInstanceState);          setContentView(R.layout.main);          System.out.println("主題=" + getTheme() + "");          pb = (ProgressBar) findViewById(R.id.pbPic);

<pre code_snippet_id="609749" snippet_file_name="blog_20150301_5_812240" name="code" class="java"><span style="white-space:pre"></span>   //按鈕

Button btnStart = (Button) findViewById(R.id.btStart);

<pre code_snippet_id="609749" snippet_file_name="blog_20150301_5_812240" name="code" class="java"> <span style="white-space:pre"></span>   //顯示進度

txtProgress = (TextView) findViewById(R.id.txtProgress);

<pre code_snippet_id="609749" snippet_file_name="blog_20150301_5_812240" name="code" class="java"><span style="white-space:pre"></span>   //按鈕點擊事件

btnStart.setOnClickListener(new OnClickListener() { publicvoid onClick(Viewv) {

<pre code_snippet_id="609749" snippet_file_name="blog_20150301_5_812240" name="code" class="java"><span style="white-space:pre"></span>    //建立並啟動線程，使用線程執行類比的任務

new Thread(new Runnable() { publicvoid run() { for (inti = 0; i < 100;i++) {//迴圈100遍 try { handler.post(new Runnable() { //更新介面的資料 publicvoid run() { pb.incrementProgressBy(1);//增加進度

<pre code_snippet_id="609749" snippet_file_name="blog_20150301_5_812240" name="code" class="java"><span style="white-space:pre"></span>  //顯示完成的進度

txtProgress.setText(pb.getProgress() + "%"); } }); Thread.sleep(100); } catch (InterruptedExceptione) { } } } }).start(); } }); }}

Android-做個人化的捲軸