北辰遴选1. 项目概述：投票进度条的实用价值
在社交应用和内容平台中，投票功能已经成为用户表达观点的重要交互方式。一个直观的投票进度条不仅能清晰展示群体倾向，还能激发更多用户参与互动。传统的单色进度条往往无法直观区分正反双方的比例，这正是我们需要实现双色百分比进度条的核心原因。
我最近在开发一个社区类Android应用时，就遇到了这样的需求：需要为每个话题的投票结果设计一个能够同时显示赞成和反对比例的进度条组件。经过多次迭代，最终实现了一个高度可定制的投票进度条View，支持动态调整颜色、圆角、文字样式等属性，现在把完整实现方案分享给大家。
这个自定义View特别适合以下场景：
- 社区话题的正反方投票统计
- 产品评价的满意度展示
- 问卷调查的结果可视化
- 任何需要展示二元对立数据的界面
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 核心设计思路与技术选型
2.1 为什么选择自定义View
Android系统原生的ProgressBar虽然能显示进度，但存在几个明显局限：
- 无法同时显示两种状态的百分比
- 样式定制成本高（需要定义layer-list等复杂drawable）
- 文字和进度动画难以精确控制
通过继承View类进行自定义绘制，我们可以：
- 使用Canvas直接绘制双色进度条
- 精确控制文字位置和动画效果
- 自由定义各种视觉样式参数
- 获得更好的性能（减少布局层级）
2.2 关键数据结构设计
投票数据采用简单的POJO类封装：
java复制public class VoteResult {
private int agreeCount; // 赞成票数
private int disagreeCount; // 反对票数
// 计算赞成百分比
public float getAgreePercent() {
int total = agreeCount + disagreeCount;
return total > 0 ? (agreeCount * 100f / total) : 0;
}
// 省略getter/setter...
}
2.3 属性自定义方案
通过定义declare-styleable资源，支持在XML中直接配置样式：
xml复制<declare-styleable name="VoteProgressBar">
<attr name="agreeColor" format="color|reference" />
<attr name="disagreeColor" format="color|reference" />
<attr name="textColor" format="color|reference" />
<attr name="cornerRadius" format="dimension" />
<attr name="textSize" format="dimension" />
<attr name="animationDuration" format="integer" />
</declare-styleable>
3. 完整实现步骤详解
3.1 自定义View基础框架
首先创建VoteProgressBar类继承View：
java复制public class VoteProgressBar extends View {
private Paint progressPaint; // 进度条画笔
private Paint textPaint; // 文字画笔
private RectF progressRect; // 进度条矩形区域
private VoteResult data; // 投票数据
// 样式属性
private int agreeColor = Color.GREEN;
private int disagreeColor = Color.RED;
private float cornerRadius = 0;
private long animationDuration = 800;
public VoteProgressBar(Context context) {
this(context, null);
}
public VoteProgressBar(Context context, AttributeSet attrs) {
super(context, attrs);
init(context, attrs);
}
private void init(Context context, AttributeSet attrs) {
// 初始化代码...
}
}
3.2 属性初始化与样式配置
在init方法中解析自定义属性：
java复制private void init(Context context, AttributeSet attrs) {
// 初始化画笔
progressPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
textPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
textPaint.setTextAlign(Paint.Align.CENTER);
// 加载自定义属性
TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.VoteProgressBar);
agreeColor = ta.getColor(R.styleable.VoteProgressBar_agreeColor, Color.GREEN);
disagreeColor = ta.getColor(R.styleable.VoteProgressBar_disagreeColor, Color.RED);
textPaint.setColor(ta.getColor(R.styleable.VoteProgressBar_textColor, Color.BLACK));
textPaint.setTextSize(ta.getDimension(R.styleable.VoteProgressBar_textSize, 36f));
cornerRadius = ta.getDimension(R.styleable.VoteProgressBar_cornerRadius, 0);
animationDuration = ta.getInteger(R.styleable.VoteProgressBar_animationDuration, 800);
ta.recycle();
// 初始化进度条矩形
progressRect = new RectF();
}
3.3 测量与布局处理
重写onMeasure确保View有合适的高度：
java复制@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int width = MeasureSpec.getSize(widthMeasureSpec);
int height = (int) (textPaint.getTextSize() * 1.8f); // 根据文字高度确定View高度
setMeasuredDimension(width, height);
}
3.4 核心绘制逻辑实现
onDraw方法实现双色进度条绘制：
java复制@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (data == null) return;
float agreePercent = data.getAgreePercent();
float disagreePercent = 100 - agreePercent;
// 绘制反对部分背景
progressPaint.setColor(disagreeColor);
progressRect.set(0, 0, getWidth(), getHeight());
canvas.drawRoundRect(progressRect, cornerRadius, cornerRadius, progressPaint);
// 绘制赞成部分（覆盖右侧）
progressPaint.setColor(agreeColor);
float agreeWidth = getWidth() * agreePercent / 100f;
progressRect.set(0, 0, agreeWidth, getHeight());
canvas.drawRoundRect(progressRect, cornerRadius, cornerRadius, progressPaint);
// 绘制百分比文字
String text = String.format(Locale.getDefault(), "%.0f%% / %.0f%%",
agreePercent, disagreePercent);
float yPos = (getHeight() / 2f) - ((textPaint.descent() + textPaint.ascent()) / 2f);
canvas.drawText(text, getWidth() / 2f, yPos, textPaint);
}
3.5 添加平滑动画效果
使用ValueAnimator实现进度变化动画：
java复制public void setVoteData(VoteResult newData, boolean animate) {
if (newData == null) return;
if (!animate) {
this.data = newData;
invalidate();
return;
}
VoteResult oldData = this.data != null ? this.data : new VoteResult(0, 0);
this.data = newData;
ValueAnimator animator = ValueAnimator.ofFloat(0, 1);
animator.setDuration(animationDuration);
animator.addUpdateListener(animation -> {
float fraction = animation.getAnimatedFraction();
// 计算中间状态
int tempAgree = (int) (oldData.getAgreeCount() +
(newData.getAgreeCount() - oldData.getAgreeCount()) * fraction);
int tempDisagree = (int) (oldData.getDisagreeCount() +
(newData.getDisagreeCount() - oldData.getDisagreeCount()) * fraction);
this.data = new VoteResult(tempAgree, tempDisagree);
invalidate();
});
animator.start();
}
4. 高级功能扩展实现
4.1 文字自适应处理
当进度条较窄时，文字可能显示不全，需要动态调整：
java复制// 在onDraw中添加文字测量逻辑
float textWidth = textPaint.measureText(text);
if (textWidth > getWidth() * 0.9f) {
// 文字过长时缩小字号
float newSize = textPaint.getTextSize() * (getWidth() * 0.9f / textWidth);
textPaint.setTextSize(newSize);
canvas.drawText(text, getWidth() / 2f, yPos, textPaint);
textPaint.setTextSize(originalSize); // 恢复原字号
} else {
canvas.drawText(text, getWidth() / 2f, yPos, textPaint);
}
4.2 圆角优化处理
双色进度条的连接处需要特殊圆角处理：
java复制// 创建Path实现不规则圆角
Path path = new Path();
float agreeWidth = getWidth() * agreePercent / 100f;
// 左侧圆角
path.addRoundRect(new RectF(0, 0, agreeWidth, getHeight()),
new float[]{cornerRadius, cornerRadius, 0, 0, 0, 0, cornerRadius, cornerRadius},
Path.Direction.CW);
// 右侧圆角
path.addRoundRect(new RectF(agreeWidth, 0, getWidth(), getHeight()),
new float[]{0, 0, cornerRadius, cornerRadius, cornerRadius, cornerRadius, 0, 0},
Path.Direction.CW);
canvas.drawPath(path, progressPaint);
4.3 点击交互支持
添加点击事件监听，支持点击某侧投票：
java复制@Override
public boolean onTouchEvent(MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_UP) {
float x = event.getX();
float agreeWidth = getWidth() * data.getAgreePercent() / 100f;
if (x < agreeWidth) {
// 点击了赞成区域
if (listener != null) listener.onAgreeClicked();
} else {
// 点击了反对区域
if (listener != null) listener.onDisagreeClicked();
}
return true;
}
return super.onTouchEvent(event);
}
5. 实际应用与性能优化
5.1 XML布局中使用示例
xml复制<com.example.customview.VoteProgressBar
android:id="@+id/voteProgress"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:agreeColor="@color/green_500"
app:disagreeColor="@color/red_500"
app:textColor="@color/white"
app:textSize="14sp"
app:cornerRadius="4dp"
app:animationDuration="500"/>
5.2 代码中更新数据
java复制VoteResult result = new VoteResult(75, 25); // 75赞成，25反对
voteProgressBar.setVoteData(result, true);
// 也可以直接设置百分比（不推荐，建议使用具体票数）
voteProgressBar.setPercent(70, 30);
5.3 性能优化要点
-
避免过度绘制：
- 在onDraw中尽量减少对象创建
- 使用canvas.clipRect限制绘制区域
- 对于静态内容，考虑使用bitmap缓存
-
动画优化：
- 使用PropertyValuesHolder实现更复杂的动画
- 在动画开始前调用setLayerType(LAYER_TYPE_HARDWARE, null)
- 动画结束后恢复setLayerType(LAYER_TYPE_NONE, null)
-
内存管理：
- 在View被移除时取消所有动画
- 避免在自定义View中持有Activity/Fragment引用
6. 常见问题与解决方案
6.1 文字显示模糊问题
现象：在部分设备上文字边缘出现锯齿
解决方案：
java复制// 在初始化画笔时添加这些设置
textPaint.setAntiAlias(true);
textPaint.setSubpixelText(true);
textPaint.setLinearText(true);
6.2 进度条闪烁问题
现象：快速更新数据时出现视觉闪烁
解决方案：
java复制// 在setVoteData方法中添加防抖判断
public void setVoteData(VoteResult newData, boolean animate) {
if (newData == null || (this.data != null &&
this.data.getAgreeCount() == newData.getAgreeCount() &&
this.data.getDisagreeCount() == newData.getDisagreeCount())) {
return;
}
// 原有逻辑...
}
6.3 圆角显示异常问题
现象：在极端比例下圆角显示不正常
解决方案：
java复制// 修改圆角绘制逻辑，添加最小宽度判断
float agreeWidth = getWidth() * agreePercent / 100f;
float actualRadius = cornerRadius;
if (agreeWidth < cornerRadius * 2) {
actualRadius = agreeWidth / 2;
} else if (getWidth() - agreeWidth < cornerRadius * 2) {
actualRadius = (getWidth() - agreeWidth) / 2;
}
6.4 内存泄漏问题
现象：在Activity销毁时动画仍在运行
解决方案：
java复制// 在View中添加生命周期监听
@Override
protected void onAttachedToWindow() {
super.onAttachedToWindow();
// 可以在这里初始化资源
}
@Override
protected void onDetachedFromWindow() {
// 取消所有动画
if (animator != null && animator.isRunning()) {
animator.cancel();
}
super.onDetachedFromWindow();
}
7. 样式扩展与主题适配
7.1 夜间模式支持
在res/values-night/styles.xml中定义夜间模式颜色：
xml复制<style name="VoteProgressBarStyle" parent="">
<item name="agreeColor">@color/green_200</item>
<item name="disagreeColor">@color/red_200</item>
<item name="textColor">@color/white</item>
</style>
7.2 多主题配置
通过定义不同的style实现主题切换：
xml复制<style name="VoteProgressBar.Light">
<item name="agreeColor">#4CAF50</item>
<item name="disagreeColor">#F44336</item>
<item name="textColor">#FFFFFF</item>
</style>
<style name="VoteProgressBar.Dark">
<item name="agreeColor">#81C784</item>
<item name="disagreeColor">#E57373</item>
<item name="textColor">#212121</item>
</style>
7.3 动态样式修改
提供API在运行时修改样式：
java复制public void setAgreeColor(@ColorInt int color) {
this.agreeColor = color;
invalidate();
}
public void setDisagreeColor(@ColorInt int color) {
this.disagreeColor = color;
invalidate();
}
public void setTextSize(float size) {
textPaint.setTextSize(size);
requestLayout(); // 需要重新测量
invalidate();
}
8. 测试验证方案
8.1 单元测试要点
创建AndroidTestCase验证核心逻辑：
java复制public class VoteProgressBarTest extends AndroidTestCase {
public void testPercentCalculation() {
VoteResult result = new VoteResult(30, 70);
assertEquals(30f, result.getAgreePercent());
assertEquals(70f, 100 - result.getAgreePercent());
result = new VoteResult(0, 0);
assertEquals(0f, result.getAgreePercent());
}
public void testAnimationLogic() {
VoteProgressBar view = new VoteProgressBar(getContext());
VoteResult start = new VoteResult(0, 100);
VoteResult end = new VoteResult(100, 0);
view.setVoteData(start, false);
view.setVoteData(end, true);
// 验证动画是否启动
// 可以通过反射获取内部animator状态验证
}
}
8.2 UI测试方案
使用Espresso进行交互测试：
java复制@RunWith(AndroidJUnit4.class)
public class VoteProgressBarUITest {
@Rule
public ActivityTestRule<TestActivity> activityRule =
new ActivityTestRule<>(TestActivity.class);
@Test
public void testClickEvents() {
onView(withId(R.id.voteProgress))
.perform(clickAtPosition(0.3f)); // 点击30%位置（赞成区域）
// 验证点击回调是否触发
}
private static ViewAction clickAtPosition(final float position) {
return new ViewAction() {
@Override
public Matcher<View> getConstraints() {
return isAssignableFrom(View.class);
}
@Override
public String getDescription() {
return "click at position " + position;
}
@Override
public void perform(UiController uiController, View view) {
float[] location = new float[2];
view.getLocationOnScreen(location);
int x = (int) (location[0] + view.getWidth() * position);
int y = (int) (location[1] + view.getHeight() / 2f);
MotionEvent event = MotionEvent.obtain(
SystemClock.uptimeMillis(),
SystemClock.uptimeMillis(),
MotionEvent.ACTION_DOWN, x, y, 0);
view.dispatchTouchEvent(event);
event.recycle();
}
};
}
}
8.3 性能测试建议
使用Android Profiler监控以下指标：
- 绘制性能（查看onDraw执行时间）
- 内存占用（确保没有内存泄漏）
- 动画帧率（保证流畅度）
特别关注：
- 高频更新数据时的表现
- 长时间运行的稳定性
- 不同设备上的兼容性
9. 项目集成与发布
9.1 打包为独立库
在build.gradle中配置：
groovy复制apply plugin: 'com.android.library'
android {
compileSdkVersion 31
defaultConfig {
minSdkVersion 21
targetSdkVersion 31
versionCode 1
versionName "1.0"
}
// 添加资源前缀避免冲突
resourcePrefix 'vote_progress_'
}
9.2 发布到Maven仓库
配置maven-publish插件：
groovy复制afterEvaluate {
publishing {
publications {
release(MavenPublication) {
from components.release
groupId = 'com.github.yourname'
artifactId = 'voteprogressbar'
version = '1.0.0'
}
}
}
}
9.3 使用文档编写
添加README.md说明核心功能：
markdown复制# VoteProgressBar
双色百分比投票进度条，支持：
- 赞成/反对双色显示
- 平滑动画过渡
- 圆角自定义
- 点击事件监听
## 基本使用
```xml
<com.example.VoteProgressBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:agreeColor="#4CAF50"
app:disagreeColor="#F44336"/>
```
```java
// 设置投票数据
voteProgressBar.setVoteData(new VoteResult(75, 25), true);
```
10. 后续扩展方向
10.1 多选项支持
当前实现只支持赞成/反对两种状态，可以扩展为：
- 多选项进度条（如A/B/C/D选择）
- 分段颜色（不同百分比区间显示不同颜色）
10.2 动态效果增强
考虑添加：
- 粒子动画效果（当比例变化时）
- 3D倾斜效果
- 波浪形进度条
10.3 服务端集成方案
开发配套后端接口：
- 实时投票结果推送
- 防刷票机制
- 数据统计分析
10.4 Compose版本实现
使用Jetpack Compose重写：
kotlin复制@Composable
fun VoteProgressBar(
agreeCount: Int,
disagreeCount: Int,
modifier: Modifier = Modifier,
animate: Boolean = true
) {
// Compose实现代码...
}