如何制作这种类型的进度条

Question

我期待制作以下类型的进度条，但不知道我应该从哪里开始。

我已经浏览了多个自定义进度条库和示例，但它们都没有真正帮助我创建此进度条。请帮我。提前谢谢。

Answer 1

试试如下：

在您应用的drawable文件夹中创建名为 custom_progress_bar_horizo​​ntal.xml 和 orange_button_selector.xml 的文件，如下所示：

<强> custom_progress_bar_horizo​​ntal.xml

<?xml version="1.0" encoding="UTF-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="5dip" />

            <gradient
                android:angle="270"
                android:centerColor="#ffdddddd"
                android:centerY="0.50"
                android:endColor="#ffffffff"
                android:startColor="#ffffffff" />
        </shape>
    </item>
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="5dip" />

                <gradient
                    android:angle="90"
                    android:endColor="#771997e1"
                    android:startColor="#770e75af" />
            </shape>
        </clip>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="5dip" />

                <gradient
                    android:angle="90"
                    android:endColor="#ff1997e1"
                    android:startColor="#ff0e75af" />
            </shape>
        </clip>
    </item>

</layer-list>

<强> orange_button_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <corners android:radius="200dp" />

    <solid android:color="#AAAAAA" />

    <padding
        android:bottom="8dp"
        android:left="8dp"
        android:right="8dp"
        android:top="8dp" />

</shape>

在 style.xml 中添加以下样式。

<style name="CustomProgressBar" parent="android:Widget.ProgressBar.Horizontal">
        <item name="android:indeterminateOnly">false</item>
        <item name="android:progressDrawable">@drawable/custom_progress_bar_horizontal</item>
        <item name="android:minHeight">10dip</item>
        <item name="android:maxHeight">20dip</item>
    </style>

如下所示创建布局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_gravity="center_vertical" >

    <LinearLayout
        android:id="@+id/ll_top1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_centerInParent="true"
        android:background="@drawable/orange_button_selector"
        android:gravity="center"
        android:orientation="horizontal"
        android:weightSum="1"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp" >

        <ProgressBar
            android:id="@+id/progressBar1"
            style="@style/CustomProgressBar"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight=".85" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight=".15"
            android:gravity="right"
            android:text="18 MB"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textSize="15sp" />
    </LinearLayout>

</RelativeLayout>

这是输出：