从仿制到定制：修改CreditSesameRingView配色、刻度与信用等级打造专属圆环进度条

【免费下载链接】CreditSesameRingViewImitation of Ali credit sesame new old ring view.http://www.jianshu.com/p/8486a5baa708项目地址https://gitcode.com/gh_mirrors/cr/CreditSesameRingView点击查看免费下载CreditSesameRingView 是一个免费的开源 Android 自定义 View 库完整复刻了芝麻信用的圆环进度条。它提供新、旧两个版本开箱即用即可展示信用分数、信用等级与 3 秒动态进度动画而通过修改配色、刻度与信用等级映射你可以轻松打造一套符合自己品牌的专属圆环进度条。这篇文章带你从能跑起来走到完全自定义全程只需改动几个数组和画笔颜色无需从头画一个 View。快速集成3 步把圆环进度条加进项目第 1 步添加 Gradle 依赖allprojects { repositories { maven { url https://jitpack.io } } } dependencies { implementation com.github.HotBitmapGG:CreditSesameRingView:V1.0.4 }第 2 步在布局 XML 中声明组件新版圆环白色简约风直接写在布局里即可参考 fragment_1.xmlio.netopen.hotbitmapgg.view.NewCreditSesameView android:idid/sesame_view android:layout_widthwrap_content android:layout_heightwrap_content android:layout_centerInParenttrue /旧版渐变色圆环则使用OldCreditSesameView参考 fragment_2.xml。第 3 步一行代码设置分数NewCreditSesameView sesameView findViewById(R.id.sesame_view); sesameView.setSesameValues(639); // 触发进度条 数字滚动动画调用后会同时启动两个动画圆弧从 0° 平滑扫到目标角度中心数字从 0 滚动到 639整个动效持续 3 秒。✨看懂结构芝麻信用圆环由哪几层画成想改得漂亮先要知道它怎么画的。新版 NewCreditSesameView.java 的onDraw()按顺序绘制了 6 层绘制顺序方法画出来的内容1drawMiddleArc()外层细圆环线宽 8半透明白2drawInnerArc()内层粗圆环线宽 30半透明白3drawSmallCalibration()36 根小刻度线每 6° 一根4drawCalibrationAndText()大刻度线 11 个分数档位文字350、较差、550…9505drawCenterText()中心 BETA 标识、大号分数、信用等级、评估时间6drawRingProgress()白色进度弧 弧线末端的小圆点所有颜色都集中初始化在 init() 方法中——这就是你定制配色时唯一需要打开的地方。配色定制如何修改圆环颜色 新版改 4 个 Paint 的颜色新版默认全白靠 alpha 区分层次把init()里对应画笔的setColor()换成品牌色即可mMiddleArcPaint.setColor(0xFF64B5F6); // 外层细环 mInnerArcPaint.setColor(0xFF64B5F6); // 内层粗环 mCalibrationPaint.setColor(0xFFE3F2FD); // 大刻度 mArcProgressPaint.setColor(0xFF06C494); // 进度弧 末端圆点页面背景也可以做成随进度变化的渐变色官方 Demo 就是用了 4 个粉色系颜色做 3 秒过渡见 README.mdint[] colors {0xFFFF80AB, 0xFFFF4081, 0xFFFF5177, 0xFFFF7997}; ObjectAnimator animator ObjectAnimator.ofInt(layout, backgroundColor, colors); animator.setDuration(3000); animator.setEvaluator(new ArgbEvaluator()); animator.start();旧版改红黄绿渐变与进度色旧版 OldCreditSesameView.java 最吸睛的彩虹环由一个SweepGradient扫刷实现改这两个地方即可// 渐变的 3 个颜色节点默认红 → 黄 → 绿 private final int[] mColors {0xFFFF0000, 0xFFFFD600, 0xFF00FF00}; // 渐变色出现的位置比例调整它可以改变过渡节奏 float position[] {0.1f, 0.3f, 0.8f};进度弧、指针和中心文字统一使用GREEN_COLOR 0xFF06C494改成你的主题色即可内圈虚线环和刻度文字则用GRAY_COLOR 0xFFBEBBB4。刻度定制修改档位文字与刻度线 改刻度上的分数与文字档位文字就是一个字符串数组。新版定义在 sesameStrString[] sesameStr { 350, 较差, 550, 中等, 600, 良好, 650, 优秀, 700, 极好, 950 };旧版则是同文件结构中的text数组L44-L51。如果你的进度条不是信用场景比如健康值、电量直接替换成自己的档位文案即可比如0, 30, 60, 100。改刻度线的数量与粗细小刻度密度新版 drawSmallCalibration() 里是for (i 0; i 35)、每轮rotate(6)把 6 改成 4 就能让刻度更密大刻度drawCalibrationAndText() 中每隔 21°210 / 10画一根mCalibrationPaint.setStrokeWidth(4)控制粗细旧版则是 51 根刻度、每 4° 一根i % 10 0的位置画大刻度drawCalibration()。信用等级定制分数区间怎么映射角度 分数到进度的换算集中在setSesameValues()方法里新版逻辑见 L397-L432规则非常直观分数区间信用等级文案进度角换算公式≤ 350信用较差0°无进度351 ~ 550信用较差(分-350) × 80/400 2551 ~ 600信用中等(分-550) × 120/150 43601 ~ 650信用良好(分-550) × 120/150 45651 ~ 700信用优秀(分-550) × 120/150 48701 ~ 950信用极好(分-700) × 40/250 170以示例分数 639 为例落在 601~650 区间进度角 89 × 0.8 45 116.2°中心显示信用良好。想改成自己的业务例如 0~100 分只需修改这套if-else中的阈值、公式和等级文案再同步更新上一节提到的刻度文字数组圆环就会按新的分数-角度关系走。动画与尺寸微调速度与默认大小 ⏱️可调参数默认值所在位置动画时长3000 ms新版 startAnim()、旧版 startRotateAnim() 中的setDuration()动画缓动角度用 AccelerateDecelerate数字用 Linear同上替换Interpolator即可换手感默认尺寸dp2px(250)两版init()中的defaultSize环与刻度间距dp2px(14)新版arcDistance环的跨度新版 210° / 旧版 230°mStartAngle与mEndAngle常量把setDuration(3000)改成1500进度动画就会快一倍适合节奏更轻快的页面。新版 vs 旧版该选哪个对比项新版 NewCreditSesameView旧版 OldCreditSesameView视觉风格纯色白环简约红黄绿渐变环 虚线内环复古进度指示进度弧 末端小圆点进度弧 指针图片环跨度210°230°刻度36 根小刻度 11 个档位文字51 根刻度 11 个档位文字源码入口NewCreditSesameView.javaOldCreditSesameView.java 选型建议追求现代简约风、白底/彩色底页面 → 新版想要醒目的彩虹渐变或指针表盘感 → 旧版。两者 API 完全一致都是setSesameValues(分数)随时可以互换。小结CreditSesameRingView 的定制成本极低配色→ 只改init()里的setColor()或渐变数组刻度→ 改档位文字数组 刻度循环步进信用等级→ 调整setSesameValues()的区间、公式与文案动画尺寸→ 改一个setDuration()和defaultSize。从仿制芝麻信用到专属圆环进度条你只需要一个下午的功夫。克隆仓库后照着上表定位对应行就能把这套圆环变成自己 App 里最有辨识度的一块 UI。✨赞分享【免费下载链接】CreditSesameRingViewImitation of Ali credit sesame new old ring view.http://www.jianshu.com/p/8486a5baa708项目地址https://gitcode.com/gh_mirrors/cr/CreditSesameRingView点击查看免费下载相关推荐革命性多模态大模型North-Micro-Vision-Instruct-mxfp8Cohere视觉AI在Apple芯片上的本地部署完整指南革命性多模态大模型North Micro Vision Instruct mxfp8Cohere视觉AI在Apple芯片上的本地部署完整指南 North Mirsuite ProgressCircle 圆形进度条 strokeColor 属性详解自定义进度条颜色rsuite ProgressCircle 圆形进度条 strokeColor 属性详解自定义进度条颜色 导读 本文聚焦 rsuite 组件库中 Progre前端UI组件HMCL 多版本切换一文搞懂装 Mod 不卡版本HMCL 多版本切换一文搞懂装 Mod 不卡版本 想玩最新版 Minecraft你依赖的 Mod 却只有 1.20.1 的构建硬开就是一屏红色报错。本文从桌面应用游戏开发上一篇GitHub 日榜第 2 的官方仓库热度却只撑了 1 小时榜单背后那点事藏着什么信号下一篇如何将 regnety_016.pycls_in1k 超轻量模型部署到生产环境1.6 GMACs低算力推理实战创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考