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.xml：

<io.netopen.hotbitmapgg.view.NewCreditSesameView android:id="@+id/sesame_view" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" />

旧版渐变色圆环则使用OldCreditSesameView，参考 fragment_2.xml。

第 3 步：一行代码设置分数

NewCreditSesameView sesameView = findViewById(R.id.sesame_view); sesameView.setSesameValues(639); // 触发进度条 + 数字滚动动画

调用后会同时启动两个动画：圆弧从 0° 平滑扫到目标角度，中心数字从 0 滚动到 639，整个动效持续 3 秒。✨

看懂结构：芝麻信用圆环由哪几层画成？

想改得漂亮，先要知道它怎么画的。新版 NewCreditSesameView.java 的onDraw()按顺序绘制了 6 层：

所有颜色都集中初始化在 init() 方法中——这就是你定制配色时唯一需要打开的地方。

配色定制：如何修改圆环颜色 🎨

新版：改 4 个 Paint 的颜色

新版默认全白（靠 alpha 区分层次），把init()里对应画笔的setColor()换成品牌色即可：

mMiddleArcPaint.setColor(0xFF64B5F6); // 外层细环 mInnerArcPaint.setColor(0xFF64B5F6); // 内层粗环 mCalibrationPaint.setColor(0xFFE3F2FD); // 大刻度 mArcProgressPaint.setColor(0xFF06C494); // 进度弧 + 末端圆点

页面背景也可以做成随进度变化的渐变色，官方 Demo 就是用了 4 个粉色系颜色做 3 秒过渡（见 README.md）：

int[] 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。

刻度定制：修改档位文字与刻度线 📐

改刻度上的分数与文字

档位文字就是一个字符串数组。新版定义在 sesameStr：

String[] 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，规则非常直观：

以示例分数 639 为例：落在 601~650 区间，进度角 = 89 × 0.8 + 45 =116.2°，中心显示"信用良好"。

想改成自己的业务（例如 0~100 分），只需修改这套if-else中的阈值、公式和等级文案，再同步更新上一节提到的刻度文字数组，圆环就会按新的"分数-角度"关系走。

动画与尺寸：微调速度与默认大小 ⏱️

把setDuration(3000)改成1500，进度动画就会快一倍，适合节奏更轻快的页面。

新版 vs 旧版：该选哪个？

📌 选型建议：追求现代简约风、白底/彩色底页面 → 新版；想要醒目的彩虹渐变或指针表盘感 → 旧版。两者 API 完全一致（都是setSesameValues(分数)），随时可以互换。

小结

CreditSesameRingView 的定制成本极低：

1. 配色→ 只改init()里的setColor()或渐变数组；
2. 刻度→ 改档位文字数组 + 刻度循环步进；
3. 信用等级→ 调整setSesameValues()的区间、公式与文案；
4. 动画尺寸→ 改一个setDuration()和defaultSize。

从"仿制芝麻信用"到"专属圆环进度条"，你只需要一个下午的功夫。克隆仓库后照着上表定位对应行，就能把这套圆环变成自己 App 里最有辨识度的一块 UI。✨