seekbar

SeekBar 可拖动进度条

sky-mxc 总结 转载注明:https://sky-mxc.github.io/2016/09/30/SeekBar

  • 常用属性
  • 常用方法
  • 自定义样式

常用的属性

  • max 最大值
  • progress 进度值
  • secondaryProgress 第二进度条
  • progressDrawable 进度图片
  • thumb 拖拽按钮
  • thumbOffset 拖拽按钮位置补偿
  • maxHeight/maxWidth 最大宽高
  • minHeight/minWidth 最小宽高

可通过 maxHeight ,minHeight 控制 高度


常用方法

  • setProgress() 设置进度值
  • getProgress() 获取进度值
  • setSecondaryProgress() 设置第二进度值
  • getSecondaryProgress() 获取第二进度值
  • setSeekBarChangeListener() 设置seekbar拖动改变监听

自定义样式

  • 自定义 背景
  • 自定义进度样式
  • 自定义滑块

自定义背景和进度样式 这里使用简单的shape图片 通过 progressDrawable 属性设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<?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>
<solid android:color="#353b35"/>
<corners android:radius="10dp"/>
</shape>
</item>
<item android:id="@android:id/progress">
<clip>
<shape>
<solid android:color="#10b410"/>
<corners android:radius="10dp"/>
</shape>
</clip>
</item>
</layer-list>

自定义滑块 通过 属性thumb 设置 这里也是通过shape图形绘制,滑块的高度 是可以自定义的 在这里就可以设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<!--按下-->
<shape>
<solid android:color="#b31395"/>
<corners android:radius="10dp"/>
<size android:height="40dp"
android:width="20dp"/>
</shape>
</item>
<item android:state_focused="false">
<shape>
<solid android:color="#362d35"/>
<corners android:radius="10dp"/>
<size android:height="40dp"
android:width="20dp"/>
</shape>
</item>
<item >
<shape>
<solid android:color="#362d35"/>
<corners android:radius="10dp"/>
<size android:height="40dp"
android:width="20dp"/>
</shape>
</item>
</selector>

高度通过 minHeight maxHeight 设置

1
2
3
4
5
6
7
8
9
10
11
<SeekBar
android:id="@+id/seek_bar_0"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="100"
android:progress="20"
android:layout_margin="10dp"
android:maxHeight="20dp"
android:minHeight="20dp"
android:thumb="@drawable/selector_seek_thumb_bg"
android:progressDrawable="@drawable/selector_seekbar_bg"/>

实例图
实例图