TextView作为带有文本颜色改变的进度条？

Question

我正在改进我的应用程序的用户界面。在我使用的设计中，有一个TextView将在某些时间充当进度条。结果应该如下图所示：

（见图片）

问题是，在进度条变化时，部分文本的颜色也会改变。

我研究了Android中的SpannableString，如果我能找到被进度条覆盖的字母，那么它可能会起作用（但我认为这不会很容易/准确）。

现在我计划使用以下方法：

- 带有以下内容的FrameLayout： - 具有绿色文本和白色背景的背景textView。 - 在进步中改变宽度的前置Linearlayout。 - 具有绿色背景和与FrameLayout宽度匹配的白色文本的TextView。

是否有更好的方法？

- Mr.Me

Answer 1

更好的方法是通过覆盖TextView类来实现。您可以使用裁剪来分割TextView，并以不同颜色绘制两个部分。

TextView tv = new TextView(this){
    @Override
    public void draw(Canvas canvas) {
        int color1 = Color.WHITE;
        int color2 = Color.GREEN;

        canvas.save();
        setTextColor(color1);
        setBackgroundColor(color2);
        canvas.clipRect(new Rect(0, 0, (int)(getWidth() * percent), getHeight()));
        super.draw(canvas);
        canvas.restore();

        canvas.save();
        setTextColor(color2);
        setBackgroundColor(color1);
        canvas.clipRect(new Rect((int)(getWidth() * percent), 0, getWidth(), getHeight()));
        super.draw(canvas);
        canvas.restore();
    }  
};

我希望您能明白这一点。

- Zielony

---

只需在每次绘制后添加canvas.restore();，代码就可以准备好了。 - Mr.Me

抱歉，我没有时间测试它 :) 谢谢 - Zielony

由于某些原因，当我尝试上面的代码时，文本颜色成功地改变了，但背景仍然是color1。 - Android

请注意，setTextColor() 会导致 invalidate() 调用。您的视图将不断重绘。 - Marc Plano-Lesay

Answer 2

我知道这是一个老问题，但我还是要发布这篇文章，因为它可能会帮助到其他人面对类似的情况。以下是一个例子。

我的解决方案基本上是使用drawText在画布中绘制。这里的诀窍在于你需要绘制两个文本，一个在栏的范围内，另一个在视图范围内，并按照以下Z轴顺序（根据所用的示例）：

- 文本（白色） - 红色条 - 文本（黑色） - 视图背景

我已经给出了一个实现此功能的示例，这个示例/库中我使用了自定义 ImageView。请随意使用它： https://github.com/danilodanicomendes/InvertedTextProgressBar

- Danilo

Answer 3

最简单的解决方案是在相对布局上使用ProgressBar和TextView。您可以为两者提供自己的样式，就这样。尝试在TextView上实现这个功能没有意义，因为ProgressBar已经具备了您所需的所有功能。您的布局将如下所示：

<RelativeLayout android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ProgressBar android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"/>

        <TextView android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Doing something"
            android:gravity="center"
            android:layout_centerVertical="true"/>          
</RelativeLayout>

你只需要根据自己的需求调整宽度和高度即可 :)

- Mark