5

我正在努力改进我的应用程序的用户界面。在我使用的设计中，我有一个 TextView，它将在特定时间充当进度条。ruslt 应该是这样的：

在此处输入图像描述

问题是，随着进度的变化，部分文本会改变颜色

我查看了android中的spannablestring，如果我能找到进度所涵盖的字母，它会起作用（但我认为这并不容易/准确）

我现在打算做的是使用以下内容：

  • 框架布局与：
  • 背景 textView 带有绿色文本和白色背景。
  • 前端线性布局，在进行时会改变宽度。
  • 具有绿色背景和与框架布局宽度匹配的白色文本的 TextView。

有更好的方法吗？

4

3 回答 3

9

更好的方法需要您覆盖 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();
    }  
};

我希望你明白这一点

于 2013-02-20T10:42:22.820 回答
2

我知道这是一个老问题，但我发布这个问题是因为它可能会帮助其他人寻找类似的情况，希望它会帮助现在经历这个问题的人。这是一个例子

1 2 3

我的解决方案基本上是使用drawText. 这里的技巧是您绘制两个文本，一个在条形边界内，一个在视图边界内，并使用以下 Z-index 顺序（根据使用的示例）：

  • 文字（白色）
  • 红条
  • 文字（黑色）
  • 查看背景

我已经做了一个关于如何实现这个的例子，在这个示例/库中，我使用了一个自定义的 imageview 来做到这一点。随意使用它，因为你喜欢它：https ://github.com/danilodanicomendes/InvertedTextProgressBar

于 2016-04-11T00:04:15.737 回答
1

最简单的解决方案是在相对布局上使用 ProgressBar 和 TextView。您为两者提供自己的风格，仅此而已。当 ProgressBar 拥有您所需要的一切时，尝试在 TextView 上执行此操作是没有意义的。您的布局将如下所示：

<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>

您只需要根据需要使用宽度和高度:)

于 2013-02-20T10:54:03.623 回答