用layer-list實現弧形進度條

本文轉載自：http://www.linuxidc.com/Linux/2013-04/82743.htm

之前我有寫過如何用style或者是layer-list實現自定義的橫向進度條（http://www.cnblogs.com/tianzhijiexian/p/3854105.html），最近看到網上有人寫了個垂直的弧形進度條的實現方式，覺得思路很巧妙，值得學習和體會，便轉載一下。

之前文章的主要代碼如下：

方法一：

<?xml version="1.0" encoding="UTF-8"?>              
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >               
<!--  設置背景色圖像資源  -->                 
<item                
    android:id="@android:id/background"              
    android:drawable="@drawable/bar_bg" />   
                                     
<!--  設置進度條顏色圖像資源  -->                 
<item                
    android:id="@android:id/progress"              
    android:drawable="@drawable/bar_progress" />
              
</layer-list>

 

方法二：

<?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="6dp" />               
                <gradient android:startColor="#0000ff"              
                      android:endColor="#0000ff" />              
        </shape>             
    </item>                                

    <!--  設置進度條顏色（紅色）  -->               
    <item  android:id="@android:id/progress" >              
        <clip>               
            <shape>                
                <corners android:radius="6dp" />                
            <gradient  android:startColor="#ff0000"               
                   android:endColor="#ff0000" />               
            </shape>              
        </clip>             
    </item>            

</layer-list>

 

文章講的是如何用一個圖片來定義弧形進度條，其實就是把圖片做個弧度，然后設置背景透明，最后修改進度條的方向為垂直的。下面是文章內容：

Android自帶的progressbar組件基本可以滿足常用的一些需求，最近一套新UI用到了弧形的進度條，如圖

最初看到，自己是想自己實現，涉及到的問題就比較多，需要一些精確的計算畫上去，整個屏幕的背景圖是這樣的：

不過在動手前，自己又百度了一些自定義進度條的文章看了一下。看了一篇受了很大的啟發，這個弧形的效果完全可以用一個垂直的進度條來實現。使用這樣一張圖：

   　　

弧形與背景圖的軌跡一樣，然后整張圖是長方形，不過背景是透明的，這樣以后這樣將android的progressbar豎直顯示即可。

<ProgressBar android:id="@+id/disc_audio_progressbar"
  style="?android:attr/progressBarStyleHorizontal"
  android:progressDrawable="@drawable/audioseekbar_style"
  android:layout_width="49dip" 
　android:layout_height="281dip"
  android:max="100" 
  android:layout_x="486dp" 
  android:layout_y="142dp"
  android:progress="1">
</ProgressBar>

 

豎直顯示了，下一步就是如何進度條沿豎直方向走呢？那就在audioseekbar_style中進行設置

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 
 <item android:id="@android:id/secondaryProgress" android:drawable="@drawable/imgslider_second">
 </item>
    -->
 <item android:id="@android:id/progress">
  <clip android:clipOrientation="vertical" android:drawable="@drawable/imgslider"
  
   android:gravity="top">
  </clip>
 </item>
</layer-list>

 

代碼中的clip節點一共有四個屬性，其中clipOrientation就是用來設置progress走向的，這里設置成vertical，圖片就是剛才那張彩色弧形的圖即可。