Question

我想创建ProgressBar以及与下面相同的文字。

enter image description here

请指导我。我开发了一些设计，但由于进度条占最小宽度，我无法在ProgressBar的正确右侧显示文本。请看下面的图片： enter image description here

我被困在这上面了。提前谢谢。

我的代码是：

 <RelativeLayout
            android:layout_width="match_parent"
            android:layout_below="@+id/lnrButtons"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:layout_marginRight="30dp"
            android:padding="5dp"
            android:background="@drawable/white_button_selector">

            <ProgressBar
                android:id="@+id/progressBarHome"
                android:layout_width="match_parent"
                style="?android:attr/progressBarStyleHorizontal"
                android:progressDrawable="@drawable/custom_progress_bar"
                android:layout_height="wrap_content"
                android:progress="50"
                android:layout_alignParentStart="true"
                android:layout_centerVertical="true"
                android:indeterminate="false"/>

            <TextView
                android:id="@+id/txtProgress"
                android:layout_width="wrap_content"
                android:text="10%"
                android:textColor="@color/light_orange"
                android:background="@android:color/transparent"
                android:layout_centerVertical="true"
                android:layout_alignRight="@+id/progressBarHome"

                android:layout_height="wrap_content"/>

        </RelativeLayout>

实现代码更改后输出为：

enter image description here

Answer 1

你只需根据那个设计布局。我认为你的布局设计将遵循。

例如。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <ProgressBar
      style="@android:style/Widget.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
       android:id="@+id/PROGRESS_BAR"
    >
    <TextView
        android:background="#00000000" // transparent background
        android:layout_alignLeft="@id/PROGRESS_BAR"
        android:layout_alignTop="@id/PROGRESS_BAR"
        android:layout_alignRight="@id/PROGRESS_BAR"
        android:layout_alignBottom="@id/PROGRESS_BAR"
    >
</RelativeLayout>

根据您的要求，如果您想移动文本视图，则必须将进度值传递给以下txtView.setX((int) ur progress value);

希望它会对你有所帮助。

Answer 2

我想Android ValueAnimator应该为你做的伎俩。基本上，您需要为此进度条设置自定义形状，您可以设置动画以在进度增加时缩放其宽度。

你可能会在这里得到一些帮助 ObjectAnimator animate LinearLayout width

Progressbar以及Android中的文本

2 个答案: