android 仿快递步骤_Android开发-类似物流快递进度效果

释放双眼，带上耳机，听听看~！

老规矩先看图：

前言

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

一布局：

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@color/white">

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" />

布局很简单，常规的 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 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 {

public void upData(List 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 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 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 getData() {

return data;

}

public void setData(List 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;

}

}

}

五适配器子项布局

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">

android:orientation="horizontal"

android:layout_width="match_parent"

android:layout_height="wrap_content"

tools:ignore="UselessParent">

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">

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" />

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" />

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">

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">

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" />

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" />

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" />

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" />

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" />

子项布局的，一些图片没有提供，大家可以自行替换。黄色的原点可以放个小图片。里面的ds间距就正常给多少多少dp即可

最后就大功告成了！

总结 ：

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

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

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

补充：

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

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

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