简单介绍

android是不提供树形控件的，假设须要使用树形控件。我们应该怎么做呢？

先看效果



上图是一个明显的树形结构

实现原理

在逻辑上，它们是包括关系。数据结构上是多叉树，这是毋庸置疑的。

可是，显示的时候。我们有必要嵌套ListView或RecyclerView吗？当然没有必要！

  • 每一而Item。在显示的时候，都是平级的，仅仅是它们marginLeft不同而已。
  • 更新marginLeft来体现它们的层级关系。

    marginLeft的值与item在逻辑上的深度有线性关系。

  • 展开一个Item的时候，是动态的加入一系列的item。
  • 收起一个Item的时候。我们是删除一系列的item.

好了。原理已经说明确了。那就看看源代码怎么写吧。

注：

  • 我们以android的文件系统的树形结构为例
  • 为了动画的流畅性，我们使用RecyclerView，注意，ListView在加入和删除item时。是直接突变的。

Code

  • 数据模型ItemData

  2. public class ItemData implements Comparable<ItemData> {
  4.     public static final int ITEM_TYPE_PARENT = 0;
  5.     public static final int ITEM_TYPE_CHILD = 1;
  7.     private String uuid;
  9.     private int type;// 显示类型
  10.     private String text;
  11.     private String path;// 路径
  12.     private int treeDepth = 0;// 路径的深度
  14.     private List<ItemData> children;
  16.     private boolean expand;// 是否展开
  18.     ...
  20. }
  • 父节点相应的ViewHolder

  2. /**
  3.  * @Author Zheng Haibo
  4.  * @PersonalWebsite http://www.mobctrl.net
  5.  * @Description
  6.  */
  7. public class ParentViewHolder extends BaseViewHolder {
  9.     public ImageView image;
  10.     public TextView text;
  11.     public ImageView expand;
  12.     public TextView count;
  13.     public RelativeLayout relativeLayout;
  14.     private int itemMargin;
  16.     public ParentViewHolder(View itemView) {
  17.         super(itemView);
  18.         image = (ImageView) itemView.findViewById(R.id.image);
  19.         text = (TextView) itemView.findViewById(R.id.text);
  20.         expand = (ImageView) itemView.findViewById(R.id.expand);
  21.         count = (TextView) itemView.findViewById(R.id.count);
  22.         relativeLayout = (RelativeLayout) itemView.findViewById(R.id.container);
  23.         itemMargin = itemView.getContext().getResources()
  24.                 .getDimensionPixelSize(R.dimen.item_margin);
  25.     }
  27.     public void bindView(final ItemData itemData, final int position,
  28.             final ItemDataClickListener imageClickListener) {
  29.         RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) expand
  30.                 .getLayoutParams();
  31.         params.leftMargin = itemMargin * itemData.getTreeDepth();
  32.         expand.setLayoutParams(params);
  33.         text.setText(itemData.getText());
  34.         if (itemData.isExpand()) {
  35.             expand.setRotation(45);
  36.             List<ItemData> children = itemData.getChildren();
  37.             if (children != null) {
  38.                 count.setText(String.format("(%s)", itemData.getChildren()
  39.                         .size()));
  40.             }
  41.             count.setVisibility(View.VISIBLE);
  42.         } else {
  43.             expand.setRotation(0);
  44.             count.setVisibility(View.GONE);
  45.         }
  46.         relativeLayout.setOnClickListener(new OnClickListener() {
  48.             @Override
  49.             public void onClick(View v) {
  50.                 if (imageClickListener != null) {
  51.                     if (itemData.isExpand()) {
  52.                         imageClickListener.onHideChildren(itemData);
  53.                         itemData.setExpand(false);
  54.                         rotationExpandIcon(45, 0);
  55.                         count.setVisibility(View.GONE);
  56.                     } else {
  57.                         imageClickListener.onExpandChildren(itemData);
  58.                         itemData.setExpand(true);
  59.                         rotationExpandIcon(0, 45);
  60.                         List<ItemData> children = itemData.getChildren();
  61.                         if (children != null) {
  62.                             count.setText(String.format("(%s)", itemData
  63.                                     .getChildren().size()));
  64.                         }
  65.                         count.setVisibility(View.VISIBLE);
  66.                     }
  67.                 }
  69.             }
  70.         });
  71.         image.setOnLongClickListener(new OnLongClickListener() {
  73.             @Override
  74.             public boolean onLongClick(View view) {
  75.                 Toast.makeText(view.getContext(), "longclick",
  76.                         Toast.LENGTH_SHORT).show();
  77.                 return false;
  78.             }
  79.         });
  80.     }
  82.     @TargetApi(Build.VERSION_CODES.HONEYCOMB)
  83.     private void rotationExpandIcon(float from, float to) {
  84.         if (android.os.Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
  85.             ValueAnimator valueAnimator = ValueAnimator.ofFloat(from, to);
  86.             valueAnimator.setDuration(150);
  87.             valueAnimator.setInterpolator(new DecelerateInterpolator());
  88.             valueAnimator.addUpdateListener(new AnimatorUpdateListener() {
  90.                 @Override
  91.                 public void onAnimationUpdate(ValueAnimator valueAnimator) {
  92.                     expand.setRotation((Float) valueAnimator.getAnimatedValue());
  93.                 }
  94.             });
  95.             valueAnimator.start();
  96.         }
  97.     }
  98. }
  • 子节点相应的ViewHolder

  2. /**
  3.  * @Author Zheng Haibo
  4.  * @PersonalWebsite http://www.mobctrl.net
  5.  * @Description
  6.  */
  7. public class ChildViewHolder extends BaseViewHolder {
  9.     public TextView text;
  10.     public ImageView image;
  11.     public RelativeLayout relativeLayout;
  12.     private int itemMargin;
  13.     private int offsetMargin;
  15.     public ChildViewHolder(View itemView) {
  16.         super(itemView);
  17.         text = (TextView) itemView.findViewById(R.id.text);
  18.         image = (ImageView) itemView.findViewById(R.id.image);
  19.         relativeLayout = (RelativeLayout) itemView.findViewById(R.id.container);
  20.         itemMargin = itemView.getContext().getResources()
  21.                 .getDimensionPixelSize(R.dimen.item_margin);
  22.         offsetMargin = itemView.getContext().getResources()
  23.                 .getDimensionPixelSize(R.dimen.expand_size);
  24.     }
  26.     public void bindView(final ItemData itemData, int position) {
  27.         RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) image
  28.                 .getLayoutParams();
  29.         params.leftMargin = itemMargin * itemData.getTreeDepth() + offsetMargin;
  30.         image.setLayoutParams(params);
  31.         text.setText(itemData.getText());
  32.         relativeLayout.setOnClickListener(new OnClickListener() {
  34.             @Override
  35.             public void onClick(View view) {
  36.                 //TODO
  37.             }
  38.         });
  39.     }
  41. }
  • RecyclerView的Adapter

该部分处理item点击之后的展开和收起，实质上就是将其全部的Children节点动态的加入或删除。加入的位置就是item当前的位置。实现代码在onExpandChildren和onHideChildren方法中。


  2. /**
  3.  * @Author Zheng Haibo
  4.  * @PersonalWebsite http://www.mobctrl.net
  5.  * @Description
  6.  */
  7. public class RecyclerAdapter extends RecyclerView.Adapter<BaseViewHolder> {
  9.     private Context mContext;
  10.     private List<ItemData> mDataSet;
  11.     private OnScrollToListener onScrollToListener;
  13.     public void setOnScrollToListener(OnScrollToListener onScrollToListener) {
  14.         this.onScrollToListener = onScrollToListener;
  15.     }
  17.     public RecyclerAdapter(Context context) {
  18.         mContext = context;
  19.         mDataSet = new ArrayList<ItemData>();
  20.     }
  22.     @Override
  23.     public BaseViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
  24.         View view = null;
  25.         switch (viewType) {
  26.         case ItemData.ITEM_TYPE_PARENT:
  27.             view = LayoutInflater.from(mContext).inflate(
  28.                     R.layout.item_recycler_parent, parent, false);
  29.             return new ParentViewHolder(view);
  30.         case ItemData.ITEM_TYPE_CHILD:
  31.             view = LayoutInflater.from(mContext).inflate(
  32.                     R.layout.item_recycler_child, parent, false);
  33.             return new ChildViewHolder(view);
  34.         default:
  35.             view = LayoutInflater.from(mContext).inflate(
  36.                     R.layout.item_recycler_parent, parent, false);
  37.             return new ChildViewHolder(view);
  38.         }
  39.     }
  41.     @Override
  42.     public void onBindViewHolder(BaseViewHolder holder, int position) {
  43.         switch (getItemViewType(position)) {
  44.         case ItemData.ITEM_TYPE_PARENT:
  45.             ParentViewHolder imageViewHolder = (ParentViewHolder) holder;
  46.             imageViewHolder.bindView(mDataSet.get(position), position,
  47.                     imageClickListener);
  48.             break;
  49.         case ItemData.ITEM_TYPE_CHILD:
  50.             ChildViewHolder textViewHolder = (ChildViewHolder) holder;
  51.             textViewHolder.bindView(mDataSet.get(position), position);
  52.             break;
  53.         default:
  54.             break;
  55.         }
  56.     }
  58.     private ItemDataClickListener imageClickListener = new ItemDataClickListener() {
  60.         @Override
  61.         public void onExpandChildren(ItemData itemData) {
  62.             int position = getCurrentPosition(itemData.getUuid());
  63.             List<ItemData> children = getChildrenByPath(itemData.getPath(),
  64.                     itemData.getTreeDepth());
  65.             if (children == null) {
  66.                 return;
  67.             }
  68.             addAll(children, position + 1);// 插入到点击点的下方
  69.             itemData.setChildren(children);
  70.             if (onScrollToListener != null) {
  71.                 onScrollToListener.scrollTo(position + 1);
  72.             }
  73.         }
  75.         @Override
  76.         public void onHideChildren(ItemData itemData) {
  77.             int position = getCurrentPosition(itemData.getUuid());
  78.             List<ItemData> children = itemData.getChildren();
  79.             if (children == null) {
  80.                 return;
  81.             }
  82.             removeAll(position + 1, getChildrenCount(itemData) - 1);
  83.             if (onScrollToListener != null) {
  84.                 onScrollToListener.scrollTo(position);
  85.             }
  86.             itemData.setChildren(null);
  87.         }
  88.     };
  90.     @Override
  91.     public int getItemCount() {
  92.         return mDataSet.size();
  93.     }
  95.     private int getChildrenCount(ItemData item) {
  96.         List<ItemData> list = new ArrayList<ItemData>();
  97.         printChild(item, list);
  98.         return list.size();
  99.     }
  101.     private void printChild(ItemData item, List<ItemData> list) {
  102.         list.add(item);
  103.         if (item.getChildren() != null) {
  104.             for (int i = 0; i < item.getChildren().size(); i++) {
  105.                 printChild(item.getChildren().get(i), list);
  106.             }
  107.         }
  108.     }
  110.     /**
  111.      * 依据路径获取子文件夹或文件
  112.      *
  113.      * @param path
  114.      * @param treeDepth
  115.      * @return
  116.      */
  117.     public List<ItemData> getChildrenByPath(String path, int treeDepth) {
  118.         treeDepth++;
  119.         try {
  120.             List<ItemData> list = new ArrayList<ItemData>();
  121.             File file = new File(path);
  122.             File[] children = file.listFiles();
  123.             List<ItemData> fileList = new ArrayList<ItemData>();
  124.             for (File child : children) {
  125.                 if (child.isDirectory()) {
  126.                     list.add(new ItemData(ItemData.ITEM_TYPE_PARENT, child
  127.                             .getName(), child.getAbsolutePath(), UUID
  128.                             .randomUUID().toString(), treeDepth, null));
  129.                 } else {
  130.                     fileList.add(new ItemData(ItemData.ITEM_TYPE_CHILD, child
  131.                             .getName(), child.getAbsolutePath(), UUID
  132.                             .randomUUID().toString(), treeDepth, null));
  133.                 }
  134.             }
  135.             Collections.sort(list);
  136.             Collections.sort(fileList);
  137.             list.addAll(fileList);
  138.             return list;
  139.         } catch (Exception e) {
  141.         }
  142.         return null;
  143.     }
  145.     /**
  146.      * 从position開始删除，删除
  147.      *
  148.      * @param position
  149.      * @param itemCount
  150.      *            删除的数目
  151.      */
  152.     protected void removeAll(int position, int itemCount) {
  153.         for (int i = 0; i < itemCount; i++) {
  154.             mDataSet.remove(position);
  155.         }
  156.         notifyItemRangeRemoved(position, itemCount);
  157.     }
  159.     protected int getCurrentPosition(String uuid) {
  160.         for (int i = 0; i < mDataSet.size(); i++) {
  161.             if (uuid.equalsIgnoreCase(mDataSet.get(i).getUuid())) {
  162.                 return i;
  163.             }
  164.         }
  165.         return -1;
  166.     }
  168.     @Override
  169.     public int getItemViewType(int position) {
  170.         return mDataSet.get(position).getType();
  171.     }
  173.     public void add(ItemData text, int position) {
  174.         mDataSet.add(position, text);
  175.         notifyItemInserted(position);
  176.     }
  178.     public void addAll(List<ItemData> list, int position) {
  179.         mDataSet.addAll(position, list);
  180.         notifyItemRangeInserted(position, list.size());
  181.     }
  182. }
  • 在MainActivity中调用

因为使用的是RecyclerView，在动态加入和删除孩子节点时。会有明显的“展开”和“收起”效果。


  2. /**
  3.  * @Author Zheng Haibo
  4.  * @PersonalWebsite http://www.mobctrl.net
  5.  * @Description
  6.  */
  7. public class MainActivity extends Activity {
  9.     private RecyclerView recyclerView;
  11.     private RecyclerAdapter myAdapter;
  13.     private LinearLayoutManager linearLayoutManager;
  15.     @Override
  16.     protected void onCreate(Bundle savedInstanceState) {
  17.         super.onCreate(savedInstanceState);
  18.         setContentView(R.layout.activity_main);
  19.         recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
  20.         linearLayoutManager = new LinearLayoutManager(this);
  21.         recyclerView.setLayoutManager(linearLayoutManager);
  23.         recyclerView.getItemAnimator().setAddDuration(100);
  24.         recyclerView.getItemAnimator().setRemoveDuration(100);
  25.         recyclerView.getItemAnimator().setMoveDuration(200);
  26.         recyclerView.getItemAnimator().setChangeDuration(100);
  28.         myAdapter = new RecyclerAdapter(this);
  29.         recyclerView.setAdapter(myAdapter);
  30.         myAdapter.setOnScrollToListener(new OnScrollToListener() {
  32.             @Override
  33.             public void scrollTo(int position) {
  34.                 recyclerView.scrollToPosition(position);
  35.             }
  36.         });
  37.         initDatas();
  38.     }
  40.     private void initDatas() {
  41.         List<ItemData> list = myAdapter.getChildrenByPath("/", 0);
  42.         myAdapter.addAll(list, 0);
  43.     }
  45. }

Project

Demo的Github地址：https://github.com/nuptboyzhb/TreeRecyclerView

@Author: Zheng Haibo 莫川

使用RecyclerView写树形结构的TreeRecyclerView的更多相关文章

  1. js文章列表的树形结构输出

    文章表设计成这样了 后端直接给了无任何处理的json数据,现在要前端实现树形结构的输出,其实后端处理更简单写,不过既然来了就码出来 var doclist = [{ "id": 1 ...

  2. [从产品角度学EXCEL 02]-EXCEL里的树形结构

    这是<从产品角度学EXCEL>系列第三篇. 前言请看: 0 为什么要关注EXCEL的本质 1 excel是怎样运作的 或者你可以去微信公众号@尾巴说数 获得连载目录. 本文仅由尾巴本人发布 ...

  3. C# EasyUI树形结构权限管理模块

    最近悟出来一个道理,在这儿分享给大家:学历代表你的过去,能力代表你的现在,学习代表你的将来. 十年河东十年河西,莫欺少年穷 学无止境,精益求精 本节和大家探讨下C#使用EasyUI树形结构/Tree构 ...

  4. Atitit 常见的树形结构 红黑树  二叉树   B树 B+树  Trie树 attilax理解与总结

    Atitit 常见的树形结构 红黑树  二叉树   B树 B+树  Trie树 attilax理解与总结 1.1. 树形结构-- 一对多的关系1 1.2. 树的相关术语: 1 1.3. 常见的树形结构 ...

  5. 使用ztree.js，受益一生，十分钟学会使用tree树形结构插件

    看到ztree.js,这几个字眼,毋庸置疑,那肯定就是tree树形结构了,曾经的swing年代有jtree,后来jquery年代有jstree和treeview,虽然我没写过,但是我见过,一些小功能做 ...

  6. jQuery+zTree加载树形结构菜单

    jQuery+zTree加载树形结构菜单 由于项目中需要设计树形菜单功能,经过一番捣腾之后,终于给弄出来了,所以便记下来,也算是学习zTree的一个总结吧. zTree的介绍: 1.zTree 是利用 ...

  7. Qt QTreeWidget 树形结构实现(转)

    Qt中实现树形结构可以使用QTreeWidget类,也可以使用QTreeView类,QTreeWidget继承自QTreeView类.树形效果如下图所示: 这是怎么实现的呢?还有点击节点时会有相应的事 ...

  8. 树形结构部门的 sqlserver 排序

    树形结构部门的 sqlserver 排序 因为要实现部门排序功能,而且要考虑部门的层级,直接用 sql 排序是不行的,所以写个 sql function 来支持. 首先部门表:company CREA ...

  9. [SQL Server]树形结构的创建

    对于SQL Server来说,构建显示一个树形结构不是一件容易的事情,逻辑构造能力不是它的强项.不过也不是说它没有能力干这个事情,只要换一种思维方式就可以理解它的工作原理. 例如,现在有一张表的内容如 ...

随机推荐

  1. 宏HASH_INSERT

    调用 方法 HASH_INSERT(lock_t, hash, lock_sys->rec_hash,lock_rec_fold(space, page_no), lock); /******* ...

  2. BZOJ2055: 80人环游世界

    题解: 总算A掉了,各种蛋疼... int main() { freopen("input.txt","r",stdin); freopen("out ...

  3. spring+springMVC+JPA配置详解(使用缓存框架ehcache)

    SpringMVC是越来越火,自己也弄一个Spring+SpringMVC+JPA的简单框架. 1.搭建环境. 1)下载Spring3.1.2的发布包:Hibernate4.1.7的发布包(没有使用h ...

  4. apache开源项目--Camel

    Apache Camel 是一个非常强大的基于规则的路由以及媒介引擎,该引擎提供了一个基于POJO的 企业应用模式(Enterprise Integration Patterns)的实现,你可以采用其 ...

  5. apache开源项目--HIVE

    Hive是一个基于Hadoop的数据仓库平台.通过hive,我们可以方便地进行ETL的工作.hive定义了一个类似于SQL的查询语言:HQL,能 够将用户编写的QL转化为相应的Mapreduce程序基 ...

  6. Ejabberd源码解析前奏--集群

    一.如何工作 一个XMPP域是由一个或多个ejabberd节点伺服的. 这些节点可能运行在通过网络连接的不同机器上. 它们都必须有能力连接到所有其它节点的4369端口, 并且必须有相同的 magic ...

  7. HTML入门基础教程相关知识

    HTML入门基础教程 html是什么,什么是html通俗解答: html是hypertext markup language的缩写,即超文本标记语言.html是用于创建可从一个平台移植到另一平台的超文 ...

  8. nopcommerce商城系统--源代码结构和架构

    这个文档是让开发者了解nopcommerce解决方案结构的指南.这是新的nopcommerce开发者学习nopcommerce代码的相关文档.首先,nopCommerce源代码是很容易得到的.它是一个 ...

  9. Android调试工具及方法

    转自:http://www.cnblogs.com/feisky/archive/2010/01/01/1637566.html Logcat Dump一份系统消息的日志.这些消息包括模拟器抛出错误时 ...

  10. 序列化框架性能对比（kryo、hessian、java、protostuff）

    简介:   优点 缺点 Kryo 速度快,序列化后体积小 跨语言支持较复杂 Hessian 默认支持跨语言 较慢 Protostuff 速度快,基于protobuf 需静态编译 Protostuff- ...