Android中RecyclerView实现多级折叠列表效果(TreeRecyclerView)
2017-05-11 10:36
1176 查看
前言
首先不得不吐槽一下产品，尼玛为啥要搞这样的功能....搞个两级的不就好了嘛...自带控件，多好。三级,四级,听说还有六级的....这样丧心病狂的设计，后台也不好给数据吧。
先看看效果:
两级的效果:
三级的效果:
全部展开的效果(我只写了五级)
说说为什么写这货吧:
公司产品提出三级这个需求后,我就在网上找啊找.
找的第一个,发现实现其实是ExpandListview嵌套.
找的第二个,ExpandRecyclview,然后就用呗,发现三级展开很卡,看源码,
发现是RecyclerView套RecyclerView
就没有不嵌套的么.....
然后找到hongyang的那个博客,写个试试吧.
说说思路:
1.Treeadapter应该只需要关心List<TreeAdapterItem> datas 的内容
2.把每个item看成独立的个体，布局样式，每行所占比,bindViewHolder都由自己的来决定。
3.每一个item应该只关心自己的数据和自己的下一级的数据，不会去关心上上级，下下级
4.展开的实现,item把子数据集拿出来,然后添加到List<TreeAdapterItem> datas，变成与自己同级，因为每次展开只会展开一级数据。
5.折叠递归遍历所有子数据,递归拿到自己所有的子数据集（可以理解因为一个文件夹下所有的文件，包括子文件夹下的所有），然后从List<TreeAdapterItem> datas删除这些数据。
见代码:
/**
* Created by Jlanglang on 2016/12/7.
*
*/
public abstract class TreeAdapterItem<D> {
/**
* 当前item的数据
*/
protected D data;
/**
* 持有的子数据
*/
protected List<TreeAdapterItem> childs;
/**
* 是否展开
*/
protected boolean isExpand;
/**
* 布局资源id
*/
protected int layoutId;
/**
* 在每行中所占的比例
*/
protected int spanSize;
・・・・
get/set方法省略。。。。
・・・・
public TreeAdapterItem(D data) {
this.data = data;
childs = initChildsList(data);
layoutId = initLayoutId();
spanSize = initSpansize();
}
/**
* 展开
*/
public void onExpand() {
isExpand = true;
}
/**
* 折叠
*/
public void onCollapse() {
isExpand = false;
}
/**
* 递归遍历所有的子数据，包括子数据的子数据
*
* @return List<TreeAdapterItem>
*/
public List<TreeAdapterItem> getAllChilds() {
ArrayList<TreeAdapterItem> treeAdapterItems = new ArrayList<>();
for (int i = 0; i < childs.size(); i++) {
TreeAdapterItem treeAdapterItem = childs.get(i);
treeAdapterItems.add(treeAdapterItem);
if (treeAdapterItem.isParent()) {
List list = treeAdapterItem.getAllChilds();
if (list != null && list.size() > 0) {
treeAdapterItems.addAll(list);
}
}
}
return treeAdapterItems;
}
/**
* 是否持有子数据
*
* @return
*/
public boolean isParent() {
return childs != null && childs.size() > 0;
}
/**
* item在每行中的spansize
* 默认为0,如果为0则占满一行
* 不建议连续的两级,都设置该数值
*
* @return 所占值
*/
public int initSpansize() {
return spanSize;
}
/**
* 初始化子数据
*
* @param data
* @return
*/
protected abstract List<TreeAdapterItem> initChildsList(D data);
/**
* 该条目的布局id
*
* @return 布局id
*/
protected abstract int initLayoutId();
/**
* 抽象holder的绑定
*
* @param holder ViewHolder
*/
public abstract void onBindViewHolder(ViewHolder holder);
}
再来看看Adapter
public class TreeRecyclerViewAdapter<T extends TreeAdapterItem> extends RecyclerView.Adapter<ViewHolder> {
protected Context mContext;
/**
* 存储所有可见的Node
*/
protected List<T> mDatas;//处理后的展示数据
/**
* 点击item的回调接口
*/
private OnTreeItemClickListener onTreeItemClickListener;
public void setOnTreeItemClickListener(OnTreeItemClickListener onTreeItemClickListener) {
this.onTreeItemClickListener = onTreeItemClickListener;
}
/**
*
* @param context 上下文
* @param datas 条目数据
*/
public TreeRecyclerViewAdapter(Context context, List<T> datas) {
mContext = context;
mDatas = datas;
}
/**
* 相应RecyclerView的点击事件 展开或关闭
* 重要
* @param position 触发的条目
*/
public void expandOrCollapse(int position) {
//获取当前点击的条目
TreeAdapterItem treeAdapterItem = mDatas.get(position);
//判断点击的条目有没有下一级
if (!treeAdapterItem.isParent()) {
return;
}
//判断是否展开
boolean expand = treeAdapterItem.isExpand();
if (expand) {
//获取所有的子数据.
List allChilds = treeAdapterItem.getAllChilds();
mDatas.removeAll(allChilds);
//告诉item,折叠
treeAdapterItem.onCollapse();
} else {
//获取下一级的数据
mDatas.addAll(position + 1, treeAdapterItem.getChilds());
//告诉item,展开
treeAdapterItem.onExpand();
}
notifyDataSetChanged();
}
//adapter绑定Recycleview后.
@Override
public void onAttachedToRecyclerView(RecyclerView recyclerView) {
super.onAttachedToRecyclerView(recyclerView);
//拿到布局管理器
RecyclerView.LayoutManager layoutManager = recyclerView.getLayoutManager();
//判断是否是GridLayoutManager,因为GridLayoutManager才能设置每个条目的行占比.
if (layoutManager instanceof GridLayoutManager) {
final GridLayoutManager gridLayoutManager = (GridLayoutManager) layoutManager;
gridLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
@Override
public int getSpanSize(int position) {
TreeAdapterItem treeAdapterItem = mDatas.get(position);
if (treeAdapterItem.getSpanSize() == 0) {
//如果是默认的大小,则占一行
return gridLayoutManager.getSpanCount();
}
//根据item的SpanSize来决定所占大小
return treeAdapterItem.getSpanSize();
}
});
}
}
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
//这里,直接通过item设置的id来创建Viewholder
return ViewHolder.createViewHolder(mContext, parent, viewType);
}
@Override
public void onBindViewHolder(ViewHolder holder, final int position) {
final TreeAdapterItem treeAdapterItem = mDatas.get(position);
holder.itemView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//折叠或展开
expandOrCollapse(position);
if (onTreeItemClickListener != null) {
//点击监听的回调.一般不是最后一级,不需要处理吧.
onTreeItemClickListener.onClick(treeAdapterItem, position);
}
}
});
treeAdapterItem.onBindViewHolder(holder);
}
@Override
public int getItemViewType(int position) {
//返回item的layoutId
return mDatas.get(position).getLayoutId();
}
@Override
public int getItemCount() {
return mDatas == null ? 0 : mDatas.size();
}
public interface OnTreeItemClickListener {
void onClick(TreeAdapterItem node, int position);
}
}
具体使用：
/**
* Created by baozi on 2016/12/8.
*/
public class OneItem extends TreeAdapterItem<CityBean> {
public OneItem(CityBean data) {
super(data);
}
//这里数据用的是,一个三级城市列表数据。
@Override
protected List<TreeAdapterItem> initChildsList(CityBean data) {//这个CityBean 是一级数据
ArrayList<TreeAdapterItem> oneChilds= new ArrayList<>();
List<CityBean.CitysBean> citys = data.getCitys();
if (citys == null) {//如果没有二级数据就直接返回.
return null;
}
for (int i = 0; i < citys.size(); i++) {//遍历二级数据.
TwoItem twoItem = new TwoItem(citys.get(i));//创建二级条目。
oneChilds.add(twoItem);
}
return oneChilds;
}
@Override
protected int initLayoutId() {//当前级数的布局
return R.layout.itme_one;
}
@Override
public void onExpand() {
super.onExpand();
}
@Override
public void onBindViewHolder(ViewHolder holder) {
//设置当前级数的viewhodler.
//如果需要某个view展开关闭时的动画，可以在这里保存view到成员变量。
//然后在onExpand()方法里面操作。
holder.setText(R.id.tv_content, data.getProvinceName());
}
}
如果是同一级想要设置不同的布局,接着看
/**
* Created by baozi on 2016/12/8.
*/
public class FourItem extends TreeAdapterItem<String> {
....
@Override
protected List<TreeAdapterItem> initChildsList(String data) {
ArrayList<TreeAdapterItem> treeAdapterItems = new ArrayList<>();
for (int i = 0; i < 10; i++) {
FiveItem threeItem = new FiveItem("我是五级");
//在遍历的时候,通过条件,重设孩子的布局id.和所占比
if (i % 4 == 0) {//偷个懒,不多写布局了.
threeItem.setLayoutId(R.layout.itme_one);
threeItem.setSpanSize(0);
} else if (i % 3 == 0) {
threeItem.setLayoutId(R.layout.item_two);
threeItem.setSpanSize(2);
}
treeAdapterItems.add(threeItem);
}
return treeAdapterItems;
}
....
}
/**
* Created by baozi on 2016/12/8.
*/
public class FiveItem extends TreeAdapterItem<String> {
.......
//设置默认的布局
@Override
protected int initLayoutId() {
return R.layout.item_five;
}
//设置默认的占比
@Override
public int initSpansize() {
return 2;
}
//根据layoutId来判断viewhodler并设置
@Override
public void onBindViewHolder(ViewHolder holder) {
if (layoutId == R.layout.itme_one) {
holder.setText(R.id.tv_content, "我是第一种五级");
} else if (layoutId == R.layout.item_five) {
holder.setText(R.id.tv_content, "我是第二种五级");
}else if (layoutId == R.layout.item_two) {
holder.setText(R.id.tv_content, "我是第三种五级");
}
}
}
更新及详解:
更深入的介绍可以查看这篇文章：https://www.jb51.nethttps://www.geek-share.com/detail/2705471577.html
下面附上Demo下载地址：
github传送门:TreeRecyclerView
本地下载：http://xiazai.jb51.net/201705/yuanma/TreeRecyclerView(jb51.net).rar
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
您可能感兴趣的文章:
- Android TextView实现多文本折叠、展开效果
- Android中RecyclerView实现多级折叠列表效果（二）
- android给RecyclerView加上折叠的效果示例
- Android折叠式Toolbar使用完全解析（CollapsingToolbarLayout）
- Android TextView多文本折叠展开效果
- Android UI实现多行文本折叠展开效果
- Android中FoldingLayout折叠布局的用法及实战全攻略
- Android RichText 让Textview轻松的支持富文本（图像ImageSpan、点击效果等等类似QQ微信聊天）
- Android控件系列之TextView使用介绍
- Android TextView仿微信可折叠效果
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Android中RecyclerView实现多级折叠列表效果（二）
- Android RecyclerView (二)初学，实现GridView列表和瀑布流效果。
- Android单个RecyclerView实现列表嵌套的效果
- Android RecyclerView (一)初学，实现ListView列表效果。
- Android 使用RecyclerView实现列表item重叠效果（使用addItemDecoration方法）
- Android RecyclerView实现数据列表展示效果
- Android开发之自定义view实现通讯录列表A~Z字母提示效果【附demo源码下载】
- Android RecyclerView 复杂列表的实现
- Android 自定义RecyclerView 实现真正的Gallery效果
- Android 自定义RecyclerView 实现真正的Gallery效果
- Android 自定义RecyclerView 实现真正的Gallery效果
- Android通讯录RecyclerView实现--带挤压效果
- Android 自定义RecyclerView （替代ListView的最新组件）实现真正的Gallery效果
- Android 自定义RecyclerView 实现真正的Gallery效果
- Android中使用RecyclerView + SnapHelper实现类似ViewPager效果
- Android 自定义RecyclerView 实现真正的Gallery效果
- Android RecyclerView 实现瀑布流效果
- Android 自定义RecyclerView 实现真正的Gallery效果
- Android-使用RecyclerView的ItemDecoration 实现炫酷的 吸顶效果
- Android 自定义RecyclerView 实现真正的Gallery效果