Android SeekBar自定义UI

 

AndroidSeekBar自定义UI  

本文链接：http://mawenhao19930620.blog.163.com/blog/static/1285753612011112131423826/

2011-12-21 15:14:23|  分类：Linux&Android |  标签： |举报|字号大中小 订阅

1、将part.png 、point.png 、 total.png放入资源文件夹 /res/drawable/ 中

2、在 /res/drawable/ 下新建两个文件：seek_img.xml   thumb.xml

seek_img.xml

   
   

    
    <?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/total" />
   
   
   
   

    
        <!--全部能量图  -->
   
   
   
   

    
      <item
   
   
   
   

    
        
    
    android:id="@+
    
    android:id/SecondaryProgress"
   
   
   
   

    
        
    
    android:drawable="@drawable/total" />
   
   
   
   

    
        <!-- 进和能量图 -->
   
   
   
   

    
      <item
   
   
   
   

    
        
    
    android:id="@+
    
    android:id/progress"
   
   
   
   

    
        
    
    android:drawable="@drawable/part" />
   
   
   
   

    
    </layer-list>
   
   

thumb.xml

   
   

    
    <?xml version="1.0" encoding="utf-8"?>
   
   
   
   

    
    <selector xmlns:
    
    android="http://schemas.
    
    android.com/apk/res/
    
    android">           
   
   
   
   

    
        <!-- 按下状态 -->    
   
   
   
   

    
        <item       
   
   
   
   

    
            
    
    android:state_pressed="true" 
    
    android:state_focused="true"     
   
   
   
   

    
            
    
    android:drawable="@drawable/point" />
   
   
   
   

    
        <!-- 普通无焦点状态 -->    
   
   
   
   

    
        <item
   
   
   
   

    
            
    
    android:state_focused="false"      
   
   
   
   

    
            
    
    android:state_pressed="false"    
   
   
   
   

    
            
    
    android:drawable="@drawable/point" />
   
   
   
   

    
    </selector>
   
   

3、定义好上面两个xml后，就可以在 /res/layout/main.xml中调用它们了。 

   
   

    
    <?xml version="1.0" encoding="utf-8"?>
   
   
   
   

    
    <LinearLayout xmlns:
    
    android="http://schemas.
    
    android.com/apk/res/
    
    android"
   
   
   
   

    
        
    
    android:orientation="vertical"
   
   
   
   

    
        
    
    android:layout_width="fill_parent"
   
   
   
   

    
        
    
    android:layout_height="fill_parent">
   
   
   
   

    
        <
    
    SeekBar
   
   
   
   

    
            
    
    android:id="@+id/sBar"
   
   
   
   

    
            
    
    android:layout_width="fill_parent"
   
   
   
   

    
            
    
    android:layout_height="wrap_content"
   
   
   
   

    
            
    
    android:layout_centerInParent="true"
   
   
   
   

    
            
    
    android:minHeight="5dip"
   
   
   
   

    
            
    
    android:maxHeight="5dip"
   
   
   
   

    
            
    
    android:progressDrawable="@drawable/seek_img"
   
   
   
   

    
            
    
    android:thumb="@drawable/thumb"
   
   
   
   

    
    />
   
   
   
   

    
    </LinearLayout>
   
   

4、运行 Android程序，就可以显示出上图的效果了 。 

 

 

//20140609_begin

真心地说，这是一篇好文章！苦恼我多时的问题迎刃而解。多谢博主分享！

//20130609_end