Android kotlin 自定义Seekbar,实现一个横向的滑动条,刻度位置为小,默认,大,最大,点击或者滑动到刻度位置,四个位置添加竖线
时间: 2024-03-12 18:45:38 浏览: 156
好的,您可以参考以下代码实现:
1.在XML布局文件中添加SeekBar控件,设置样式和属性:
```xml
<SeekBar
android:id="@+id/seekBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:progressDrawable="@drawable/seekbar_progress"
android:thumb="@drawable/seekbar_thumb"
android:max="100"
android:padding="0dp"
android:splitTrack="false"
android:thumbOffset="0dp" />
```
2.创建drawable文件夹,添加seekbar_progress.xml和seekbar_thumb.xml文件,实现自定义样式:
seekbar_progress.xml:
```xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 滑动条底部 -->
<item android:id="@android:id/background">
<shape android:shape="rectangle">
<corners android:radius="4dp"/>
<solid android:color="#CCCCCC"/>
</shape>
</item>
<!-- 滑动条进度 -->
<item android:id="@android:id/progress">
<clip>
<shape android:shape="rectangle">
<corners android:radius="4dp"/>
<solid android:color="#FF4081"/>
</shape>
</clip>
</item>
</layer-list>
```
seekbar_thumb.xml:
```xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<size android:width="20dp"
android:height="20dp"/>
<solid android:color="#FF4081"/>
</shape>
```
3.在Activity或Fragment中设置SeekBar的监听器,实现刻度位置的添加和点击事件的处理:
```kotlin
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
// 设置SeekBar的监听器
seekBar.setOnSeekBarChangeListener(object : SeekBar.OnSeekBarChangeListener {
override fun onProgressChanged(seekBar: SeekBar?, progress: Int, fromUser: Boolean) {
// do nothing
}
override fun onStartTrackingTouch(seekBar: SeekBar?) {
// do nothing
}
override fun onStopTrackingTouch(seekBar: SeekBar?) {
// 获取SeekBar的最大值和当前进度
val max = seekBar?.max ?: 0
val progress = seekBar?.progress ?: 0
// 计算刻度位置的值
val scale1 = max / 4
val scale2 = scale1 * 2
val scale3 = scale1 * 3
// 判断是否在刻度位置上
when {
progress < scale1 -> {
seekBar?.progress = 0
}
progress >= scale1 && progress < scale2 -> {
seekBar?.progress = scale1
}
progress >= scale2 && progress < scale3 -> {
seekBar?.progress = scale2
}
progress >= scale3 -> {
seekBar?.progress = scale3
}
}
}
})
}
}
```
4.在seekbar_progress.xml中添加竖线刻度线:
在seekbar_progress.xml中添加以下代码,实现竖线刻度线的显示:
```xml
<!-- 刻度线 -->
<item android:id="@android:id/secondaryProgress">
<bitmap android:src="@drawable/seekbar_scale"
android:tileMode="repeat"
android:dither="true"/>
</item>
```
同时,在drawable文件夹中添加seekbar_scale.xml文件,实现刻度线的样式:
```xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line">
<stroke android:width="1dp"
android:color="#CCCCCC"/>
<size android:width="1dp"
android:height="10dp"/>
</shape>
```
5.运行程序,查看效果:
运行程序后,您会看到一个横向的滑动条,四个刻度位置分别为小、默认、大、最大,并且在这四个位置上添加了竖线刻度线。当您点击或滑动到刻度位置时,SeekBar会自动跳转到相应的刻度位置上。
阅读全文