UI组件移动开发【免费下载链接】NumberProgressBarA beautiful, slim Android ProgressBar.项目地址https://gitcode.com/gh_mirrors/nu/NumberProgressBar点击查看免费下载NumberProgressBar 是一个开源的 Android 数字进度条控件它将传统 ProgressBar 的“条”与实时百分比数字合二为一整体纤细、简洁并内置多套配色样式。本文以项目 README 为主线结合仓库源码与 demo 工程系统讲解如何通过 Gradle/Maven 接入、如何在布局中配置全部自定义属性、如何使用 8 套预置样式并深入到NumberProgressBar.java的绘制与状态管理实现帮助你在自己的 Android 项目中快速复现这套“数字 进度条”的视觉效果。一、项目简介为什么要做数字进度条项目作者在 README 中直言做这个控件的初衷是“对 Android 原生 ProgressBar 感到厌倦”——原生进度条样式单调、难以定制配色因此诞生了 NumberProgressBar一条纤细的进度条slim中部实时显示百分比数字且支持丰富的颜色定制。从仓库结构看这是一个标准的双模块 Gradle 工程library/核心库模块包含唯一的控件类NumberProgressBar.java、监听接口OnProgressBarListener.java以及声明自定义属性的attrs.xml与预置样式styles.xmldemo/示例应用模块MainActivity.java演示了通过定时器驱动进度递增、监听进度完成等典型用法根目录的settings.gradle通过include library, demo将两个模块纳入同一构建。二、快速接入Gradle 与 Maven 依赖README 提供了两种依赖引入方式。Gradle仓库文档中的原始写法dependencies { compile com.daimajia.numberprogressbar:library:1.4aar }Mavendependency groupIdcom.daimajia.numberprogressbar/groupId artifactIdlibrary/artifactId version1.4/version typeapklib/type /dependency仓库 gradle.properties 中同样记录了版本信息VERSION_NAME1.4、VERSION_CODE5、GROUPcom.daimajia.numberprogressbar与 README 中的依赖坐标一致。兼容性说明README 中compile是旧版 Gradle Android 插件AGP 3.0 之前的依赖写法。若在新版项目中引入可将compile替换为implementation以当前仓库实际代码为准demo模块使用的仍是ActionBarActivity等旧式 API属于该库诞生年代的产物。三、布局中使用XML 基本用法依赖就绪后直接在布局文件中声明控件即可。完整写法需要声明自定义命名空间xmlns:customhttp://schemas.android.com/apk/res-auto使用全限定类名com.daimajia.numberprogressbar.NumberProgressBar。LinearLayout xmlns:androidhttp://schemas.android.com/apk/res/android xmlns:customhttp://schemas.android.com/apk/res-auto android:layout_widthmatch_parent android:layout_heightmatch_parent android:orientationvertical com.daimajia.numberprogressbar.NumberProgressBar android:idid/number_progress_bar android:layout_widthwrap_content android:layout_heightwrap_content / /LinearLayout不写任何custom:属性时控件使用源码内置的默认值渲染详见下文属性章节你得到的是一条显示百分比数字的进度条默认以%作为后缀。四、内置 8 套预置配色样式README 展示了一张预置样式效果图并列出 8 个样式名。这些样式的具体取值全部定义在 library/src/main/res/values/styles.xml 中用法是在布局里通过style属性引用com.daimajia.numberprogressbar.NumberProgressBar android:idid/number_progress_bar stylestyle/NumberProgressBar_Default /8 套样式名及其核心色值reached 区 / 文字颜色未到达区统一为#CCCCCC整理如下样式名reached 区与文字颜色风格联想NumberProgressBar_Default#3498DB蓝默认经典蓝NumberProgressBar_Passing_Green#70A800绿通过/成功NumberProgressBar_Relax_Blue#6DBCDB浅蓝放松浅蓝NumberProgressBar_Grace_Yellow#FFC73B黄优雅黄NumberProgressBar_Warning_Red#E74C3C红告警红NumberProgressBar_Funny_Orange#FF530D橙趣味橙NumberProgressBar_Beauty_Red#FF3D7F玫红美丽玫红NumberProgressBar_Twinkle_Night#ECF0F1亮白夜色闪烁所有预置样式统一约定progress_max100、progress_current0、文字大小10sp、reached 条高1.5dp、unreached 条高0.75dp未到达区颜色#CCCCCC。作者在 README 中表示欢迎社区贡献更多配色其灵感来源是 Adobe Kuler 配色站你也可以参照styles.xml的写法自定义样式。五、自定义属性全解析README 将可配置项分为三大区域reached 区已到达部分、unreached 区未到达部分、文字区外加进度条本身的两个进度数值。所有属性的声明位于 library/src/main/res/values/attrs.xml源码中的内部默认值来自NumberProgressBar.java构造函数NumberProgressBar.java#L170-L201。5.1 属性与默认值一览属性格式内部默认值所属区域custom:progress_reached_colorcolor#4291F1rgb 66,145,241reached 区颜色custom:progress_reached_bar_heightdimension1.5dpreached 区高度custom:progress_unreached_colorcolor#CCCCCCrgb 204,204,204unreached 区颜色custom:progress_unreached_bar_heightdimension1.0dpunreached 区高度custom:progress_text_colorcolor#4291F1文字颜色custom:progress_text_sizedimension10sp文字大小custom:progress_text_offsetdimension3.0dp文字与两侧条的间距custom:progress_text_visibilityenumvisible(0) /invisible(1)visible文字是否显示custom:progress_maxinteger100最大进度custom:progress_currentinteger0当前进度几点需要留意的细节文字显示的是百分比源码中绘制文本时执行String.format(%d, getProgress() * 100 / getMax())NumberProgressBar.java#L286即显示值永远是“当前进度 / 最大进度 × 100”与max是否等于 100 无关。文字默认带%后缀源码默认mSuffix %、mPrefix NumberProgressBar.java#L62-L67因此未设置时显示如80%。默认样式与预置样式的差异控件内置默认 unreached 条高为1.0dp而 8 套预置样式统一写成0.75dp两者略有不同progress_text_offset的源码默认值是3.0dp。offset 的实际含义它同时控制文字与 reached 条右端、文字与 unreached 条左端的间距见calculateDrawRectF()中mReachedRectF.right ... - mOffset、mDrawTextStart mReachedRectF.right mOffset、unreachedBarStart mDrawTextStart mDrawTextWidth mOffset的计算NumberProgressBar.java#L284-L319。另外attrs.xml还声明了一个主题属性numberProgressBarStylereference 类型可通过应用主题全局指定进度条样式。5.2 README 的完整配置示例以下是 README 给出的“默认样式”完整示例我们在其基础上补充命名空间声明与注释便于直接复制运行com.daimajia.numberprogressbar.NumberProgressBar xmlns:customhttp://schemas.android.com/apk/res-auto android:layout_widthwrap_content android:layout_heightwrap_content custom:progress_unreached_color#CCCCCC custom:progress_reached_color#3498DB custom:progress_unreached_bar_height0.75dp custom:progress_reached_bar_height1.5dp custom:progress_text_size10sp custom:progress_text_color#3498DB custom:progress_text_offset1dp custom:progress_text_visibilityvisible custom:progress_max100 custom:progress_current80 /该示例最终呈现的效果是最大进度 100、当前 80reached 区为 1.5dp 高的蓝色条unreached 区为 0.75dp 高的浅灰条中间显示蓝色80%文字。六、编程接口动态控制进度与样式NumberProgressBar继承了ViewNumberProgressBar.java#L20除了 XML 属性还提供了一整套 setter/getter 用于运行时控制6.1 进度控制setProgress(int progress)设置当前进度。源码中做了边界校验仅当0 progress max时才生效并触发重绘NumberProgressBar.java#L436-L441越界值会被静默忽略getProgress()读取当前进度setMax(int maxProgress)设置最大值仅接受大于 0 的值NumberProgressBar.java#L395-L400incrementProgressBy(int by)按增量递增仅允许正数并在递增后回调监听器NumberProgressBar.java#L426-L434。6.2 样式动态修改setReachedBarColor(int)/setUnreachedBarColor(int)/setProgressTextColor(int)修改三处颜色内部同步更新 Paint 并调用invalidate()重绘setReachedBarHeight(float)/setUnreachedBarHeight(float)修改条高setProgressTextSize(float)修改文字大小单位需为像素可借助sp2px换算setPrefix(String)/setSuffix(String)自定义数字前后的文本传入 null 会被当作空串处理setProgressTextVisibility(ProgressTextVisibility)控制文字显隐参数来自枚举ProgressTextVisibility { Visible, Invisible }隐藏文字后进度条会占满整个宽度对应calculateDrawRectFWithoutProgressText()分支。6.3 进度监听回调库内置了轻量监听接口OnProgressBarListenerOnProgressBarListener.javapublic interface OnProgressBarListener { void onProgressChange(int current, int max); }通过setOnProgressBarListener(...)注册后每次调用incrementProgressBy(int)都会触发onProgressChange(current, max)适合用来在进度完成时弹出提示、切换页面等。6.4 demo 中的完整用法demo/src/main/java/com/daimajia/numberprogressbar/example/MainActivity.java 演示了“定时器驱动 完成回调”的经典组合bnp (NumberProgressBar) findViewById(R.id.numberbar1); bnp.setOnProgressBarListener(this); timer new Timer(); timer.schedule(new TimerTask() { Override public void run() { runOnUiThread(new Runnable() { Override public void run() { bnp.incrementProgressBy(1); } }); } }, 1000, 100); // 延迟 1 秒后每 100ms 递增 1Activity 实现OnProgressBarListener接口在onProgressChange中判断进度到达最大值后弹出 Toast 并归零重置Override public void onProgressChange(int current, int max) { if (current max) { Toast.makeText(getApplicationContext(), getString(R.string.finish), Toast.LENGTH_SHORT).show(); bnp.setProgress(0); } }对应的 demo/src/main/res/layout/activity_main.xml 中放置了 8 个进度条分别引用 8 套预置样式并设置不同的初始进度0、20、30、40、50、60、70、80一行代码即可直观对比全部配色。七、状态保存与恢复作为自定义 ViewNumberProgressBar完整实现了onSaveInstanceState/onRestoreInstanceStateNumberProgressBar.java#L443-L481将进度、最大值、三处颜色、条高、文字大小、前后缀、文字显隐等全部状态打包进 Bundle。这意味着旋转屏幕、Activity 重建等场景下进度条不会丢进度可直接用于需要持久化 UI 状态的界面。八、绘制原理从属性到像素理解源码的绘制逻辑有助于你预判控件的各种边界行为。NumberProgressBar的渲染集中在onDraw(Canvas)NumberProgressBar.java#L239-L257流程如下布局测量控件重写onMeasuregetSuggestedMinimumWidth()取文字大小、getSuggestedMinimumHeight()取文字大小与两条条高中的最大值NumberProgressBar.java#L203-L237保证 wrap_content 时有合理的占位。矩形计算calculateDrawRectF()依据进度百分比计算 reached 区矩形在条与文字之间留出mOffset间距并按文字测量宽度推算出 unreached 区起点。边界自适应NumberProgressBar.java#L290-L318进度为 0 时不绘制 reached 条文字贴左边缘显示若“文字起点 文字宽度”超出控件右边界文字会被左移到容器内reached 条相应缩短若 unreached 区起点超出右边界则整段 unreached 条不绘制。绘制用两支带抗锯齿ANTI_ALIAS_FLAG的 Paint 分别drawRectreached/unreached 条用文字 PaintdrawText绘制前缀 百分比 后缀的合成文本。正是这套“先量文字、再挤条宽”的顺序保证了数字文字始终完整可见这也是该控件区别于普通进度条的核心体验点。九、构建与运行 Demo仓库已内置 Gradle Wrappergradlew/gradlew.bat配置在 gradle/wrapper/gradle-wrapper.properties。按照 README 的说明Mac / Linux运行./gradlew assembleDebugWindows运行gradlew.bat assembleDebug该命令会构建根项目下的全部模块settings.gradle中include library, demo产出library模块的 AAR 与demo模块的 Debug APK。安装 demo 后即可看到 8 套预置样式的实时递增动画以及进度完成时的 Toast 提示。十、仓库结构导航路径内容library/src/main/java/com/daimajia/numberprogressbar/NumberProgressBar.java控件核心实现属性解析、测量、绘制、状态保存library/src/main/java/com/daimajia/numberprogressbar/OnProgressBarListener.java进度变化监听接口library/src/main/res/values/attrs.xml全部自定义属性声明library/src/main/res/values/styles.xml8 套预置配色样式demo/src/main/java/com/daimajia/numberprogressbar/example/MainActivity.java定时递增 完成回调示例demo/src/main/res/layout/activity_main.xml8 套样式对照布局gradle.properties版本与坐标信息1.4settings.gradle模块声明library、demo结语NumberProgressBar 以极简的代码量核心仅一个 View 子类实现了“数字 进度条”的高颜值组合接入只需一行依赖样式可通过预置风格或十余个自定义属性自由组合运行时可借助 setter 与OnProgressBarListener完成动态控制和完成回调。结合本文对源码绘制逻辑的剖析你既能直接拿来即用也能在其基础上扩展新配色、新形态为 Android 界面增添一份纤细又清晰的数据反馈。赞分享UI组件移动开发【免费下载链接】NumberProgressBarA beautiful, slim Android ProgressBar.项目地址https://gitcode.com/gh_mirrors/nu/NumberProgressBar点击查看免费下载相关推荐Varlet LoadingBar 加载条完全指南命令式进度条的使用、定制与源码实现原理Varlet LoadingBar 加载条完全指南命令式进度条的使用、定制与源码实现原理 本文以 Varlet 的 LoadingBar加载条组件文档为主UI组件前端Fresco 图片加载进度条ProgressBarDrawable完整指南接入、自定义与源码原理Fresco 图片加载进度条ProgressBarDrawable完整指南接入、自定义与源码原理 导读 本文围绕 FrescoFacebook 开源 A移动开发图像处理Rufus USB格式化工具使用指南一次重装系统翻车后我整理出这份避坑与提速笔记Rufus USB格式化工具使用指南一次重装系统翻车后我整理出这份避坑与提速笔记 某个周日的深夜我的笔记本毫无征兆地蓝屏了。手头只有一台能上网的电脑和一个桌面应用开发工具上一篇绝区零自动化工具入门指南一条龙托管日常与空洞自动闪避解放双手下一篇下班后的《绝区零》终于不用再上班了创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考