老規矩先看圖：

Android----流程（如物流）進度效果前言

前言

寫這篇之前，也考慮了好幾種方案。網上有采用自定義控件的，有引用三方依賴的。但是考慮到後期更改樣式問題，還是自己寫吧。後期還可以補全動畫效果，簡單粗暴。

一布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv_myRecycler"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="@dimen/ds_25dp"
        android:background="@color/white"
        android:nestedScrollingEnabled="false" />
</LinearLayout>

布局很簡單，正常的 RecyclerView，設定id。

二java部分：

package com.yc.stscf.fragment.contract;


import android.annotation.SuppressLint;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.yc.stscf.R;
import com.yc.stscf.adapter.ContractProcessAdapter;
import com.yc.stscf.base.BaseFragment;
import com.yc.stscf.model.ContractProcessBean;

import java.util.ArrayList;
import java.util.List;

import butterknife.BindView;

/**
 * ================================================
 *
 * @author :Vip
 * @version :V 1.0.0
 * @date :2019/7/9 15:47
 * 描    述：這是一個小demo
 * 修訂曆史：
 * ================================================
 */

public class ContractProcessFragment extends BaseFragment {
    @BindView(R.id.rv_myRecycler)
    RecyclerView rvMyRecycler;
    /**
     * 總布局
     **/
    private View view = null;
    /**
     * 标志位，标志已經初始化完成
     **/
    private boolean isPrepared;
    ContractProcessAdapter contractProcessAdapter;
    List<ContractProcessBean.DataBean> dataBeanList = new ArrayList<>();

    @SuppressLint("InflateParams")
    @Override
    protected View initLayout(LayoutInflater inflater, ViewGroup container, boolean b) {
        view = inflater.inflate(R.layout.fragment_contract_process, null);
        isPrepared = true;
        return view;
    }

    @Override
    protected void initView(Bundle savedInstanceState) {
        if (rvMyRecycler.getRecycledViewPool() != null) {
            rvMyRecycler.getRecycledViewPool().setMaxRecycledViews(0, 10);
        }
        rvMyRecycler.setLayoutManager(new LinearLayoutManager(mContext, LinearLayoutManager.VERTICAL, false));
        contractProcessAdapter = new ContractProcessAdapter(R.layout.item_contract_process, dataBeanList);
        rvMyRecycler.setAdapter(contractProcessAdapter);
        initData();
    }

    @Override
    protected void lazyLoad() {
        if (!isPrepared || !isVisible) {
            return;
        }
    }
    private void initData() {
        /**
         * 标題，狀态，姓名，内容，時間
         **/
        ContractProcessBean.DataBean dataBean = new ContractProcessBean.DataBean();
        dataBean.setTitle("合同發起");
        dataBean.setState("0");
        dataBean.setName("曲大膽");
        dataBean.setContent("融資合同已發起");
        dataBean.setTime("2019-10-10 09:20");


        ContractProcessBean.DataBean dataBean1 = new ContractProcessBean.DataBean();
        dataBean1.setTitle("業務主管");
        dataBean1.setState("1");
        dataBean1.setName("滴答星仔");
        dataBean1.setContent("申請資質符合要求，同意融資申請。");
        dataBean1.setTime("2019-10-30 09:20");

        ContractProcessBean.DataBean dataBean2 = new ContractProcessBean.DataBean();
        dataBean2.setTitle("風控主管");
        dataBean2.setState("2");
        dataBean2.setName("滴答星仔");
        dataBean2.setContent("申請資質不符合要求，駁回重新申請。");
        dataBean2.setTime("2019-9-30 09:20");

        ContractProcessBean.DataBean dataBean3 = new ContractProcessBean.DataBean();
        dataBean3.setTitle("蘿蔔主管");
        dataBean3.setState("3");
        dataBean3.setName("滴答星仔");
        dataBean3.setContent("申請資質不符合要求，駁回重新申請。");
        dataBean3.setTime("2017-9-30 09:20");

        ContractProcessBean.DataBean dataBean4 = new ContractProcessBean.DataBean();
        dataBean4.setTitle("資料稽核");
        dataBean4.setState("4");
        dataBean4.setName("滴答星仔");
        dataBean4.setContent("稽核中，駁回重新申請。");
        dataBean4.setTime("2017-8-30 09:20");

        dataBeanList.add(dataBean);
        dataBeanList.add(dataBean1);
        dataBeanList.add(dataBean2);
        dataBeanList.add(dataBean3);
        dataBeanList.add(dataBean4);
        contractProcessAdapter.notifyDataSetChanged();
    }

}

上面很簡單。正常的資料指派綁定擴充卡，沒做什麼特别操作。

三擴充卡布局：

package com.yc.stscf.adapter;

import android.view.View;

import com.chad.library.adapter.base.BaseQuickAdapter;
import com.chad.library.adapter.base.BaseViewHolder;
import com.yc.stscf.R;
import com.yc.stscf.model.ContractProcessBean;
import com.yc.stscf.model.FinancingProcessBean;

import java.util.List;

/**
 * ================================================
 *
 * @author :Vip
 * @version :V 1.0.0
 * @date :2019/7/9 15:47
 * 描    述：擴充卡
 * 修訂曆史：
 * ================================================
 */

public class ContractProcessAdapter extends BaseQuickAdapter<ContractProcessBean.DataBean, BaseViewHolder> {
    public void upData(List<ContractProcessBean.DataBean> data) {
        mData = data;
    }

    /**
     * 移除所有資料
     **/
    public void removeAll() {
        if (mData != null && mData.size() > 0) {
            for (int i = mData.size() - 1; i >= 0; i--) {
                mData.remove(i);
            }
        }

    }

    public ContractProcessAdapter(int itemRecycler, List<ContractProcessBean.DataBean> mList) {
        super(itemRecycler, mList);

    }

    @Override
    protected void convert(final BaseViewHolder helper, final ContractProcessBean.DataBean item) {
        helper.setText(R.id.tv_num, helper.getPosition() + 1 + "");
        /**
         * 标題，狀态，姓名，内容，時間
         **/
        switch (item.getState()) {
            case "0":
                //全顯示
                helper.setText(R.id.tv_title, item.getTitle()).setTextColor(R.id.tv_title, mContext.getResources().getColor(R.color.cs_333333));
                helper.setText(R.id.tv_state, "送出").setTextColor(R.id.tv_state, mContext.getResources().getColor(R.color.cs_999999));
                helper.setText(R.id.tv_name, item.getName()).setTextColor(R.id.tv_name, mContext.getResources().getColor(R.color.cs_999999));
                helper.setText(R.id.tv_time, item.getTime()).setTextColor(R.id.tv_time, mContext.getResources().getColor(R.color.cs_999999));
                helper.setText(R.id.tv_content, item.getContent()).setTextColor(R.id.tv_content, mContext.getResources().getColor(R.color.cs_999999));
                helper.getView(R.id.tv_time).setVisibility(View.VISIBLE);
                helper.getView(R.id.tv_content).setVisibility(View.VISIBLE);
                helper.getView(R.id.rl_right).setBackground(mContext.getDrawable(R.drawable.ic_liucheng_bai));
                break;

            case "1":
                //部分顯示
                helper.setText(R.id.tv_title, item.getTitle()).setTextColor(R.id.tv_title, mContext.getResources().getColor(R.color.cs_333333));
                helper.setText(R.id.tv_state, "稽核中").setTextColor(R.id.tv_state, mContext.getResources().getColor(R.color.cs_F88441));
                helper.setText(R.id.tv_name, item.getName()).setTextColor(R.id.tv_name, mContext.getResources().getColor(R.color.cs_999999));
                helper.setText(R.id.tv_time, item.getTime()).setTextColor(R.id.tv_time, mContext.getResources().getColor(R.color.cs_999999));
                helper.setText(R.id.tv_content, item.getContent()).setTextColor(R.id.tv_content, mContext.getResources().getColor(R.color.cs_999999));
                helper.getView(R.id.tv_time).setVisibility(View.GONE);
                helper.getView(R.id.tv_content).setVisibility(View.GONE);
                helper.getView(R.id.rl_right).setBackground(mContext.getDrawable(R.drawable.ic_liucheng_cheng));
                break;

            case "2":
                //部分顯示
                helper.setText(R.id.tv_title, item.getTitle()).setTextColor(R.id.tv_title, mContext.getResources().getColor(R.color.cs_cccccc));
                helper.setText(R.id.tv_state, "未開始").setTextColor(R.id.tv_state, mContext.getResources().getColor(R.color.cs_cccccc));
                helper.setText(R.id.tv_name, item.getName()).setTextColor(R.id.tv_name, mContext.getResources().getColor(R.color.cs_cccccc));
                helper.setText(R.id.tv_time, item.getTime()).setTextColor(R.id.tv_time, mContext.getResources().getColor(R.color.cs_cccccc));
                helper.setText(R.id.tv_content, item.getContent()).setTextColor(R.id.tv_content, mContext.getResources().getColor(R.color.cs_cccccc));
                helper.getView(R.id.tv_time).setVisibility(View.GONE);
                helper.getView(R.id.tv_content).setVisibility(View.GONE);
                helper.getView(R.id.rl_right).setBackground(mContext.getDrawable(R.drawable.ic_liucheng_bai));
                break;

            case "3":
                //全顯示
                helper.setText(R.id.tv_title, item.getTitle()).setTextColor(R.id.tv_title, mContext.getResources().getColor(R.color.cs_333333));
                helper.setText(R.id.tv_state, "同意").setTextColor(R.id.tv_state, mContext.getResources().getColor(R.color.cs_999999));
                helper.setText(R.id.tv_name, item.getName()).setTextColor(R.id.tv_name, mContext.getResources().getColor(R.color.cs_999999));
                helper.setText(R.id.tv_time, item.getTime()).setTextColor(R.id.tv_time, mContext.getResources().getColor(R.color.cs_999999));
                helper.setText(R.id.tv_content, item.getContent()).setTextColor(R.id.tv_content, mContext.getResources().getColor(R.color.cs_999999));
                helper.getView(R.id.tv_time).setVisibility(View.VISIBLE);
                helper.getView(R.id.tv_content).setVisibility(View.VISIBLE);
                helper.getView(R.id.rl_right).setBackground(mContext.getDrawable(R.drawable.ic_liucheng_bai));
                break;

            case "4":
                helper.setText(R.id.tv_title, item.getTitle()).setTextColor(R.id.tv_title, mContext.getResources().getColor(R.color.cs_333333));
                helper.setText(R.id.tv_state, "駁回").setTextColor(R.id.tv_state, mContext.getResources().getColor(R.color.cs_dc4545));
                helper.setText(R.id.tv_name, item.getName()).setTextColor(R.id.tv_name, mContext.getResources().getColor(R.color.cs_999999));
                helper.setText(R.id.tv_time, item.getTime()).setTextColor(R.id.tv_time, mContext.getResources().getColor(R.color.cs_999999));
                helper.setText(R.id.tv_content, item.getContent()).setTextColor(R.id.tv_content, mContext.getResources().getColor(R.color.cs_999999));
                helper.getView(R.id.tv_time).setVisibility(View.VISIBLE);
                helper.getView(R.id.tv_content).setVisibility(View.VISIBLE);
                helper.getView(R.id.rl_right).setBackground(mContext.getDrawable(R.drawable.ic_liucheng_hong));
                break;
            default:
                break;
        }
        if (helper.getPosition() == mData.size() - 1) {
            helper.getView(R.id.view_line_color).setVisibility(View.GONE);
        } else {
            helper.getView(R.id.view_line_color).setVisibility(View.VISIBLE);
        }


    }
}

擴充卡引用了三方依賴，已經使用了緩存機制。這裡大家替換成自己的baseAdapter即可，這裡在方法裡由主界面傳了RecyclerView和資料源list.

Android----流程（如物流）進度效果前言

這裡去設定進度的1234

Android----流程（如物流）進度效果前言

根據狀态去顯示顔色灰暗

Android----流程（如物流）進度效果前言

根據目前位置，去比對，使最後一個豎線隐藏。

四實體類：

package com.yc.stscf.model;

import java.io.Serializable;
import java.util.List;

/**
 * ================================================
 *
 * @author :Vip
 * @version :V 1.0.0
 * @date :2019/7/9 15:47
 * 描    述：正常實體類
 * 修訂曆史：
 * ================================================
 */

public class ContractProcessBean implements Serializable {

    private String msg;
    private String code;
    private List<DataBean> data;

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }

    public String getCode() {
        return code;
    }

    public void setCode(String code) {
        this.code = code;
    }

    public List<DataBean> getData() {
        return data;
    }

    public void setData(List<DataBean> data) {
        this.data = data;
    }

    public static class DataBean {
        /**
         * 标題，狀态，姓名，内容，時間
         **/
        String title;
        String state;
        String name;
        String content;
        String time;

        public String getTitle() {
            return title;
        }

        public void setTitle(String title) {
            this.title = title;
        }

        public String getState() {
            return state;
        }

        public void setState(String state) {
            this.state = state;
        }

        public String getName() {
            return name;
        }

        public void setName(String name) {
            this.name = name;
        }

        public String getContent() {
            return content;
        }

        public void setContent(String content) {
            this.content = content;
        }

        public String getTime() {
            return time;
        }

        public void setTime(String time) {
            this.time = time;
        }

    }
}

五擴充卡子項布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/white"
    android:gravity="center"
    android:orientation="vertical">

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

        <LinearLayout
            android:id="@+id/rl_left"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginLeft="@dimen/ds_28dp"
            android:layout_marginRight="@dimen/ds_10dp"
            android:orientation="vertical"
            tools:ignore="RtlHardcoded">

            <TextView
                android:id="@+id/tv_num"
                android:layout_width="@dimen/ds_22dp"
                android:layout_height="@dimen/ds_22dp"
                android:layout_marginTop="@dimen/ds_9dp"
                android:background="@drawable/bg_f88441_360_round"
                android:gravity="center_vertical|center_horizontal"
                android:text="1"
                android:textColor="@color/white"
                android:textSize="@dimen/ds_13sp"
                tools:ignore="HardcodedText" />

            <View
                android:id="@+id/view_line_color"
                android:layout_width="@dimen/ds_2dp"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="@dimen/ds_9dp"
                android:background="@color/cs_f7823f" />

        </LinearLayout>


        <!--融資審批流程擴充卡-->
        <RelativeLayout
            android:id="@+id/rl_right"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="@dimen/ds_20dp"
            android:layout_marginRight="@dimen/ds_22dp"
            android:background="@drawable/ic_liucheng_bai"
            tools:ignore="RtlHardcoded,UselessParent">


            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginBottom="@dimen/ds_14dp"
                android:layout_marginLeft="@dimen/ds_20dp"
                android:layout_marginRight="@dimen/ds_20dp"
                android:layout_marginTop="@dimen/ds_14dp"
                tools:ignore="RtlHardcoded,UselessLeaf">

                <TextView
                    android:id="@+id/tv_title"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="@dimen/ds_10dp"
                    android:text="合同發起"
                    android:textColor="@color/cs_333333"
                    android:textSize="@dimen/ds_14sp"
                    tools:ignore="HardcodedText" />

                <TextView
                    android:id="@+id/tv_state"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentRight="true"
                    android:gravity="right"
                    android:text="狀态"
                    android:textColor="@color/cs_999999"
                    android:textSize="@dimen/ds_12sp"
                    tools:ignore="HardcodedText" />

                <TextView
                    android:id="@+id/tv_name"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/tv_title"
                    android:layout_marginLeft="@dimen/ds_10dp"
                    android:layout_marginTop="@dimen/ds_5dp"
                    android:text="曲麗麗"
                    android:textColor="@color/cs_999999"
                    android:textSize="@dimen/ds_12sp"
                    tools:ignore="HardcodedText" />

                <TextView
                    android:id="@+id/tv_content"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/tv_name"
                    android:layout_marginLeft="@dimen/ds_10dp"
                    android:layout_marginTop="@dimen/ds_5dp"
                    android:text="申請資質符合要求，同意融資申請。"
                    android:textColor="@color/cs_999999"
                    android:textSize="@dimen/ds_12sp"
                    tools:ignore="HardcodedText" />

                <TextView
                    android:id="@+id/tv_time"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/tv_content"
                    android:layout_marginLeft="@dimen/ds_10dp"
                    android:layout_marginTop="@dimen/ds_5dp"
                    android:text="2019-10-10 09:20"
                    android:textColor="@color/cs_999999"
                    android:textSize="@dimen/ds_11sp"
                    tools:ignore="HardcodedText" />

            </RelativeLayout>


        </RelativeLayout>

    </LinearLayout>


</LinearLayout>

子項布局的，一些圖檔沒有提供，大家可以自行替換。黃色的原點可以放個小圖檔。裡面的ds間距就正常給多少多少dp即可

Android----流程（如物流）進度效果前言

最後就大功告成了！

總結：

我個人是非常不建議這部分的邏輯用畫筆去畫。

缺點一是增加了開發者的學習成本，很多開發者更加喜歡簡單粗暴好用的邏輯。

缺點二是無法靈活，無法輕松的按産品及ui的需求去改變自己的樣式。

補充：

1.樣式上。線條的長度可以随着右邊文本内容的增大而變長。

2.右側的内容，外層的圖檔是.9圖檔，可以自動拉伸不變形，配合左邊達到很自然的效果。

3.如果有遺漏的，歡迎留言。

Android----流程（如物流）進度效果前言

前言

一布局：

二java部分：

三擴充卡布局：

四實體類：

五擴充卡子項布局

總結：

補充：

繼續閱讀

思維能力必備三種流程圖1.業務流程圖2.任務流程圖3.頁面流程圖

Process on繪制er圖、擴大界面

【鬼腳七經典電商思路】淘寶賣家的競争力(2)之迎合容量

Linux運維趨勢：阿裡運維監控那些事兒

答讀者問(24)：一個大二學生有關資料結構學習的疑問及答複

NShape(開源矢量圖形編輯器) 入門（三）NShape(開源矢量圖形編輯器) 入門（三）

抖音實戰~評論數量同步更新

辦學許可證申請流程，收藏起來慢慢看！

Scratch等級考試考點流程圖

億圖圖示 EdrawMax v10.0.4 簡體中文特别版

如何使用流程中的 DataObject 并為流程設定租戶

作業系統學習筆記——輸入輸出（I/O）管理

【衛朋】IPD | 華為流程體系：如何做好流程管理？

大資料架構圖

Vue工作流渲染可拖拽編輯流程圖（附源碼）x6-vue-example特性項目示例特别說明源碼

antv x6流程圖圖繪制編輯：初始化配置（一）

Android----流程（如物流）進度效果前言

前言

一布局：

二java部分：

三擴充卡布局：

四實體類：

五擴充卡子項布局

總結 ：

補充：

繼續閱讀

總結：