如何使用这样的数据静态设计进度条

Question

我将设计带有数据静态的进度条，如下所示。但我想不出怎么做。带有数据静态的进度条将如下所示

​

​

Answer 1

需要写特殊的绘图风格来实现这样的设计。

progess_bar_drawable.xml

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

    <item>
        <shape android:shape="rectangle" >
            <corners android:radius="3dp"/>

            <gradient
                android:angle="90"
                android:endColor="@color/seek_bar_default" <!-- your_primary_color -->
                android:startColor="@color/seek_bar_default" /> <!-- your_primary_color -->
        </shape>
    </item>
    <item>
        <clip>
            <shape android:shape="rectangle" >
                <corners android:radius="3dp" />

                <gradient
                    android:angle="90"
                    android:endColor="@color/completed_green" <!-- your_secodnary_color -->
                    android:startColor="@color/completed_green" /> <!-- your_secondary_color -->
            </shape>
        </clip>
    </item>

</layer-list>

这里的原色是未填充的颜色，第二颜色是填充的颜色。

布局文件中的 :

​

<ProgressBar
    android:id="@+id/progress_bar_completed"
    style="@android:style/Widget.ProgressBar.Horizontal"
    android:layout_width="match_parent"
    android:layout_height="24dp"
    android:indeterminate="false"
    android:max="100"
    android:progress="100"
    android:layout_marginTop="10dp"
    android:layout_marginBottom="10dp"
    android:progressDrawable="@drawable/video_progress_bar"
    android:visibility="visible" />

<ProgressBar
    style="@android:style/Widget.ProgressBar.Horizontal"
    android:layout_width="match_parent"
    android:layout_height="24dp"
    android:indeterminate="false"
    android:layout_marginTop="10dp"
    android:layout_marginBottom="10dp"
    android:max="100"
    android:progress="20"
    android:progressDrawable="@drawable/video_progress_bar"
    android:visibility="visible" />

<ProgressBar
    style="@android:style/Widget.ProgressBar.Horizontal"
    android:layout_width="match_parent"
    android:layout_height="24dp"
    android:indeterminate="false"
    android:layout_marginTop="10dp"
    android:layout_marginBottom="10dp"
    android:max="100"
    android:progress="50"
    android:progressDrawable="@drawable/video_progress_bar"
    android:visibility="visible" />

<ProgressBar
    style="@android:style/Widget.ProgressBar.Horizontal"
    android:layout_width="match_parent"
    android:layout_height="24dp"
    android:indeterminate="false"
    android:max="100"
    android:progress="70"
    android:layout_marginTop="10dp"
    android:layout_marginBottom="10dp"
    android:progressDrawable="@drawable/video_progress_bar"
    android:visibility="visible" />

​

​

​