Android的SeekBar

SeekBar 自定义与优化

最新推荐文章于 2025-09-04 18:05:20 发布

最新推荐文章于 2025-09-04 18:05:20 发布 · 256 阅读

文章标签：

#移动开发

Android 专栏收录该内容

27 篇文章

订阅专栏

本文详细介绍了如何解决SeekBar在UI布局中的常见问题，包括拖动按钮居中、高度调整及显示完整等。通过自定义样式和图片资源实现美观且实用的SeekBar组件。

使用SeekBar的时候，经常遇到的问题有如下：

1. seekbar的拖动按钮没有居中。

2. seekbar的高度有问题。

3. seekbar的拖动按钮在最左最右显示不全。

首先，要解决上述问题，要先检查layout文件在描述seekbar时，有没有正确设置图片的尺寸和检查屏幕密度与图片是否放置在相应的drawable文件夹中（drawable-hdpi, drawable-mdpi, drawable-ldpi）.

在确保图片资源正确的情况下，参考如下XML：

layout

<SeekBar
	android:layout_width="321px"
	android:layout_height="wrap_content"
	android:layout_centerInParent="true"
	android:maxHeight="12px"
	android:minHeight="12px"
	android:paddingLeft="18px"
	android:paddingRight="18px"
	android:max="100"
	android:progressDrawable="@drawable/seekbar_style"
	android:thumb="@drawable/drag_ball"
	android:id="@+id/seekBar"/>

seekbar_style

<layer-list
	xmlns:android="http://schemas.android.com/apk/res/android">
	<item
		android:id="@android:id/background"
		android:drawable="@drawable/drag_bar_background"/>
	<item
		android:id="@android:id/progress"
		android:drawable="@drawable/drag_bar_foreground"/>
	<item
		android:id="@android:id/secondaryProgress"
		android:drawable="@drawable/drag_bar_foreground"/>
</layer-list>

简单解释下seekbar中几个重要的属性：

android:layout_height="wrap_content"

//建议使用wrap_content，否则一定要保证设置的值不小于seekbar图片资源中的最高值

android:maxHeight="12px"
android:minHeight="12px"

//说明进度条的最低和最大高度，解决高度问题。

android:paddingLeft="18px"
android:paddingRight="18px"

//解决拖动按钮在最左最右显示不全的问题，padding的值一般是thumb的一半宽度。

android:progressDrawable="@drawable/seekbar_style"

//设置了此值，就表示使用自定义的进度条样式，在其中可以设置进度条背景图，进度条图，缓冲条图。

android:thumb="@drawable/drag_ball"
//seekbar的拖动按钮图片

android系统自带的自定义样式例子：

seekbar_style

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">  
     <item android:id="@android:id/background">  
         <shape>  
             <corners android:radius="5dip" />  
             <gradient  
                     android:startColor="#ff9d9e9d"  
                     android:centerColor="#ff5a5d5a"  
                     android:centerY="0.75"  
                     android:endColor="#ff747674"  
                     android:angle="270"/>  
         </shape>  
     </item>  
     <item android:id="@android:id/secondaryProgress">  
         <clip>  
             <shape>  
                 <corners android:radius="5dip" />  
                 <gradient  
                         android:startColor="#80ffd300"  
                         android:centerColor="#80ffb600"  
                         android:centerY="0.75"  
                         android:endColor="#a0ffcb00"  
                         android:angle="270"/>  
             </shape>  
         </clip>  
     </item>  
     <item android:id="@android:id/progress">  
         <clip>  
             <shape>  
                 <corners android:radius="5dip" />  
                 <gradient  
                         android:startColor="#ff0099CC"  
                         android:centerColor="#ff3399CC"  
                         android:centerY="0.75"  
                         android:endColor="#ff6699CC"  
                         android:angle="270"/>  
             </shape>  
         </clip>  
     </item>  
</layer-list>

thumb

<selector xmlns:android="http://schemas.android.com/apk/res/android">        
       
    <!-- 按下状态-->  
    <item    
        android:state_focused="true"    
        android:state_pressed="true"    
        android:drawable="@drawable/thumb_pressed" />        
    <!-- 普通无焦点状态 -->  
    <item    
        android:state_focused="false"    
        android:state_pressed="false"  
        android:drawable="@drawable/thumb_normal" />              
    <!-- 有焦点状态-->  
    <item    
        android:state_focused="true"    
        android:state_pressed="false"              
        android:drawable="@drawable/thumb_focused" />         
    <!-- 有焦点 -->  
    <item    
        android:state_focused="true"              
        android:drawable="@drawable/thumb_focused" />     
</selector>