安卓StepView事件进度条的简单实现
来源:互联网 发布:string数组倒序 编辑:程序博客网 时间:2024/06/05 03:48
需求
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); }}
注释的差不多了。。。。希望能有所帮助。
阅读全文
1 0
- 安卓StepView事件进度条的简单实现
- 安卓进度条(ProgressBar)的实现
- 进度条的简单实现
- 进度条的简单实现
- 简单进度条的实现
- 简单进度条的实现
- Android stepview 简单使用。
- 安卓 进度条 的自定义
- LINUX实现简单的进度条
- 环形进度条的简单实现
- Linux实现简单的进度条
- 实现一个简单的进度条
- shell实现简单的进度条
- 环形进度条的简单实现
- 安卓简单实现
- 基于安卓ExpandableListView的简单实现
- 安卓验证码的简单实现
- 安卓新闻客户端的简单实现
- WEP自动破解工具wesside-ng
- Spark作业执行原理
- 机器学习经典总结(转载)
- 布局
- C++继承与派生
- 安卓StepView事件进度条的简单实现
- 常用正则表达式
- 面向对象重载
- iphonex 底部遮挡返回键 解决方法
- 用深度学习keras的cnn做图像识别分类,准确率达97%
- Excel快速转PDF
- [知了堂学习笔记] SSM框架项目中遇到的问题及解决办法_01
- 内存泄漏Androi
- Swfit Array 遍历 map flatMap filter reduce