SeekBar

这里实现了如下所示的进度条

进度条如线状显示，带有少许发散效果
拖拽按钮用圆显示，采用发散效果。（类似太阳的效果）
     这个效果主要有这样几个难点：进度条的高度会随着seekbar的宽度变化，然而seekbar宽度过小又会遮罩住部分拖拽按钮；拖拽按钮使用shape方式生产，而非图像。网上给的这部分介绍基本采用了一个版本，具体介绍见http://bashenmail.iteye.com/blog/603649 ，该文给出的实现方法并没有解决了这两个难点。~~~~(>_<)~~~~ ，折腾来折腾去的...

     转载请注明http://ishelf.iteye.com/admin/blogs/741470

     接下来边贴代码边介绍。这里是基于android源码给出的实例修改而成的（只给出了部分重要代码），首先给出主界面

Java代码 复制代码 收藏代码
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="vertical" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"><!--  
 
  <SeekBar android:id="@+id/seek1" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:max="100" 
        android:progress="50" 
        android:secondaryProgress="75" />  
 
    --><SeekBar android:id="@+id/seek"   
        android:layout_width="fill_parent" android:progressDrawable="@drawable/seekbar_style" 
        android:thumb="@drawable/thumb1" android:layout_height="wrap_content" 
        android:paddingLeft="2px" android:paddingRight="3dip" 
        android:paddingBottom="4px" />  
          
    <TextView android:id="@+id/progress" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" />  
 
    <TextView android:id="@+id/tracking" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" />  
</LinearLayout> 
[java] view plaincopy
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="vertical" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"><!-- 
 
  <SeekBar android:id="@+id/seek1" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:max="100" 
        android:progress="50" 
        android:secondaryProgress="75" /> 
 
    --><SeekBar android:id="@+id/seek"  
        android:layout_width="fill_parent" android:progressDrawable="@drawable/seekbar_style" 
        android:thumb="@drawable/thumb1" android:layout_height="wrap_content" 
        android:paddingLeft="2px" android:paddingRight="3dip" 
        android:paddingBottom="4px" /> 
         
    <TextView android:id="@+id/progress" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" /> 
 
    <TextView android:id="@+id/tracking" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" /> 
</LinearLayout> 
    注意一下两个属性



Java代码 复制代码 收藏代码
android:progressDrawable="@drawable/seekbar_style"//进度条  
android:thumb="@drawable/thumb1"//拖拽按钮 
[java] view plaincopy
android:progressDrawable="@drawable/seekbar_style"//进度条 
android:thumb="@drawable/thumb1"//拖拽按钮 
   它们对应的xml档案如下：

   thumb1.xml

Xml代码 复制代码 收藏代码
<?xml version="1.0" encoding="UTF-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
    <!-- 按下状态--> 
    <item android:state_focused="true" android:state_pressed="true"> 
        <shape android:shape="oval"> 
            <gradient android:type="radial" android:gradientRadius="8" 
                android:angle="0" android:startColor="#FFFF0000" 
                android:centerColor="#FF00FF00" android:endColor="#000000" /> 
            <size android:width="16dip" android:height="16dip"></size> 
        </shape> 
    </item> 
......//这里用的oval椭圆，注意gradient android:type=  
......//"radial" android:gradientRadius="8" 这两个属性需  
......//要一起使用。  
......  
</selector> 
[xml] view plaincopy
<?xml version="1.0" encoding="UTF-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
    <!-- 按下状态--> 
    <item android:state_focused="true" android:state_pressed="true"> 
        <shape android:shape="oval"> 
            <gradient android:type="radial" android:gradientRadius="8" 
                android:angle="0" android:startColor="#FFFF0000" 
                android:centerColor="#FF00FF00" android:endColor="#000000" /> 
            <size android:width="16dip" android:height="16dip"></size> 
        </shape> 
    </item> 
......//这里用的oval椭圆，注意gradient android:type= 
......//"radial" android:gradientRadius="8" 这两个属性需 
......//要一起使用。 
...... 
</selector> 
seekbar_style.xml

Xml代码 复制代码 收藏代码
<?xml version="1.0" encoding="UTF-8"?> 
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 
        ................//  
        ................//  
        ................//  
 
    <item android:id="@android:id/progress"> 
        <clip> 
            <shape android:shape="rectangle"> 
                <corners android:radius="2dip" /> 
                <gradient android:startColor="#80000000" android:width="5dp" 
                    android:centerColor="#7e209e" android:centerY="0.5" android:angle="90" 
                    android:endColor="#80000000" /> 
                <stroke android:width="8dp" android:color="#80000000" 
                    android:dashWidth="3dp" android:dashGap="2dp" /> 
            </shape> 
        </clip> 
        ............//在这里设置高度实验了很多次总是行不通（谁要是通过  
        ............//这种方法搞定高度，记得留言给我(～ o ～)~）  
        ............//于是使用了一个遮罩层（边框），因为边框的高度也  
        ............//是由seekbar决定的。这里将进度条的大部分遮  
        ............//罩，只留出中间一部分。还有注意这里的边框  
        ............//使用的间隔效果，所以会有发散的效果。具体效果怎样  
        ............//需要自己测试一下，这里就不贴图了。  
 
</layer-list>