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.

这里去设置进度的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.如果有遗漏的,欢迎留言。

人已赞赏
Android文章

Android开发当控件被软件盘顶上去了后的解决方案

2020-3-10 18:14:34

Android文章

Android Service 当中使用Dialog

2020-3-10 18:36:05

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
有新消息 消息中心
搜索