Android progressbar_horizontal简单封装

只有干货

1、布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/white"
    android:paddingVertical="8dp">
    <ProgressBar
        android:id="@+id/pb_group_step"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="8dp"
        android:layout_marginHorizontal="50dp"
        android:layout_marginTop="6dp"
        android:max="100"
        android:progress="50"
        android:progressDrawable="@drawable/progressbar" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <LinearLayout
            android:id="@+id/lLayout_step_one"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center_horizontal"
            android:orientation="vertical">

            <TextView
                android:id="@+id/tv_step_one_num"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:background="@drawable/draw_dot_10"
                android:gravity="center"
                android:text="1"
                android:textColor="@color/white"
                android:textSize="12sp" />

            <TextView
                android:id="@+id/tv_step_one_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="2dp"
                android:text="选择商品"
                android:textColor="@color/main_color_pink"
                android:textSize="12sp" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/lLayout_step_two"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center_horizontal"
            android:orientation="vertical">

            <TextView
                android:id="@+id/tv_step_two_num"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:background="@drawable/circle_dotted_line"
                android:gravity="center"
                android:text="2"
                android:textColor="@color/text_color"
                android:textSize="12sp" />

            <TextView
                android:id="@+id/tv_step_two_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="2dp"
                android:text="支付开团"
                android:textColor="@color/text_color"
                android:textSize="12sp" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/lLayout_step_three"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center_horizontal"
            android:orientation="vertical">

            <TextView
                android:id="@+id/tv_step_three_num"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:background="@drawable/circle_dotted_line"
                android:gravity="center"
                android:text="3"
                android:textColor="@color/text_color"
                android:textSize="12sp" />

            <TextView
                android:id="@+id/tv_step_three_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="2dp"
                android:text="邀请好友"
                android:textColor="@color/text_color"
                android:textSize="12sp" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/lLayout_step_four"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center_horizontal"
            android:orientation="vertical">

            <TextView
                android:id="@+id/tv_step_four_num"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:background="@drawable/circle_dotted_line"
                android:gravity="center"
                android:text="4"
                android:textColor="@color/text_color"
                android:textSize="12sp" />

            <TextView
                android:id="@+id/tv_step_four_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="2dp"
                android:text="人满成团"
                android:textColor="@color/text_color"
                android:textSize="12sp" />
        </LinearLayout>
    </LinearLayout>


</RelativeLayout>

2、相关布局
draw_dot_10

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

    <solid android:color="@color/main_color_pink" />

    <corners android:radius="5dip" />

</shape>

circle_dotted_line

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

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

    <stroke
        android:dashGap="2dp"
        android:dashWidth="6dp"
        android:width="1dp"
        android:color="@color/gray_line" />

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

</shape>

进度条颜色设置

<?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="15dp" />
            <solid android:color="@color/color_bg_for_all" />
        </shape>
    </item>
    <!--进度颜色-->
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="15dp" />
                <solid android:color="@color/main_color_pink" />
            </shape>
        </clip>
    </item>
</layer-list>

自定义view-ProgressView

/**
 * Created by hx
 * Time 2018/11/16/016.
 */

public class ProgressView extends RelativeLayout {
    public static final int STEP_ONE = 1;
    public static final int STEP_TWO = 2;
    public static final int STEP_THREE = 3;
    public static final int STEP_FOUR = 4;
    private ProgressBar mBar;
    private TextView tvNum1, tvText1, tvNum2, tvText2, tvNum3, tvText3, tvNum4, tvText4;
    private List<TextView> numList = new ArrayList<>();
    private List<TextView> textList = new ArrayList<>();

    public ProgressView(Context context) {
        super(context);
    }

    public ProgressView(Context context, AttributeSet attrs) {
        super(context, attrs);
        // 加载布局
        LayoutInflater.from(context).inflate(R.layout.layout_group_progress, this);
        // 获取控件
        mBar = findViewById(R.id.pb_group_step);
        tvNum1 = findViewById(R.id.tv_step_one_num);
        tvText1 = findViewById(R.id.tv_step_one_text);
        tvNum2 = findViewById(R.id.tv_step_two_num);
        tvText2 = findViewById(R.id.tv_step_two_text);
        tvNum3 = findViewById(R.id.tv_step_three_num);
        tvText3 = findViewById(R.id.tv_step_three_text);
        tvNum4 = findViewById(R.id.tv_step_four_num);
        tvText4 = findViewById(R.id.tv_step_four_text);
        numList.add(tvNum1);
        numList.add(tvNum2);
        numList.add(tvNum3);
        numList.add(tvNum4);
        textList.add(tvText1);
        textList.add(tvText2);
        textList.add(tvText3);
        textList.add(tvText4);
    }

    public void setStep(int mStep) {
        switch (mStep) {
            case STEP_ONE:
                mBar.setProgress(16);
                setTextColor(mStep);
                break;
            case STEP_TWO:
                mBar.setProgress(50);
                setTextColor(mStep);
                break;
            case STEP_THREE:
                mBar.setProgress(82);
                setTextColor(mStep);
                break;
            case STEP_FOUR:
                mBar.setProgress(100);
                setTextColor(mStep);
                break;
        }
    }

    private void setTextColor(int mStep) {
        for (int i = 0; i < 4; i++) {
            if (i < mStep) {
                numList.get(i).setTextColor(getResources().getColor(R.color.white));
                numList.get(i).setBackground(getResources().getDrawable(R.drawable.draw_dot_10));
                textList.get(i).setTextColor(getResources().getColor(R.color.main_color_pink));
            } else {
                numList.get(i).setTextColor(getResources().getColor(R.color.text_color));
                numList.get(i).setBackground(getResources().getDrawable(R.drawable.circle_dotted_line));
                textList.get(i).setTextColor(getResources().getColor(R.color.text_color));
            }

        }
    }
}

引用：

progress = (ProgressView) findViewById(R.id.progress);
progress.setStep(ProgressView.STEP_ONE);

以上系本人记录