具有双色表示的水平单条形图

What is the easiest way to create a horizontal single bar Graph in Android with two colors representations? something like this

在Android中使用两种颜色表示创建水平单条形图的最简单方法是什么？这样的事情

The amount 64% could obviously get increased up to 100% timely manner (animation??? :( ) is it SVG or Image Views or how?

64％的数量显然可以及时增加到100％（动画??? :(）是SVG还是图像视图还是如何？

1 个解决方案

#1

This layout achieves above, adjust p3 TextView width (red background) in code as percentage of p1 TextView width (blue background) changing p4 TextView text to the current percentage (consider what to do as percentage reaches 100% as labels will overlap, suggest setting text value on p3 after a certain limit, say 85%, and then hiding p4. I suggest using AsyncTask (or other threading method) if increasing percentage incrementally to see UI updates. Also look at Android Tween Animation.

这个布局实现了上面，在代码中调整p3 TextView宽度（红色背景）作为p1 TextView宽度（蓝色背景）的百分比将p4 TextView文本更改为当前百分比（考虑到百分比达到100％，因为标签将重叠，建议设置在某个限制之后p3上的文本值，比如说85％，然后隐藏p4。我建议使用AsyncTask（或其他线程方法），如果逐步增加百分比以查看UI更新。还可以查看Android Tween Animation。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="50dp"
    android:orientation="horizontal"
    android:padding="5dp">  
    <TextView
        android:id="@+id/bar"
        android:layout_width="5dp"
        android:layout_height="25dp"
        android:background="#FF000000" />
  <RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:paddingTop="5dp">
    <TextView
        android:id="@+id/p1"
        android:layout_width="220dp"
        android:layout_height="wrap_content"
        android:background="#FF00FFFF" />
    <TextView
        android:id="@+id/p2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/p1"
        android:text="100%" />
    <TextView
        android:id="@+id/p3"
        android:layout_width="140dp"
        android:layout_height="wrap_content"
        android:background="#FFFF0000"
        android:gravity="end"  />
    <TextView
        android:id="@+id/p4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/p3"
        android:text="64%" />
  </RelativeLayout>
</LinearLayout>