Android ProgressBar 的样式定制与实战应用

1. 理解ProgressBar的核心机制ProgressBar是Android开发中最常用的UI组件之一它通过视觉反馈让用户感知耗时操作的进度。系统原生提供了两种工作模式确定进度模式Determinate用于可量化进度的场景如下载文件时显示0%-100%的进度不确定进度模式Indeterminate用于无法预估完成时间的场景如网络请求等待在XML布局中水平进度条的基础样式定义如下ProgressBar android:idid/progressBar styleandroid:style/Widget.ProgressBar.Horizontal android:layout_widthmatch_parent android:layout_height8dp android:max100 android:progress30/关键属性解析progressDrawable控制进度条外观的核心Drawable资源indeterminateDrawable不确定模式下的动画资源minHeight/maxHeight控制进度条的粗细progress当前进度值0到max之间2. 深度定制水平进度条样式2.1 使用layer-list构建多层进度条通过layer-list可以实现背景层、二级进度层和主进度层的叠加效果。下面是一个带圆角和渐变的案例!-- res/drawable/progress_custom.xml -- layer-list xmlns:androidhttp://schemas.android.com/apk/res/android !-- 背景层 -- item android:idandroid:id/background shape android:shaperectangle corners android:radius4dp / solid android:color#E0E0E0 / /shape /item !-- 二级进度层 -- item android:idandroid:id/secondaryProgress clip shape android:shaperectangle corners android:radius4dp / gradient android:startColor#80FF9800 android:endColor#80FF5722 android:angle0/ /shape /clip /item !-- 主进度层 -- item android:idandroid:id/progress clip shape android:shaperectangle corners android:radius4dp / gradient android:startColor#FF9800 android:endColor#FF5722 android:angle0/ /shape /clip /item /layer-list2.2 实现分段进度效果通过item的left/right属性可以创建分段式进度条适合展示多阶段任务layer-list item android:right60dp shape solid android:color#4CAF50 / /shape /item item android:left60dp android:right30dp shape solid android:color#FFC107 / /shape /item item android:left90dp shape solid android:color#F44336 / /shape /item /layer-list2.3 动态渐变效果结合Animation和ColorEvaluator可以实现进度条颜色随进度变化val animator ValueAnimator.ofInt(0, 100).apply { duration 2000 addUpdateListener { anim - progressBar.progress anim.animatedValue as Int val fraction anim.animatedFraction val color ArgbEvaluator().evaluate( fraction, ContextCompat.getColor(thisMainActivity, R.color.start), ContextCompat.getColor(thisMainActivity, R.color.end) ) as Int progressBar.progressDrawable.setColorFilter( color, PorterDuff.Mode.SRC_IN ) } } animator.start()3. 圆形进度条的高级动画3.1 旋转动画实现使用animated-rotate实现平滑的无限旋转效果!-- res/drawable/progress_rotate.xml -- animated-rotate xmlns:androidhttp://schemas.android.com/apk/res/android android:drawabledrawable/ic_loading android:pivotX50% android:pivotY50% android:framesCount12 android:frameDuration100/3.2 帧动画实现通过animation-list创建逐帧动画!-- res/drawable/progress_anim.xml -- animation-list xmlns:androidhttp://schemas.android.com/apk/res/android android:oneshotfalse item android:drawabledrawable/frame1 android:duration100/ item android:drawabledrawable/frame2 android:duration100/ item android:drawabledrawable/frame3 android:duration100/ /animation-list3.3 动态颜色控制通过代码动态修改旋转进度条颜色val drawable ContextCompat.getDrawable(this, R.drawable.progress_rotate) drawable?.colorFilter BlendModeColorFilter( Color.parseColor(#FF5722), BlendMode.SRC_IN ) progressBar.indeterminateDrawable drawable4. 业务场景实战应用4.1 文件下载进度条实现带速度显示的下载进度条// 模拟下载任务 var downloaded 0 val total 100 val timer Timer().scheduleAtFixedRate(object : TimerTask() { override fun run() { downloaded (1..5).random() if (downloaded total) downloaded total runOnUiThread { progressBar.progress downloaded speedText.text ${(downloaded/1024).toFloat()} KB/s if (downloaded total) { cancel() progressBar.progressDrawable ContextCompat.getDrawable(thisDownloadActivity, R.drawable.progress_complete) } } } }, 0, 200)4.2 音乐播放器进度条实现带缓冲进度的音频进度条ProgressBar android:idid/progressBar stylestyle/Widget.AppCompat.ProgressBar.Horizontal android:layout_widthmatch_parent android:layout_height4dp android:max1000 android:progressDrawabledrawable/progress_music/对应的Java控制代码mediaPlayer.setOnBufferingUpdateListener((mp, percent) - { progressBar.setSecondaryProgress(percent * 10); }); mediaPlayer.setOnPreparedListener(mp - { progressBar.setMax(mp.getDuration()); new Handler().postDelayed(updateProgress, 100); }); Runnable updateProgress new Runnable() { Override public void run() { progressBar.setProgress(mediaPlayer.getCurrentPosition()); handler.postDelayed(this, 100); } };4.3 数据加载动画结合Lottie实现高级加载动画com.airbnb.lottie.LottieAnimationView android:idid/animationView android:layout_width100dp android:layout_height100dp app:lottie_autoPlaytrue app:lottie_looptrue app:lottie_rawResraw/loading_animation/当数据加载完成后通过交叉渐变动画切换到内容视图val transition TransitionSet().apply { addTransition(Fade(Fade.OUT)) addTransition(ChangeBounds()) addTransition(Fade(Fade.IN)) duration 300 } TransitionManager.beginDelayedTransition(parent, transition) animationView.visibility View.GONE contentView.visibility View.VISIBLE