安卓StepView事件进度条的简单实现

需求
1.竖向展示事件列表
2.每个事件包含详情内容时可进行展开折叠
3.默认展开最后一级别有内容的列表

既然说简单实现。那么用RecyclerView实现吧

1.item布局，这里可以把一个个item分割为以下部分

---

我们这里可以利用recyclerview默认不带分割线的特点，最左侧的进度线就分割成两条线跟一个图片。右边展开折叠只是显示隐藏布局。展开的布局比较简单就是一个文本加上一个recyclerview展示图文。

看一下布局代码吧

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:app="http://schemas.android.com/apk/res-auto"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="75dp"
        android:background="@color/white">

        <!--第三方圆角图片加载库 compile 'com.makeramen:roundedimageview:2.3.0'-->
        <com.makeramen.roundedimageview.RoundedImageView
            android:id="@+id/iv_head"
            android:layout_width="45dp"
            android:layout_height="45dp"
            android:layout_marginBottom="15dp"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="15dp"
            android:layout_marginTop="15dp"
            android:layout_toRightOf="@+id/rv_status"
            android:scaleType="fitXY"
            android:src="@drawable/ease_default_avatar"
            app:riv_border_color="@color/white"
            app:riv_border_width="2dp"
            app:riv_oval="true"/>

        <!--小队编号-->
        <TextView
            android:id="@+id/tv_number"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="15dp"
            android:layout_toLeftOf="@+id/iv_call"
            android:layout_toRightOf="@+id/iv_head"
            android:ellipsize="marquee"
            android:focusable="true"
            android:focusableInTouchMode="true"
            android:lines="1"
            android:singleLine="true"
            android:text="高山镇前王村小队1-张三"
            android:textColor="@color/content_black"
            android:textSize="12sp"/>

        <!--时间-->
        <TextView
            android:id="@+id/tv_time"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/tv_number"
            android:layout_marginTop="15dp"
            android:layout_toLeftOf="@+id/iv_call"
            android:layout_toRightOf="@+id/iv_head"
            android:text="2016-11-12 14:20"
            android:textColor="@color/gray"
            android:textSize="12sp"/>

        <!--电话图标点击拨号-->
        <ImageView
            android:id="@+id/iv_call"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_toLeftOf="@+id/ll_right"
            android:padding="15dp"
            android:src="@mipmap/icon_phone_red"/>
        <!--右侧展开折叠的视图-->
        <LinearLayout
            android:id="@+id/ll_right"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_alignParentRight="true"
            android:clickable="true"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/tv_status"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_marginRight="15dp"
                android:drawablePadding="8dp"
                android:gravity="center"
                android:text="已处理-上报"
                android:textColor="@color/content_black"
                android:textSize="12sp"/>

            <ImageView
                android:id="@+id/iv_arrow"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_marginRight="15dp"
                android:src="@mipmap/arrow_right"/>
        </LinearLayout>


        <!--左侧的进度条-->
        <RelativeLayout
            android:id="@+id/rv_status"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginLeft="8dp">

            <ImageView
                android:id="@+id/iv_status"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:src="@mipmap/icon_done"/>

            <TextView
                android:id="@+id/tv_line1"
                android:layout_width="5dp"
                android:layout_height="match_parent"
                android:layout_above="@+id/iv_status"
                android:layout_centerInParent="true"
                android:background="#ff0000"/>

            <TextView
                android:id="@+id/tv_line2"
                android:layout_width="5dp"
                android:layout_height="match_parent"
                android:layout_below="@+id/iv_status"
                android:layout_centerInParent="true"
                android:background="#ff0000"/>
        </RelativeLayout>


    </RelativeLayout>
    <!--展开状态的显示内容-->
    <LinearLayout
        android:id="@+id/ll_content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#f1f1f1"
        android:orientation="horizontal"
        android:visibility="gone">

        <TextView
            android:id="@+id/tv_line3"
            android:layout_width="5dp"
            android:layout_height="match_parent"
            android:layout_above="@+id/iv_status"
            android:layout_centerInParent="true"
            android:layout_marginLeft="13dp"
            android:background="#55ff0000"/>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignRight="@+id/iv_head"
            android:layout_below="@+id/iv_head"
            android:layout_marginTop="8dp"
            android:orientation="vertical">

            <TextView
                android:id="@+id/tv_content"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:paddingLeft="69dp"
                android:text="处理内容\n这是啥啊坎坎坷坷"/>

            <android.support.v7.widget.RecyclerView
                android:id="@+id/rv"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:paddingLeft="54dp">
            </android.support.v7.widget.RecyclerView>


        </LinearLayout>
    </LinearLayout>


</LinearLayout>

布局OK那么接下来就是实体类的设计啦。这个得根据自己的业务处理咯

public static class RDataBean extends BaseEntity {
        /**
         * im_feedback_dispose_id : 1
         * im_feedback_id : 3
         * user_id : 27233218
         * group_sys_name : 小队1
         * duty_name :
         * dispose_content : blend咯lol
         * imgs : ["imgs/1511775047258.png"]
         * submit_status : 0
         * inittime : 1511775047
         * dispose_status : 1
         * user_name : 李基旺
         */

        private String im_feedback_dispose_id;
        private String im_feedback_id;
        private String user_id;
        private String group_sys_name;
        private String duty_name;
        private String dispose_content;
        private String submit_status;
        private String inittime;
        private String dispose_status;
        private String user_name;
        private boolean expand = false;//判断是否展开
        private String telphone;//: "",
        private String user_sf;//: "",
        private String user_head_img;//: ""
        private String nameDuty;

        public String getNameDuty() {
            if(!TextUtils.isEmpty(duty_name)&&!TextUtils.isEmpty(user_name)){
                return "--"+user_name + "(" + duty_name + ")";
            }else {
                if(TextUtils.isEmpty(user_name)){
                    return "";
                }else {
                    return "--"+user_name;
                }
            }

        }

        public void setNameDuty(String nameDuty) {
            this.nameDuty = nameDuty;
        }

        public String getTelphone() {
            return telphone;
        }

        public void setTelphone(String telphone) {
            this.telphone = telphone;
        }

        public String getUser_sf() {
            return user_sf;
        }

        public void setUser_sf(String user_sf) {
            this.user_sf = user_sf;
        }

        public String getUser_head_img() {
            return user_head_img;
        }

        public void setUser_head_img(String user_head_img) {
            this.user_head_img = user_head_img;
        }

        public boolean isExpand() {
            return expand;
        }

        public void setExpand(boolean expand) {
            this.expand = expand;
        }

        private List<String> imgs;

        public String getIm_feedback_dispose_id() {
            return im_feedback_dispose_id;
        }

        public void setIm_feedback_dispose_id(String im_feedback_dispose_id) {
            this.im_feedback_dispose_id = im_feedback_dispose_id;
        }

        public String getIm_feedback_id() {
            return im_feedback_id;
        }

        public void setIm_feedback_id(String im_feedback_id) {
            this.im_feedback_id = im_feedback_id;
        }

        public String getUser_id() {
            return user_id;
        }

        public void setUser_id(String user_id) {
            this.user_id = user_id;
        }

        public String getGroup_sys_name() {
            return group_sys_name;
        }

        public void setGroup_sys_name(String group_sys_name) {
            this.group_sys_name = group_sys_name;
        }

        public String getDuty_name() {
            return duty_name;
        }

        public void setDuty_name(String duty_name) {
            this.duty_name = duty_name;
        }

        public String getDispose_content() {
            return dispose_content;
        }

        public void setDispose_content(String dispose_content) {
            this.dispose_content = dispose_content;
        }

        public String getSubmit_status() {
            return submit_status;
        }

        public void setSubmit_status(String submit_status) {
            this.submit_status = submit_status;
        }

        public String getInittime() {
            return inittime;
        }

        public void setInittime(String inittime) {
            this.inittime = inittime;
        }

        public String getDispose_status() {
            return dispose_status;
        }

        public void setDispose_status(String dispose_status) {
            this.dispose_status = dispose_status;
        }

        public String getUser_name() {
            return user_name;
        }

        public void setUser_name(String user_name) {
            this.user_name = user_name;
        }

        public List<String> getImgs() {
            return imgs;
        }

        public void setImgs(List<String> imgs) {
            this.imgs = imgs;
        }
    }

给个思路吧，每个item都有三条进度线，我们在适配器中主要的工作就是判断这个线的颜色跟是否隐藏。然后就是点击事件，点击事件的话这里用了第三的开源库适配器写法相对简单。CymChad:BaseRecyclerViewAdapterHelper

compile 'com.github.CymChad:BaseRecyclerViewAdapterHelper:2.9.17'

直接看代码：

import android.content.Intent;
import android.graphics.Color;
import android.support.annotation.LayoutRes;
import android.support.annotation.Nullable;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.text.TextUtils;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;

import com.bumptech.glide.Glide;
import com.chad.library.adapter.base.BaseQuickAdapter;
import com.chad.library.adapter.base.BaseViewHolder;
import com.fjrcloud.fuqing.R;
import com.fjrcloud.fuqing.model.local.ChatAskList;
import com.fjrcloud.fuqing.ui.activity.PicViewerActivity;
import com.fjrcloud.fuqing.util.Constants;
import com.fjrcloud.fuqing.util.DateUtil;

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

/**
 * Created by Liberation on 2017/11/13.
 */

public class ChatTaskAskDetailAdapter extends BaseQuickAdapter<ChatAskList.RDataBean, BaseViewHolder> {
    public ChatTaskAskDetailAdapter(@LayoutRes int layoutResId, @Nullable List<ChatAskList.RDataBean> data) {
        super(layoutResId, data);
    }

    @Override
    protected void convert(BaseViewHolder helper, final ChatAskList.RDataBean item) {
        /*获取到item的子布局*/
        ImageView mHead = helper.getView(R.id.iv_head);//用户头像。这里用RoundedImageView加Glide加载
        LinearLayout mLl = helper.getView(R.id.ll_content);//展开的内容，需要对他进行展开折叠处理
        ImageView mIvStatus = helper.getView(R.id.iv_status);//最左侧进度条的状态实心或者空心
        ImageView mIvExpand = helper.getView(R.id.iv_arrow);//最右侧的展开缩合状态，这个要根据是否有内容进行显示或者隐藏
        TextView mTvNumber = helper.getView(R.id.tv_number);//小队编号

        //设置当前条目的展开缩合状态
        if (item.isExpand()) {
            mIvExpand.setImageResource(R.mipmap.arrow_down);
            mLl.setVisibility(View.VISIBLE);
        } else {
            mLl.setVisibility(View.GONE);
            mIvExpand.setImageResource(R.mipmap.arrow_right);
        }
        //根据当前条目录的内容是否为空判断是否显示展开按钮
        mIvExpand.setVisibility(TextUtils.isEmpty(item.getDispose_content()) ? View.INVISIBLE : View.VISIBLE);

        //列表的第一条不显示第一条线更美观些
        helper.getView(R.id.tv_line1).setVisibility(helper.getAdapterPosition() == 1 ? View.GONE : View.VISIBLE);

        //当列表数据只有一条并且没有内容 第二条线也隐藏
        helper.getView(R.id.tv_line2).setVisibility(getData().size() == 1 && !item.isExpand() ? View.GONE : View.VISIBLE);

        //默认显示第一条的电话按钮
        helper.getView(R.id.iv_call).setVisibility((helper.getAdapterPosition() == 1 ? View.VISIBLE : View.GONE));

        //最后一个item的只有上半部分的线为红色
        if (helper.getAdapterPosition() == mData.size()) {
            helper.getView(R.id.tv_line1).setBackgroundColor(Color.parseColor("#ff0000"));
            helper.getView(R.id.tv_line2).setBackgroundColor(Color.parseColor("#55ff0000"));
            helper.getView(R.id.tv_line3).setBackgroundColor(Color.parseColor("#55ff0000"));
        } else {
            helper.getView(R.id.tv_line1).setBackgroundColor(Color.parseColor("#ff0000"));
            helper.getView(R.id.tv_line2).setBackgroundColor(Color.parseColor("#ff0000"));
            helper.getView(R.id.tv_line3).setBackgroundColor(Color.parseColor("#ff0000"));
        }

        /*任务结束状态所有线的颜色都变成红色*/
        if (item.getDispose_status().equals("2")) {
            helper.getView(R.id.tv_line1).setBackgroundColor(Color.parseColor("#ff0000"));
            helper.getView(R.id.tv_line2).setBackgroundColor(Color.parseColor("#ff0000"));
            helper.getView(R.id.tv_line3).setBackgroundColor(Color.parseColor("#ff0000"));
        }

        //设置左侧空心实心状态
        mIvStatus.setImageResource(TextUtils.isEmpty(item.getDispose_content()) ? R.mipmap.icon_none : R.mipmap.icon_done);

        //设置展开内容
        helper.setText(R.id.tv_content, item.getDispose_content() + "");
        ImageAdapter imageAdapter = new ImageAdapter(R.layout.item_image, item.getImgs());
        final RecyclerView recyclerView = helper.getView(R.id.rv);
        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(recyclerView.getContext());
        linearLayoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
        recyclerView.setLayoutManager(linearLayoutManager);
        recyclerView.setAdapter(imageAdapter);
        imageAdapter.setOnItemClickListener(new OnItemClickListener() {
            @Override
            public void onItemClick(BaseQuickAdapter adapter, View view, int position) {
                     /*跳转到图片查看页面*/
                ArrayList<String> imgs = new ArrayList<String>();
                if (item.getImgs().size() > 0) {
                    Intent intent = new Intent(recyclerView.getContext(), PicViewerActivity.class);
                    for (int i = 0; i < item.getImgs().size(); i++) {
                        imgs.add(item.getImgs().get(i));
                    }
                    intent.putStringArrayListExtra("imgs", imgs)
                            .putExtra("time", DateUtil.getDateToString4(Long.valueOf(item.getInittime() + "000")));
                    recyclerView.getContext().startActivity(intent);
                } else {
                    Toast.makeText(recyclerView.getContext(), "暂无图片可浏览", Toast.LENGTH_SHORT).show();
                }
            }
        });


        /*这里文字过长做了跑马灯滚动展示效果*/
        helper.setText(R.id.tv_time, DateUtil.getDateToString4(Long.valueOf(item.getInittime() + "000")));
        mTvNumber.setText(item.getGroup_sys_name() + item.getNameDuty());
        mTvNumber.setEllipsize(TextUtils.TruncateAt.MARQUEE);
        mTvNumber.setSingleLine(true);
        mTvNumber.setSelected(true);
        mTvNumber.setFocusable(true);
        mTvNumber.setFocusableInTouchMode(true);
        mTvNumber.setMarqueeRepeatLimit(-1);

        //Glide加载用户头像
        Glide.with(mHead.getContext()).load(Constants.SERVICE_HOST_PIC + item.getUser_head_img()).error(R.mipmap.app_logo_fq).into(mHead);


        //下面根据你实际的业务显示文字状态
        String notice = "处理中";//回复中的提示文本
        if (!TextUtils.isEmpty(item.getDispose_content())) notice = "已处理";
        if (item.getUser_id().equals(Constants.USER_ID)) {
            notice = TextUtils.isEmpty(item.getDispose_content()) ? "处理中" : "已处理";
        }
        if (item.getDispose_status().equals("2")) notice = "已处理";
        if (!item.getSubmit_status().equals("0")) notice = "已处理-上报";
        helper.setText(R.id.tv_status, notice);
        if (!TextUtils.isEmpty(item.getDispose_content())) {
            helper.addOnClickListener(R.id.ll_right);
        }
        helper.addOnClickListener(R.id.iv_call);


    }
}

注释的差不多了。。。。希望能有所帮助。