Android-做個人化的捲軸，android-捲軸

Android-做個人化的捲軸，android-捲軸

1.案例

2.準備素材
                                            progress1.png(78*78)              progress2.png(78*78)
3.原理
採用一張圖片作為ProgressBar的背景圖片(一般採用顏色比較淺的)。另一張是捲軸的圖片(一般採用顏色比較深的圖片)。進度在滾動是：滾動圖片逐步顯示，背景圖片逐步隱藏，達到上面的效果。
4.靈感來自Android控制項提供的源碼
4.1 預設帶進度的捲軸，如
1     <ProgressBar2     android:id="@+id/progressBar2"3    style="@android:style/Widget.ProgressBar.Horizontal"4     android:layout_width="268dp"5     android:layout_height="wrap_content"6     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檔案，內容如下
 1 <layer-listxmlns:android="http://schemas.android.com/apk/res/android">    2     <itemandroid:id="@android:id/background"> 3         <shape> 4             <cornersandroid:radius="5dip"/> 5             <gradient 6                     android:startColor="#ff9d9e9d" 7                     android:centerColor="#ff5a5d5a" 8                     android:centerY="0.75" 9                     android:endColor="#ff747674"10                     android:angle="270"11             />12         </shape>13     </item>   14     <itemandroid:id="@android:id/secondaryProgress">15         <clip>16             <shape>17                 <cornersandroid:radius="5dip"/>18                 <gradient19                         android:startColor="#80ffd300"20                         android:centerColor="#80ffb600"21                         android:centerY="0.75"22                         android:endColor="#a0ffcb00"23                         android:angle="270"24                 />25             </shape>26         </clip>27     </item>   28     <itemandroid:id="@android:id/progress">29         <clip>30             <shape>31                 <cornersandroid:radius="5dip"/>32                 <gradient33                         android:startColor="#ffffd300"34                         android:centerColor="#ffffb600"35                         android:centerY="0.75"36                         android:endColor="#ffffcb00"37                         android:angle="270"38                 />39             </shape>40         </clip>41     </item>42 </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檔案代碼如下
 1 <?xmlversion="1.0"encoding="utf-8"?> 2 <layer-listxmlns:android="http://schemas.android.com/apk/res/android"> 3     <itemandroid:id="@android:id/progress"> 4         <clip 5             android:clipOrientation="vertical" 6             android:drawable="@drawable/progress1" 7             android:gravity="bottom"> 8         </clip> 9     </item>10 </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"/>
 
 
 
7.點擊按鈕類比滾動的效果
publicclass  ProgressActivity extends Activity {           ProgressBar pb = null;      TextView txtProgress;      Handler handler = new Handler();      @Override      publicvoid onCreate(Bundle savedInstanceState) {           super.onCreate(savedInstanceState);           setContentView(R.layout.main);           System.out.println("主題=" + getTheme() + "");           pb = (ProgressBar) findViewById(R.id.pbPic);           Button btnStart = (Button) findViewById(R.id.btStart);//按鈕           txtProgress = (TextView) findViewById(R.id.txtProgress);//顯示進度           btnStart.setOnClickListener(new OnClickListener() {//按鈕點擊事件                 publicvoid onClick(View v) {                      new Thread(new Runnable() {//建立並啟動線程，使用線程執行類比的任務                                       publicvoid run() {                                             for (inti = 0; i < 100; i++) { //迴圈100遍                                                  try {                                                        handler.post(new Runnable() { //更新介面的資料                                                              publicvoid run() {                                                                   pb.incrementProgressBy(1);//增加進度                                                                   txtProgress.setText(pb.getProgress() + "%");//顯示完成的進度                                                              }                                                        });                                                        Thread.sleep(100);                                                  } catch (InterruptedException e) {                                                   }                                             }                                       }                                  }).start();                 }           });      }}