Android高颜值进度条全场景方案：RoundCornerProgressBar完全指南

原创 于 2024-11-12 12:51:56 发布 · 402 阅读 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

Android高颜值进度条全场景方案：RoundCornerProgressBar完全指南

【免费下载链接】RoundCornerProgressBar [Android] Round Corner Progress Bar Library for Android 【免费下载链接】RoundCornerProgressBar 项目地址: https://gitcode.com/gh_mirrors/ro/RoundCornerProgressBar

你还在为Android原生进度条的呆板样式发愁吗？还在纠结如何实现带图标的进度展示？或是为进度条动画效果不佳而烦恼？本文将系统讲解RoundCornerProgressBar的5大核心组件、23种自定义属性和8类实战场景，帮你彻底解决进度条UI设计难题。

读完本文你将获得：

  • 掌握5种圆角进度条组件的完整用法
  • 学会23个自定义属性的组合配置技巧
  • 获取8个真实场景的实现代码模板
  • 了解性能优化和版本迁移的最佳实践

项目概述

RoundCornerProgressBar是一款专为Android平台设计的高颜值进度条库，以其丰富的样式定制能力和流畅的动画效果，成为替代原生ProgressBar的理想选择。该库由泰国开发者Akexorcist创建并维护，目前已迭代至2.2.2版本，累计在GitHub获得超过3000星标，被广泛应用于下载管理器、健康应用、媒体播放器等场景。

核心优势

特性原生ProgressBarRoundCornerProgressBar
圆角样式❌ 不支持✅ 全角/半角可配置
渐变颜色⚠️ 需自定义Drawable✅ 内置渐变支持
图标集成❌ 不支持✅ 内置图标容器
文字显示❌ 不支持✅ 进度文本内嵌/外显
中心扩展❌ 不支持✅ 支持中心向外扩展
动画效果⚠️ 基础动画✅ 平滑过渡+ indeterminate模式
反向进度❌ 不支持✅ 支持从右向左

组件架构

mermaid

快速上手

环境配置

在项目级build.gradle中添加Maven中央仓库（已内置国内镜像）：

allprojects {
    repositories {
        mavenCentral()
    }
}

在应用级build.gradle中添加依赖：

dependencies {
    implementation 'com.akexorcist:round-corner-progress-bar:2.2.2'
}

基础使用

在XML布局文件中添加命名空间：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    
    <!-- 基础圆角进度条 -->
    <com.akexorcist.roundcornerprogressbar.RoundCornerProgressBar
        android:layout_width="260dp"
        android:layout_height="30dp"
        android:layout_margin="16dp"
        app:rcBackgroundColor="#E0E0E0"
        app:rcBackgroundPadding="2dp"
        app:rcMax="100"
        app:rcProgress="65"
        app:rcProgressColor="#2196F3"
        app:rcRadius="15dp"
        app:rcSecondaryProgress="80"
        app:rcSecondaryProgressColor="#BBDEFB"/>
</LinearLayout>

上述代码将创建一个宽260dp、高30dp的蓝色进度条，当前进度65%， secondary进度80%，圆角半径15dp，背景色浅灰，内边距2dp。

核心组件详解

1. RoundCornerProgressBar（基础型）

最基础的圆角进度条组件，支持正向/反向进度显示，适用于大多数基础场景。

关键属性

属性名类型默认值描述
rcProgressfloat0主进度值
rcSecondaryProgressfloat0次要进度值
rcMaxfloat100最大进度值
rcRadiusdimension30dp圆角半径
rcBackgroundPaddingdimension0dp背景内边距
rcReversebooleanfalse是否反向显示
rcProgressColorcolor-主进度颜色
rcProgressColorsreference-主进度渐变色数组

代码示例

<!-- 反向进度条 -->
<com.akexorcist.roundcornerprogressbar.RoundCornerProgressBar
    android:layout_width="match_parent"
    android:layout_height="24dp"
    app:rcBackgroundColor="#EFEFEF"
    app:rcBackgroundPadding="3dp"
    app:rcMax="100"
    app:rcProgress="35"
    app:rcProgressColor="#F44336"
    app:rcRadius="12dp"
    app:rcReverse="true"/>

Kotlin控制代码

val progressBar = findViewById<RoundCornerProgressBar>(R.id.progress_bar)
progressBar.max = 150f
progressBar.progress = 75f
progressBar.setProgressColors(intArrayOf(Color.RED, Color.YELLOW)) // 渐变
progressBar.radius = 20 // 像素值
progressBar.reverse = true

2. CenteredRoundCornerProgressBar（中心扩展型）

从中心向两侧扩展的进度条，视觉效果更具冲击力，适合需要突出进度变化的场景。

特性：

  • 进度从中心向两侧对称扩展
  • 不支持反向显示（rcReverse属性无效）
  • 其他属性与基础型保持一致

代码示例：

<com.akexorcist.roundcornerprogressbar.CenteredRoundCornerProgressBar
    android:layout_width="match_parent"
    android:layout_height="32dp"
    app:rcBackgroundColor="#E0E0E0"
    app:rcBackgroundPadding="4dp"
    app:rcMax="100"
    app:rcProgress="60"
    app:rcProgressColor="#4CAF50"
    app:rcRadius="16dp"/>

适用场景：

  • 健康应用中的目标完成度展示
  • 评分进度展示
  • 音量/亮度调节指示器

3. IconRoundCornerProgressBar（图标型）

集成图标显示的进度条，适合需要分类标识的进度展示场景。

扩展属性：

属性名类型描述
rcIconSrcreference图标资源ID
rcIconSizedimension图标尺寸
rcIconPaddingdimension图标内边距
rcIconBackgroundColorcolor图标背景色

代码示例：

<com.akexorcist.roundcornerprogressbar.IconRoundCornerProgressBar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:rcBackgroundColor="#F5F5F5"
    app:rcBackgroundPadding="3dp"
    app:rcIconBackgroundColor="#2196F3"
    app:rcIconPadding="5dp"
    app:rcIconSize="40dp"
    app:rcIconSrc="@drawable/ic_download"
    app:rcMax="150"
    app:rcProgress="90"
    app:rcProgressColor="#4CAF50"
    app:rcRadius="8dp"/>

Kotlin动态设置图标：

val iconProgressBar = findViewById<IconRoundCornerProgressBar>(R.id.icon_progress_bar)
// 方式1：资源ID
iconProgressBar.setIconImageResource(R.drawable.ic_upload)
// 方式2：Drawable
val drawable = ContextCompat.getDrawable(this, R.drawable.ic_pause)
iconProgressBar.setIconImageDrawable(drawable)
// 方式3：Bitmap
val bitmap = BitmapFactory.decodeResource(resources, R.drawable.ic_play)
iconProgressBar.setIconImageBitmap(bitmap)

4. TextRoundCornerProgressBar（文本型）

内置文本显示的进度条，可在进度条内部或外部显示进度数值，减少布局嵌套。

文本相关属性：

属性名类型描述
rcTextProgressstring显示文本
rcTextProgressColorcolor文本颜色
rcTextProgressSizedimension文本大小
rcTextProgressMargindimension文本边距
rcTextInsideGravityenum内部文本对齐（start/end）
rcTextOutsideGravityenum外部文本对齐（start/end）
rcTextPositionPriorityenum文本位置优先级（inside/outside）

代码示例：

<com.akexorcist.roundcornerprogressbar.TextRoundCornerProgressBar
    android:layout_width="match_parent"
    android:layout_height="36dp"
    app:rcBackgroundColor="#EEEEEE"
    app:rcBackgroundPadding="4dp"
    app:rcMax="100"
    app:rcProgress="68"
    app:rcProgressColor="#2196F3"
    app:rcRadius="18dp"
    app:rcTextInsideGravity="end"
    app:rcTextPositionPriority="inside"
    app:rcTextProgress="68%"
    app:rcTextProgressColor="#FFFFFF"
    app:rcTextProgressSize="14sp"/>

文本位置优先级说明：

  • inside：优先显示在进度条内部，空间不足时显示在外部
  • outside：优先显示在进度条外部，空间不足时显示在内部

5. IndeterminateRoundCornerProgressBar（不确定进度型）

无限循环动画的进度条，用于无法确定具体进度的场景，如网络加载、文件处理等。

特性：

  • 自动循环动画，无需设置进度
  • 支持中心扩展和普通两种样式
  • 可调节动画速度

代码示例：

<!-- 中心扩展的不确定进度条 -->
<com.akexorcist.roundcornerprogressbar.indeterminate.IndeterminateCenteredRoundCornerProgressBar
    android:layout_width="200dp"
    android:layout_height="8dp"
    app:rcBackgroundColor="#E0E0E0"
    app:rcBackgroundPadding="1dp"
    app:rcProgressColor="#2196F3"
    app:rcRadius="4dp"
    app:rcAnimationSpeedScale="1.5"/> <!-- 1.5倍速 -->

动画速度调节：

  • rcAnimationSpeedScale：动画速度比例，默认1.0
  • 取值范围：0.2~5.0（值越小速度越快）

高级用法

渐变颜色实现

通过颜色数组资源实现渐变效果，支持主进度和次要进度单独设置。

步骤1：定义颜色数组

<!-- res/values/arrays.xml -->
<resources>
    <array name="gradient_blue">
        <item>#2196F3</item>
        <item>#03A9F4</item>
        <item>#00BCD4</item>
    </array>
    <array name="gradient_red">
        <item>#F44336</item>
        <item>#EF5350</item>
        <item>#E57373</item>
    </array>
</resources>

步骤2：在布局中引用

<com.akexorcist.roundcornerprogressbar.RoundCornerProgressBar
    android:layout_width="match_parent"
    android:layout_height="30dp"
    app:rcBackgroundColor="#F5F5F5"
    app:rcBackgroundPadding="3dp"
    app:rcMax="100"
    app:rcProgress="75"
    app:rcProgressColors="@array/gradient_blue"
    app:rcRadius="15dp"
    app:rcSecondaryProgress="90"
    app:rcSecondaryProgressColors="@array/gradient_red"/>

进度动画控制

所有进度条组件（除不确定型外）默认关闭进度变化动画，需手动开启。

XML开启动画：

<com.akexorcist.roundcornerprogressbar.RoundCornerProgressBar
    ...
    app:rcAnimationEnable="true"
    app:rcAnimationSpeedScale="1.2"/> <!-- 动画速度 -->

Kotlin控制动画：

val progressBar = findViewById<RoundCornerProgressBar>(R.id.progress_bar)
progressBar.enableAnimation() // 开启动画
progressBar.animationSpeedScale = 0.8f // 减慢动画
progressBar.setProgress(60f) // 带动画的进度变化

// 监听动画状态
if (!progressBar.isProgressAnimating) {
    // 动画未运行
}

性能提示：

  • 频繁更新进度（如每秒多次）时建议关闭动画
  • 列表项中的进度条慎用动画，可能导致滚动卡顿
  • 可在recyclerView.addOnScrollListener中根据滚动状态开关动画

自定义复合组件

通过继承AnimatedRoundCornerProgressBar实现完全自定义的进度条组件。

示例：带数字指示器的进度条

class NumberIndicatorProgressBar @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : AnimatedRoundCornerProgressBar(context, attrs, defStyleAttr) {

    private lateinit var indicatorView: TextView
    
    override fun initLayout(): Int = R.layout.layout_custom_progress_bar // 自定义布局
    
    override fun initView() {
        indicatorView = findViewById(R.id.indicator)
        // 初始化自定义视图
    }
    
    override fun drawProgress(
        layoutProgress: LinearLayout,
        progressDrawable: GradientDrawable,
        max: Float,
        progress: Float,
        totalWidth: Float,
        radius: Int,
        padding: Int,
        isReverse: Boolean
    ) {
        super.drawProgress(layoutProgress, progressDrawable, max, progress, totalWidth, radius, padding, isReverse)
        // 更新数字指示器位置和数值
        val percentage = (progress / max * 100).toInt()
        indicatorView.text = "$percentage%"
        // 计算位置...
    }
}

实战场景案例

案例1：下载管理器进度条

<com.akexorcist.roundcornerprogressbar.IconRoundCornerProgressBar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginHorizontal="16dp"
    android:layout_marginVertical="8dp"
    app:rcBackgroundColor="#F5F5F5"
    app:rcBackgroundPadding="4dp"
    app:rcIconBackgroundColor="#4CAF50"
    app:rcIconPadding="6dp"
    app:rcIconSize="36dp"
    app:rcIconSrc="@drawable/ic_download"
    app:rcMax="100"
    app:rcProgress="65"
    app:rcProgressColor="#2196F3"
    app:rcRadius="8dp"/>

交互逻辑：

  • 点击图标暂停/继续下载
  • 长按显示操作菜单
  • 进度完成后图标变为对勾

案例2：健康应用步数进度

<com.akexorcist.roundcornerprogressbar.CenteredRoundCornerProgressBar
    android:layout_width="match_parent"
    android:layout_height="48dp"
    app:rcAnimationEnable="true"
    app:rcBackgroundColor="#E8F5E9"
    app:rcBackgroundPadding="6dp"
    app:rcMax="10000"
    app:rcProgress="7568"
    app:rcProgressColors="@array/gradient_green"
    app:rcRadius="24dp"/>

Kotlin代码：

val stepProgressBar = findViewById<CenteredRoundCornerProgressBar>(R.id.step_progress)
stepProgressBar.max = 10000f
stepProgressBar.setProgressColors(resources.getIntArray(R.array.gradient_green))
stepProgressBar.enableAnimation()

// 模拟步数更新
fun updateSteps(newSteps: Int) {
    stepProgressBar.setProgress(newSteps.toFloat())
    val percentage = (newSteps / 10000f * 100).toInt()
    binding.stepText.text = "$newSteps 步 ($percentage%)"
}

案例3：视频播放进度条

<com.akexorcist.roundcornerprogressbar.TextRoundCornerProgressBar
    android:layout_width="match_parent"
    android:layout_height="4dp"
    app:rcBackgroundColor="#333333"
    app:rcBackgroundPadding="0dp"
    app:rcMax="100"
    app:rcProgress="45"
    app:rcProgressColor="#FF4081"
    app:rcRadius="2dp"
    app:rcSecondaryProgress="60"
    app:rcSecondaryProgressColor="#55FFFFFF"
    app:rcTextPositionPriority="outside"
    app:rcTextProgress="01:45/03:40"
    app:rcTextProgressColor="#FFFFFF"
    app:rcTextProgressSize="12sp"/>

交互特性：

  • 拖动调整进度
  • 点击进度条任意位置跳转
  • 进度文本显示当前时间/总时间

性能优化指南

内存占用优化

  1. 避免过度绘制

    • 减少进度条嵌套层级
    • 合理设置背景透明度，避免GPU过度混合

  2. 列表中的进度条

    • 复用视图，避免频繁创建
    • 快速滑动时暂停动画和进度更新
recyclerView.addOnScrollListener(object : RecyclerView.OnScrollListener() {
    override fun onScrollStateChanged(recyclerView: RecyclerView, newState: Int) {
        val isScrolling = newState != RecyclerView.SCROLL_STATE_IDLE
        for (i in 0 until recyclerView.childCount) {
            val view = recyclerView.getChildAt(i)
            val progressBar = view.findViewById<RoundCornerProgressBar>(R.id.item_progress)
            if (isScrolling) {
                progressBar.disableAnimation()
            } else {
                progressBar.enableAnimation()
            }
        }
    }
})

渲染性能

  1. 减少视图数量

    • 使用TextRoundCornerProgressBar替代ProgressBar+TextView组合
    • 复杂布局考虑自定义Drawables而非多个View叠加

  2. 避免频繁测量

    • 固定进度条尺寸，避免wrap_content
    • 减少动态修改尺寸相关属性（radius、padding等）

常见问题解决

Q1：进度条圆角显示异常/被截断

原因：背景内边距（rcBackgroundPadding）设置过大，导致圆角被挤压。

解决方案：

  • 确保rcBackgroundPadding ≤ rcRadius/2
  • 进度条高度不宜过小（建议至少为圆角半径的2倍）
<!-- 错误示例 -->
<com.akexorcist.roundcornerprogressbar.RoundCornerProgressBar
    android:layout_height="10dp"
    app:rcRadius="10dp"       <!-- 半径=高度，无法显示完整圆角 -->
    app:rcBackgroundPadding="5dp"/> <!-- 内边距过大 -->

<!-- 正确示例 -->
<com.akexorcist.roundcornerprogressbar.RoundCornerProgressBar
    android:layout_height="24dp"
    app:rcRadius="10dp"       <!-- 半径 < 高度/2 -->
    app:rcBackgroundPadding="2dp"/> <!-- 内边距适中 -->

Q2：TextRoundCornerProgressBar文本显示位置异常

原因：文本位置优先级和进度值不匹配。

解决方案：

  • 小进度值时使用outside优先级
  • 调整文本边距和大小
<com.akexorcist.roundcornerprogressbar.TextRoundCornerProgressBar
    ...
    app:rcTextPositionPriority="outside" <!-- 进度较小时优先显示在外部 -->
    app:rcTextProgressMargin="8dp"/> <!-- 增加边距避免重叠 -->

Q3：从2.0版本迁移后编译错误

解决方案：参考MIGRATION.md完成以下调整：

  1. 监听器变更：
// 旧版
progressBar.setOnProgressChangedListener { viewId, progress, isPrimary, isSecondary -> }

// 新版
progressBar.setOnProgressChangedListener { view, progress, isPrimary, isSecondary -> }
  1. 自定义组件父类变更：
// 旧版
class CustomProgressBar : BaseRoundCornerProgressBar()

// 新版
class CustomProgressBar : AnimatedRoundCornerProgressBar()

版本更新与迁移

主要版本变更

版本发布日期重大变更
2.2.22023-05迁移到Gradle Kotlin DSL，支持Android 16+
2.2.02023-01全面迁移到Kotlin，支持AndroidX
2.1.02021-06添加中心扩展型和不确定型组件，支持渐变
2.0.X2019-11重构代码结构，支持AndroidX

从2.1.x迁移到2.2.x

  1. 依赖坐标变更：无变化，保持com.akexorcist:round-corner-progress-bar:2.2.2

  2. Kotlin代码调整：

    • Java代码需转换为Kotlin语法
    • 空安全处理（如getProgressColors()返回可空数组）

  3. 构建配置更新：

    • Gradle版本需≥7.0
    • Kotlin版本需≥1.6.0

总结与展望

RoundCornerProgressBar凭借其丰富的自定义选项和优秀的视觉表现，为Android开发者提供了一站式的进度条解决方案。无论是简单的加载指示器还是复杂的统计图表，都能通过其灵活的配置满足需求。

未来版本可能的改进方向：

  • Jetpack Compose支持
  • 更多动画效果（如脉冲、颜色变化）
  • 垂直进度条支持
  • 自定义形状（如胶囊型、圆形）

最佳实践建议：

  1. 根据场景选择合适的组件类型，避免过度复杂化
  2. 保持应用内进度条样式统一（可通过style定义）
  3. 深色/浅色主题下测试进度条可见性
  4. 性能敏感场景优先使用基础型组件

通过本文的介绍，相信你已经掌握了RoundCornerProgressBar的核心用法和高级技巧。现在就将这些知识应用到实际项目中，打造出既美观又实用的进度条体验吧！

如果本指南对你有帮助，请点赞收藏，关注作者获取更多Android UI开发技巧。有任何使用问题或建议，欢迎在项目GitHub仓库提交issue。

【免费下载链接】RoundCornerProgressBar [Android] Round Corner Progress Bar Library for Android 【免费下载链接】RoundCornerProgressBar 项目地址: https://gitcode.com/gh_mirrors/ro/RoundCornerProgressBar

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值