用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，图片就是刚才那张彩色弧形的图即可。