BubbleSeekBar

锲而舍之，朽木不折;锲而不舍，金石可镂。——《荀子·劝学》

https://github.com/woxingxiao/BubbleSeekBar

BubbleSeekBar：优雅的 Android 自定义进度条组件

在 Android 开发中，进度条（SeekBar）是一个重要的控件，常用于调节数值或显示进度。然而，原生的 SeekBar 功能有限，无法满足一些视觉效果和交互体验的需求，比如显示实时数值或提供更直观的用户反馈。

今天我们来介绍一个开源的 Android 自定义控件——BubbleSeekBar。它不仅功能强大，还拥有优雅的视觉效果，能够轻松实现实时数值显示的需求。

---

什么是 BubbleSeekBar？

BubbleSeekBar 是一个高度可定制的 Android 自定义控件，用于实现带有气泡样式的 SeekBar。在拖动进度条时，气泡会显示当前的数值，提供更好的用户反馈和交互体验。

---

主要功能

1. 实时数值显示：气泡会在用户拖动进度条时显示当前数值。
2. 高度可定制化：
   • 支持设置气泡样式、颜色、大小等。
   • 支持定制进度条的样式、颜色和分布。
3. 支持分段模式：可以将进度条分为多个段，适用于评分、等级选择等场景。
4. 多种动画效果：气泡的出现和消失带有流畅的动画效果。
5. 便捷使用：通过简单的 XML 属性配置即可快速上手。

---

快速上手指南

以下是使用 BubbleSeekBar 的基本步骤：

1. 添加依赖

在项目的 build.gradle 文件中添加以下依赖：

dependencies {
    implementation 'com.xw.repo:bubbleseekbar:latest_version'
}

将 latest_version 替换为 GitHub Releases 页面的最新版本号。

---

2. 在布局文件中使用

在 XML 中添加 BubbleSeekBar：

<com.xw.repo.BubbleSeekBar
    android:id="@+id/bubbleSeekBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:bsb_min="0"
    app:bsb_max="100"
    app:bsb_progress="50"
    app:bsb_track_color="@color/gray"
    app:bsb_second_track_color="@color/blue"
    app:bsb_thumb_color="@color/blue"
    app:bsb_bubble_color="@color/blue"
    app:bsb_bubble_text_color="@color/white"
    app:bsb_show_section_mark="true"
    app:bsb_auto_adjust_section_mark="true" />

常用属性说明

• app:bsb_min：设置进度条的最小值。
• app:bsb_max：设置进度条的最大值。
• app:bsb_progress：设置当前进度。
• app:bsb_track_color：进度条背景轨道的颜色。
• app:bsb_second_track_color：进度条已完成部分的颜色。
• app:bsb_thumb_color：拖动圆点的颜色。
• app:bsb_bubble_color：气泡的背景颜色。
• app:bsb_bubble_text_color：气泡文字的颜色。
• app:bsb_show_section_mark：是否显示分段标记。
• app:bsb_auto_adjust_section_mark：是否自动调整到分段标记。

---

3. 在代码中动态控制

BubbleSeekBar 提供了丰富的 API，可以在代码中动态设置参数或监听事件：

val bubbleSeekBar = findViewById<BubbleSeekBar>(R.id.bubbleSeekBar)

// 设置进度
bubbleSeekBar.setProgress(75f)

// 设置监听器
bubbleSeekBar.onProgressChangedListener = object : BubbleSeekBar.OnProgressChangedListener {
    override fun onProgressChanged(progress: Int, progressFloat: Float, fromUser: Boolean) {
        println("当前进度：$progress")
    }

    override fun getProgressOnActionUp(progress: Int, progressFloat: Float) {
        println("用户松开时的进度：$progress")
    }

    override fun getProgressOnFinally(progress: Int, progressFloat: Float, fromUser: Boolean) {
        println("最终进度：$progress")
    }
}

---

进阶功能

1. 分段模式

BubbleSeekBar 支持将进度条分为多个段，并自动调整到最近的段值。例如：

<com.xw.repo.BubbleSeekBar
    android:id="@+id/bubbleSeekBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:bsb_min="0"
    app:bsb_max="100"
    app:bsb_progress="50"
    app:bsb_show_section_mark="true"
    app:bsb_section_count="5"
    app:bsb_auto_adjust_section_mark="true" />

通过 app:bsb_section_count 属性设置段数，适用于评分或等级选择。

---

2. 动态更新样式

可以通过代码动态更改样式，例如：

bubbleSeekBar.setSecondTrackColor(Color.RED)
bubbleSeekBar.setBubbleColor(Color.GREEN)
bubbleSeekBar.setBubbleTextColor(Color.WHITE)

---

3. 自定义气泡内容

BubbleSeekBar 支持自定义气泡的显示内容，通过实现 BubbleSeekBar.OnBubbleTextListener：

bubbleSeekBar.setOnBubbleTextListener { progress ->
    "等级：$progress"
}

---

应用场景

1. 评分系统：用户可以通过拖动进度条选择评分。
2. 音量调节：气泡实时显示音量大小，提升交互体验。
3. 亮度调节：用于调节屏幕亮度，显示具体数值。
4. 时间选择器：通过分段模式选择时间段。

---

总结

BubbleSeekBar 是一个功能强大且优雅的 Android 自定义控件，能够显著提升进度条的交互体验。它不仅支持实时数值显示，还提供了丰富的样式定制和强大的分段功能，适用于多种应用场景。

项目地址：https://github.com/woxingxiao/BubbleSeekBar

如果你正在寻找一个视觉效果出众的进度条控件，不妨试试 BubbleSeekBar 吧！欢迎为项目点亮 ⭐️！