自定义进度条如何

Question

我想创建一个白色背景的自定义矩形进度条。进度条居中有一个文本，它定义了进度条的高度。根据进度，还有另一个具有黑色背景颜色的视图，其宽度从左侧增加。我有这个，但它不起作用：

                    <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal"
                    android:gravity="center"
                    android:background="#FFFFFF"   // this defines background colour
                    android:weightSum="1.0">

                    <LinearLayout // this should be aligned to the left side
                        android:layout_width="0dp"
                        android:layout_weight="0.25" // this should define percentage width
                        android:layout_height="fill_parent" // it should have height same as the TextView
                        android:background="#FF000000" />

                    <TextView
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:textColor="#FFFFFF"
                        android:textSize="40dp"
                        android:gravity="center" // it should be displayed in the center of the progress bar
                        android:text="some text"/>

编辑：好的，我有这个：

                    <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:background="#FFFFFFFF">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="fill_parent"
                        android:orientation="horizontal"
                        android:gravity="left"
                        android:weightSum="1.0">

                        <LinearLayout
                            android:layout_width="0dp"
                            android:layout_weight="0.25"
                            android:layout_height="fill_parent"
                            android:background="#FF000000" />
                    </LinearLayout>

                    <TextView
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:textColor="#777777"
                        android:textSize="40dp"
                        android:gravity="center"
                        android:text="@{data.remainingTime}"/>

                </RelativeLayout>

唯一的问题是：如何让 LinearLayout 与 TextView 一样高？

Answer 1

您可以将类似的东西与 ConstraintLayout

一起使用

  <androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button3"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:background="#A496D8"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_percent="0.1"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:padding="0dp"
        android:background="#000000"
        android:elevation="6dp"
        app:layout_constraintBottom_toBottomOf="@+id/button3"
        app:layout_constraintStart_toStartOf="@+id/button3"
        app:layout_constraintTop_toTopOf="@+id/button3" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:elevation="6dp"
        android:text="Some text"
        android:textAlignment="center"
        android:textColor="#000000"
        app:layout_constraintBottom_toBottomOf="@+id/button3"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="@+id/button3"
        app:layout_constraintTop_toTopOf="@+id/button3"
        app:layout_constraintVertical_bias="0.0" />

</androidx.constraintlayout.widget.ConstraintLayout>

看起来像这样：

但老实说，我认为您最好使用一些已经为您处理大量逻辑的库。例如：

NumberProgressBar

ProgressView

Android-RoundCornerProgressBar

另一个简单的选择是使用水平进度条 (How to create a horizontal loading progress bar?) 并在其上放置一些文本。

自定义进度条如何

Custom progressbar how to

android

android-layout

android-view