Android----流程（如物流）进度效果

最新推荐文章于 2024-05-16 07:15:00 发布

土狗的想法

最新推荐文章于 2024-05-16 07:15:00 发布

阅读量2.1k

点赞数 4

文章标签：流程图进度趋势

本文链接：https://blog.csdn.net/qq_35874340/article/details/96117255

版权

老规矩先看图：

前言

写这篇之前，也考虑了好几种方案。网上有采用自定义控件的，有引用三方依赖的。但是考虑到后期更改样式问题，还是自己写吧。后期还可以补全动画效果，简单粗暴。

一布局：

<?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.

这里去设置进度的1234

根据状态去显示颜色灰暗

根据当前位置，去比对，使最后一个竖线隐藏。

四实体类：

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即可

最后就大功告成了！

总结：

我个人是非常不建议这部分的逻辑用画笔去画。

缺点一是增加了开发者的学习成本，很多开发者更加喜欢简单粗暴好用的逻辑。

缺点二是无法灵活，无法轻松的按产品及ui的需求去改变自己的样式。

补充：

1.样式上。线条的长度可以随着右边文本内容的增大而变长。

2.右侧的内容，外层的图片是.9图片，可以自动拉伸不变形，配合左边达到很自然的效果。

3.如果有遗漏的，欢迎留言。

土狗的想法

关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
25
评论
Android----流程（如物流）进度效果

老规矩先看图：前言写这篇之前，也考虑了好几种方案。网上有采用自定义控件的，有引用三方依赖的。但是考虑到后期更改样式问题，还是自己写吧。后期还可以补全动画效果，简单粗暴。一布局：<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://sc...
复制链接

扫一扫