Android 自定义进度条：实现渐变色和圆角效果

CustomProgressBar 自定义控件，用于展示数据进度条。支持渐变颜色、圆角效果，适用于需要直观展示任务完成度或进度的场景，且可以使用DataBinding进行及时更新。

一、重要功能：

• 进度展示：支持动态设置进度值，范围为 0~100
  
• 渐变颜色：支持线性渐变，自定义渐变起始色与结束色
  
• 圆角计划：提供圆角进度条效果，圆角半径可自定义
  
• 配景色可定制：支持动态设置配景颜色
  
• 自定义属性支持：提供多种 XML 属性配置，可直接在布局文件中设置默认值：
  
  
  
  • progress：初始进度值。
    
  • progressColorStart：渐变起始颜色。
    
  • progressColorEnd：渐变结束颜色。
    
  • backgroundColor：配景颜色。
    
  • cornerRadius：圆角半径。
    
  
  

---

二、适用场景：

• 加载进度显示（如文件下载进度）
  
• 任务完成度展示（如逐日目标完成环境）
  
• 数据比例可视化（如投票结果、性能占比）
  

三、效果图：

四、自定义组件代码及配置

• 组件代码
  
  
  1. /**
  2. * @Description: 自定义数据进度条
  3. * @Author: 会叫的青蛙
  4. * @Date: 2025/1/14 11:42
  5. */
  6. class CustomProgressBar @JvmOverloads constructor(
  7.     context: Context,
  8.     attrs: AttributeSet? = null,
  9.     defStyleAttr: Int = 0
  10. ) : View(context, attrs, defStyleAttr) {
  12.     private var progress = 0f // 当前进度 (0~100)
  13.     private var progressColorStart = Color.BLUE // 渐变开始色
  14.     private var progressColorEnd = Color.CYAN // 渐变结束色
  15.     private var backgroundColor = Color.LTGRAY // 背景色
  16.     private var cornerRadius = 20f // 圆角半径，默认20dp
  18.     private val backgroundPaint = Paint(Paint.ANTI_ALIAS_FLAG)
  19.     private val progressPaint = Paint(Paint.ANTI_ALIAS_FLAG)
  21.     init {
  22.         //自定义属性
  23.         context.theme.obtainStyledAttributes(attrs, R.styleable.CustomProgressBar, 0, 0).apply {
  24.             try {
  25.                 progress = getFloat(R.styleable.CustomProgressBar_progress, 0f)
  26.                 progressColorStart = getColor(R.styleable.CustomProgressBar_progressColorStart, Color.BLUE)
  27.                 progressColorEnd = getColor(R.styleable.CustomProgressBar_progressColorEnd, Color.CYAN)
  28.                 backgroundColor = getColor(R.styleable.CustomProgressBar_backgroundColor, Color.LTGRAY)
  29.                 cornerRadius = getDimension(R.styleable.CustomProgressBar_cornerRadius, 20f)
  30.             } finally {
  31.                 recycle()
  32.             }
  33.         }
  34.     }
  36.     @SuppressLint("DrawAllocation")
  37.     override fun onDraw(canvas: Canvas) {
  38.         super.onDraw(canvas)
  40.         val width = width.toFloat()
  41.         val height = height.toFloat()
  43.         // 绘制背景 (带圆角)
  44.         backgroundPaint.color = backgroundColor
  45.         canvas.drawRoundRect(0f, 0f, width, height, cornerRadius, cornerRadius, backgroundPaint)
  47.         // 绘制渐变进度 (带圆角)
  48.         val progressWidth = width * (progress / 100)
  49.         val gradient = LinearGradient(
  50.             0f, 0f, progressWidth, 0f,
  51.             progressColorStart, progressColorEnd,
  52.             Shader.TileMode.CLAMP
  53.         )
  54.         progressPaint.shader = gradient
  55.         canvas.drawRoundRect(0f, 0f, progressWidth, height, cornerRadius, cornerRadius, progressPaint)
  56.     }
  58.     /**
  59.      * 设置进度
  60.      */
  61.     fun setProgress(value: Float) {
  62.         progress = value.coerceIn(0f, 100f)
  63.         invalidate() // 重绘视图
  64.     }
  66.     /**
  67.      * 设置背景颜色
  68.      */
  69.     override fun setBackgroundColor(color: Int) {
  70.         backgroundColor = color
  71.         invalidate()
  72.     }
  74.     /**
  75.      * 设置渐变颜色
  76.      */
  77.     fun setGradientColors(startColor: Int, endColor: Int) {
  78.         progressColorStart = startColor
  79.         progressColorEnd = endColor
  80.         invalidate()
  81.     }
  83.     /**
  84.      * 设置圆角半径
  85.      */
  86.     fun setCornerRadius(radius: Float) {
  87.         cornerRadius = radius
  88.         invalidate()
  89.     }
  91. }

  复制代码

2.自定义属性

1. <!--自定义数据进度条属性-->
2. <declare-styleable name="CustomProgressBar">
3.     <attr name="progress" format="float" />
4.     <attr name="progressColorStart" format="color" />
5.     <attr name="progressColorEnd" format="color" />
6.     <attr name="backgroundColor" format="color" />
7.     <attr name="cornerRadius" format="dimension" />
8. </declare-styleable>

复制代码

五、使用方法：

• 在布局中引用：
  
  
  1. <com.view.CustomProgressBar
  2.     android:id="@+id/customProgressBar"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="20dp"
  5.     app:progress="50"
  6.     app:progressColorStart="@color/blue"
  7.     app:progressColorEnd="@color/cyan"
  8.     app:backgroundColor="@color/gray"
  9.     app:cornerRadius="10dp" />

  复制代码
• 在代码中动态设置：
  
  
  1. customProgressBar.setProgress(75f) // 设置进度
  2. customProgressBar.setBackgroundColor(Color.LTGRAY) // 设置背景色
  3. customProgressBar.setGradientColors(Color.RED, Color.YELLOW) // 设置渐变色
  4. customProgressBar.setCornerRadius(15f) // 设置圆角半径

  复制代码
• 使用viewModel进行数据双向绑定
  
  
  1. <com.view.CustomProgressBar
  2.     android:layout_width="match_parent"
  3.     android:layout_height="8dp"
  4.     android:layout_marginTop="14dp"
  5.     android:layout_marginBottom="8dp"
  6.     app:backgroundColor="@{viewModel.cpuState == true ? @color/progress_bg_color_red : @color/progress_bg_color_blue}"
  7.     app:progress="@{viewModel.cpuUsageRateData}"
  8.     app:progressColorEnd="@{viewModel.cpuState == true ? @color/progress_end_color_red : @color/progress_end_color_blue}"
  9.     app:progressColorStart="@{viewModel.cpuState == true ? @color/progress_start_color_red : @color/progress_start_color_blue}" />

  复制代码
  注意事项：默认环境下，数据绑定框架只能辨认 Android 系统提供的尺度属性（如 android:text、android:visibility 等）。对于自定义的属性（如 progressColorStart、progress），框架本身无法直接解析和绑定。
  通过 @BindingAdapter，可以定义自定义属性与组件方法之间的绑定规则，使得数据绑定框架可以或许精确辨认这些属性。
  
  1. /**
  2. * @Description: 自定义数据进度条DataBinding适配器
  3. * @Author: 会叫的青蛙
  4. * @Date: 2025/1/14 15:42
  5. */
  6. object BindingAdapters {
  8.     // 绑定进度条颜色
  9.     @BindingAdapter("progressColorStart", "progressColorEnd")
  10.     @JvmStatic
  11.     fun setProgressColor(view: CustomProgressBar, startColor: Int, endColor: Int) {
  12.         view.setGradientColors(startColor, endColor)
  13.     }
  15.     // 绑定进度
  16.     @BindingAdapter("progress")
  17.     @JvmStatic
  18.     fun setProgress(view: CustomProgressBar, progress: Float) {
  19.         view.setProgress(progress)
  20.     }
  22.     // 绑定背景色
  23.     @BindingAdapter("backgroundColor")
  24.     @JvmStatic
  25.     fun setBackgroundColor(view: CustomProgressBar, color: Int) {
  26.         view.setBackgroundColor(color)
  27.     }
  29. }

  复制代码
  
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。