安卓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);}@Overrideprotected 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() {@Overridepublic 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);}
}

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

安卓StepView事件进度条的简单实现相关推荐

EasyUI中进度条的简单使用
场景效果属性名称类型描述默认值 width string 设置进度条(progressbar)的宽度. auto height number 组件的高度.该属性自版本 1.3.2 起可用. ...
Android loading进度条使用简单总结
在这里,总结一下loading进度条的使用简单总结一下. 一.说起进度条,必须说说条形进度条,经常都会使用到嘛,特别是下载文件进度等等,还有像腾讯QQ安装进度条一样,有个进度总给人良好的用户体验. 先 ...
input加progress组合写进度条的简单音乐播放器实现
主要解释一下实现图中的音量进度条效果. 仅供大家参考,勿喷. 查阅了很多资料看了挺多人的代码,但是ajax对于我这个新手小白来说,可能还难以理解,因此分享一个本小白的方法. 本人编程小白,分享实现的方 ...
android 斑马线进度条,jQuery简单斑马线样式loading进度条动画特效
这是一款非常简单实用的jQuery斑马线样式loading进度条动画特效.该进度条特效通过简单的jQuery代码就完成了可控制的进度条动画特效.斑马线效果使用CSS3来完成,对不支持CSS3的浏览器可 ...
python实现简单进度条_简单实现python进度条脚本
最近需要用Python写一个小脚本,用到了一些小知识,赶紧抽空记录一下.不深但是常用. 两个进度条示例,拷贝就能运行: # coding=utf-8 import sys import time # ...
Linux环境下实现简单进度条
进度条是我们生活中可见的,但是大家却从来不知道其怎么实现的,下面就是linux环境下的进度条的简单实现这里应该提一下缓冲区的概念: 计算机中的缓冲区: 缓冲器为暂时置放输出或输入资料的内存. 缓冲器 ...
Android小项目之--前台界面与用户交互的对接进度条与拖动条（附源码）
都知道水果公司(苹果)是己尊重用户体验著称的公司,其设计的产品人性化十足,不得不令后来者赞叹,竞相模仿.iphone的成功就是其典型的案例,做为其移动系统的死对头 Google 想要在市场上分得一杯羹 ...
进度条线程怎么用java,多线程进度条 java
场景:java设计形式(2)-观察者模式Swing 多线程事件处理进度条和Observer的一个具体应用 java设计模式(2)--观察者模式Swing 多线程事件处理进度条和Observer的一个具 ...
html——自定义进度条、bootstrap框架及layu框架进度条的使用及对比
先展示一下效果: 动态效果: 1. 第一个是自己写的一个进度条,纯js写的,样式不太好看,相关的函数进行了js的封装,且适配性不太好,不推荐,只是作为个人的尝试. 2. 第二个是bootstrap的进 ...

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

安卓StepView事件进度条的简单实现相关推荐

最新文章

热门文章