android - 用两种不同颜色的文本填充形状

Question

我试图实现这一点，但我只能实现填充对象(形状)。我的要求是更改文本颜色以及形状填充。

形状可以用百分比填充，比如直到
10% 到 50% = 绿色
51% 到 80% = 黄色
81% 到 100% = 红色

当黄色填充形状中的“:”背景时，它将颜色变为“白色”，之前是“黄色” .这个形状的大小也是动态的。

我尝试并取得了什么？

我可以用百分比填充形状，但是当它到达文本边缘时无法改变颜色。

Answer 1

我写了一个自定义 View 。您可以使用 Path API 获得这种双色效果。但为了 Android 1+ 兼容性，您应该使用 Region API，而 Kitkat (19+) 以上版本您可以只使用 Path API。

让我们逐步了解如何实现此效果的概念:

1. 我们需要绘制三种形状 - 轮廓圆角描边 + 橙色进度条 + 文本本身
2. 我们按原样绘制笔画
3. 但是对于Progress bar，我们需要去掉与其相交的文字，基本上让文字相交处透明。 (差异)
4. 同样对于进度条，我们必须只显示与外部圆形笔划路径相交的矩形部分。 (交叉路口)
5. 同样，对于文本，我们基本上在左侧切掉了与进度条相交的部分。我们只显示橙色文本的右侧。 (再次不同)

如果您使用的是 API 19+，这就是关键代码 fragment 的样子:

croppedProgressPath.op(progressPath, textPath, Path.Op.DIFFERENCE);
croppedProgressPath.op(progressStrokePath, Path.Op.INTERSECT);
————————————
croppedTextPath.op(textPath, progressPath, Path.Op.DIFFERENCE);

行here和 here .

我在 Github 上为这个名为 Diffre 的项目写了一个概念证明。如果您想先测试一下，所有代码都在 this repo 中.