自定义Android StepView 实现物流进度条

1 下载量 86 浏览量 更新于2024-09-01 收藏 99KB PDF 举报
"Android StepView 实现物流进度效果的教程" 在Android开发中,有时我们需要创建一个展示物流进度的视图,这通常涉及到自定义View的使用。本教程将详细介绍如何利用AndroidStepView来实现这样的效果。这个效果通常用于电商应用,让用户能够清晰地了解订单的各个处理阶段。 StepView是一种可定制的视图组件,它能够以步骤条的形式展示物流或任务流程的进度。在这种视图中,每个步骤通常由一个图标、文字描述和一个状态指示器组成,表示当前步骤的状态,如进行中、已完成或默认未开始。 在实现物流进度效果时,首先需要设计每个步骤的UI布局。一个基本的步骤条可能包含以下元素: 1. ImageView:显示状态图标,如箭头、勾选标记等。 2. View:作为分隔线,区分各个步骤。 3. TextView:显示步骤的描述文本。 接下来,我们自定义一个名为MyVerticalView的布局,继承自LinearLayout,并设置orientation为垂直。在这个自定义视图中,我们将根据数据动态添加这些元素。每个步骤的数据可以封装在一个名为StepModel的类中,包含描述(description)和当前状态(currentState)两个属性。 StepModel类定义了三种状态常量: - STATE_PROCESSING:表示当前步骤正在处理中。 - STATE_COMPLETED:表示步骤已完成。 - STATE_DEFAULT:表示默认状态,通常是最后一个步骤,表示流程尚未开始或已经结束。 在自定义视图MyVerticalView中,我们可以通过遍历StepModel的列表,根据每个StepModel的状态来决定添加哪种类型的视图(图标、线条和文字)。例如,如果currentState为STATE_COMPLETED,我们就添加一个表示完成状态的图标。 在实际应用中,StepView的实现可能还需要考虑以下几点: - 动态更新:当物流状态发生变化时,需要能够实时更新StepView的状态。 - 界面适配:考虑到不同设备的屏幕尺寸,需要确保StepView在不同分辨率和方向上的显示效果良好。 - 可定制性:允许开发者自定义颜色、字体、图标等样式,以适应不同的UI设计需求。 通过这种方式,我们可以创建一个既美观又实用的物流进度条,为用户提供清晰的流程信息。如果你正在开发一个需要显示物流进度的应用,那么掌握如何实现AndroidStepView将会是一个非常有价值的技能。
2019-09-24 上传
一款简单的物流状态进度展示自定义View,仅供参考学习效果图使用方法布局文件<ExpressView         android:id="@ id/expressview"         android:layout_width="match_parent"         android:layout_height="match_parent"         express:circleToTextMargin="12dp"         express:expressCircleOuterRadius="8dp"         express:expressCircleRadius="6dp"         express:expressTextMargin="12dp"         express:expressTextSize="14sp"         express:expressTextVecPadding="5dp"         express:expressTimeTextSize="10sp"         express:firstExpressCircleMarginLeft="16dp"         express:firstExpressCircleMarginTop="16dp"         express:isTimeButtonVisible="true" />控件属性介绍firstExpressCircleMarginLeft 第一个物流状态点距离父控件坐边的间距 firstExpressCircleMarginTop 第一个物流状态点距离父控件上边的间距 expressCircleRadius 物流状态点内圈半径 expressCircleOuterRadius 物流状态点外圈半径 circleToTextMargin 物流状态提示圈到文字背景的距离 expressTextMargin 文字距离背景边距 expressTextVecPadding 每个物流信息竖直方向的间距 expressTextSize 文字大小 expressTimeTextSize 时间文字大小 isTimeButtonVisible 是否显示时间和文字按钮客户端        //数据源         final List<ExpressMessageBean> list = new ArrayList<>();        ExpressMessageBean bean = new ExpressMessageBean();         bean.setFlowState(1);         bean.setFlowStateBtRight("购买流程");         bean.setCreateTime(1487259871184l);         bean.setCreateTimeFormat(TimeUtils.millis2String(1487259871184l));         bean.setOpContent("您已付款0.1200元,购买 地下城与勇士/广东区/广东1区帐号,请联系卖家卡罗特将密保手机绑定您的手机号 189****2298");         list.add(bean);         bean = new ExpressMessageBean();         bean.setFlowState(4);         bean.setFlowStateBtLeft("同意退款"); //设置左右按钮文字         bean.setFlowStateBtRight("拒绝退款");         bean.setCreateTime(1487259991260l);         bean.setCreateTimeFormat(TimeUtils.millis2String(1487259991260l));         bean.setOpContent("天空套 0.1200 1个-申请退款");         list.add(bean);         bean = new ExpressMessageBean();         bean.setFlowState(5);         bean.setCreateTime(1487259871184l);         bean.setCreateTimeFormat(TimeUtils.millis2String(1487259871184l));         bean.setOpContent("您已付款0.1200元,购买 地下城与勇士/广东区/广东1区帐号,请联系卖家卡罗特将密保手机绑定您的手机号 189****2298");         list.add(bean);         bean = new ExpressMessageBean();         bean.setFlowState(1);         bean.setFlowStateBtRight("购买流程"); //设置右按钮文字         bean.setCreateTime(1487259991260l);         bean.setCreateTimeFormat(TimeUtils.millis2String(1487259991260l));         bean.setOpContent("天空套 0.1200 1个-申请退款");         list.add(bean);        //数据源适配         ExpressViewAdapter adapter = new ExpressViewAdapter<ExpressMessageBean>(list) {            @Override             public ExpressViewData bindData(ExpressView expressView, int position, ExpressMessageBean expressMessageBean) {                ExpressViewData data = new ExpressViewData();                 data.setContent(expressMessageBean.getOpContent());                 data.setTime(expressMessageBean.getCreateTimeFormat());                 data.setLeftBtnText(expressMessageBean.getFlowStateBtLeft());                 data.setRightBtnText(expressMessageBean.getFlowStateBtRight());                return data;             }         };         expressView.setAdapter(adapter);         adapter.notifyDataChanged();        //处理点击事件         expressView.setOnExpressItemButtonClickListener(new ExpressView.OnExpressItemButtonClickListener() {            @Override             public void onExpressItemButtonClick(int position, int status) {                switch (list.get(position).getFlowState()){                    case 1:                         if(status == 1){ //购买流程                             ToastUtil.ToastBottow(TestActivity.this, list.get(position).getFlowStateBtRight());                         }                        break;                    case 4:                         if(status == 0) { //同意退款                             ToastUtil.ToastBottow(TestActivity.this, list.get(position).getFlowStateBtLeft());                         } else if(status == 1){ //拒绝退款                             ToastUtil.ToastBottow(TestActivity.this, list.get(position).getFlowStateBtRight());                         }                        break;                    default:                         break;                 }             }         });待完善1、处理滑动冲突2、处理滑动到顶部和到底部停止滑动的逻辑3、实现弹性滑动的效果博客文章介绍http://www.jianshu.com/p/2d87f62d5d27