使用android-drawable绘制流程栏

Question

我有一个新用户的3注册页面，我们想添加3个州的每一个进程栏，我们考虑使用android-drawable绘制shipes，任何想法如何实现它。

​

​

Answer 1

定义圆：

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

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

   <size 
       android:width="120dp"
        android:height="120dp"/>
</shape>

然后创建一个水平的ProgressBar，并在上面放3个可绘制的部分。

<RelativeLayout
    android:id="@+id/progress"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <ProgressBar
        android:id="@+id/progress_bar"
        style="@style/CustomProgressBarHorizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_marginLeft="40dp"
        android:layout_marginRight="40dp"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/q1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/light_pink_circle"
            android:gravity="center"
            android:text="1"
            android:textColor="#e6e6e6"
            android:textSize="23sp"
            android:textStyle="bold" />

        <View
            android:layout_width="0dp"
            android:layout_height="1dp"
            android:layout_weight="1" >
        </View>

        <TextView
            android:id="@+id/q2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/light_pink_circle"
            android:gravity="center"
            android:text="2"
            android:textColor="#e6e6e6"
            android:textSize="23sp"
            android:textStyle="bold" />

        <View
            android:layout_width="0dp"
            android:layout_height="1dp"
            android:layout_weight="1" >
        </View>

        <TextView
            android:id="@+id/q3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/light_pink_circle"
            android:gravity="center"
            android:text="3"
            android:textColor="#e6e6e6"
            android:textSize="23sp"
            android:textStyle="bold" />
    </LinearLayout>
</RelativeLayout>

创建您的ProgressBar样式：

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

<!-- Define the background properties like color etc -->
<item android:id="@android:id/background">
    <shape >
        <gradient
            android:startColor="#39bf96"
            android:centerColor="#39bf96"
            android:centerY="1.0"
            android:endColor="#39bf96"
            android:angle="270"
            />
    </shape>
</item>

<!-- Define the progress properties like start color, end color etc -->
<item android:id="@android:id/progress">
    <clip android:gravity="left">
        <shape>
            <gradient
                android:startColor="#31a380"
                android:centerColor="#31a380"
                android:centerY="1.0"
                android:endColor="#31a380"
                android:angle="270"
                />
        </shape>
    </clip>
</item>

​

在第一个页面上，将progress设置为0，在第二个页面上将其设置为50，在第三个页面上将其设置为100。