自定义组件-BreadcrumbTreeView 的使用

一、问题概述

  树形结构是开发中常用的一种组织数据的结构,不少平台也提供了对应的控件。而在android平台中,出于使用手指操作树形结构不是很方便的原因,并没有提供树形结构控件。但在实际应用中,不可避免的会遇到展示带有层级关系数据的情况,比如组织结构的展示、文件目录的展示等等。

  基于这样的需求,本人参考网站中的面包屑导航和android中listview控件实现了如下效果的TreeView控件:

  通过这种方式,既可以使用上面的面包屑导航部分导航到任意一个节点,又可以充分利用listview强大的数据展示功能,同时通过相应监听器进行节点数据的懒加载。具体使用步骤如下:

二、实现步骤

  1、本组件支持任意实体对象,通过注解的方式将实体映射成组件中的节点。定义的文件夹实体对象:

public class FileFolder {
    @TreeNodeID
    private String folderId;
    @TreeNodeName
    private String folderName;
    @TreeNodeParentID
    private String parentFolder;
    public FileFolder(String folderId, String folderName, String parentFolder) {
        super();
        this.folderId = folderId;
        this.folderName = folderName;
        this.parentFolder = parentFolder;
    }
    public FileFolder() {
        super();
        }
}

  2、创建布局文件,注意要有listview

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" >

    <com.jredu.view.BreadcrumbTreeView
        android:id="@+id/myBreadcrumb"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <ListView
        android:id="@+id/mylist"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/myBreadcrumb" />
</RelativeLayout>

  3、为listview实现适配器组件,主要适配器要继承BreadcrumbTreeViewAdapter,在此适配器中将完成将实体转换为TreeNode节点。

public class FolderTreeAdapter extends BreadcrumbTreeViewAdapter<FileFolder> {

    public FolderTreeAdapter(Context mContext, List<FileFolder> treeData) {
        super(mContext, treeData);
    }
    @Override
    public View getConvertView(TreeNode node, View convertView, ViewGroup parent) {
        ViewHolder holder = null;
        if (convertView == null) {
            convertView = this.mLayoutInflater.inflate(R.layout.tree_list_item,
                    null);
            holder = new ViewHolder();
            holder.deptName = (TextView) convertView
                    .findViewById(R.id.treeNode);
            convertView.setTag(holder);
        } else {
            holder = (ViewHolder) convertView.getTag();
        }
        holder.deptName.setText(node.getNodeName());
        return convertView;

    }

    public class ViewHolder {
        public TextView deptName;
    }
}

  4、在activity中为breadcrumbtreeview组件绑定OnTreeNodeClickListener监听器,当点击listview中item或者点击面包屑导航时都将执行此监听器。监听器中只有一个方法为onNodeClick,可以在此方法中加载子节点的数据。

public void onNodeClick(TreeNode node, int position, boolean isBreadcrumb)

第一个参数:被点击的节点

第二个参数:被点击节点的索引

第三个三处:被点击节点时listview中的还是面包屑中的节点。

  通过以上步骤,即可使用BreadcrumbTreeView组件,本组件现在只是初步实现,尚有一些功能没有完成且没有进行优化,下一步将会继续完善修改。

时间: 2024-11-03 22:10:46

自定义组件-BreadcrumbTreeView 的使用的相关文章

Vue1.0学习总结(4)———Vue1.0自定义组件、Vue1.0组件之间的通信

Vue自定义组件: 组件:就是一个大的对象:new Vue({})就是一个组件定义一个组件:1.全局组件: <div id="box"> <aaa></aaa> </div> var Aaa=Vue.extend({ template:'<h3>我是一个标题</h3>' }); Vue.component('aaa',Aaa); a)给自定义的组件添加数据: data必须是函数的形式,函数必须返回一个对象(json

【ExtJS】自定义组件datetimefield(一)

目的: ExtJS中提供了下拉日期选择控件Ext.form.field.Date与下拉时间选择控件Ext.form.field.Time.不过没有一个在选择日期时选择时间的控件datetimefield.目的就是运用自定义组件的方法,来扩展下拉日期选择控件Ext.form.field.Date,在下拉框中添加时间选择的组件.目标效果: 第一步:继承Ext.picker.Date,创建My.picker.DateTime类 1 Ext.define('My.picker.DateTime', {

1、开发自定义组件简要

一.自定义组件分类 Customized Component:继承VIew ,增加更多的属性和事件.  横向扩展 Compound Component: 继承ViewGroup , 把多个简单控件通过布局拼装一个复合控件.横向扩展 二.定义组件步骤 1 选择继承类(肯定是View or View的子类). 2 类的初始化:新增属性    属性的初值设定. 3 重载方法: 布局及呈现onDraw() , onMeasure() 事件(自定义事件)onKeyEvent() ...  监听器/重载函数

Vue结合原生js实现自定义组件自动生成

就目前三大前端主流数据驱动框架(vue,ng,react)而言,均具有创建自定义组件的api,但都是必须先做到事先写好挂载点,这个挂载点可以是原有静态元素标签也可以是自定义模板:对于多种组件通过同一数据流生成的,如果事先在页面上写好挂载点(mounted),然后通过dom操作去动态添加,会遇到类似这样一条错误提示信息:Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.(…).这又是为何呢,下一

【REACT NATIVE 系列教程之二】创建自定义组件&&导入与使用示例

本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/react-native/2219.html 在上一篇  [REACT NATIVE 系列教程之一]触摸事件的两种形式与四种TOUCHABLE组件详解 中的最后介绍了如何使用Touchable的四种组件进行监听触摸事件.  那么紧接着我们利用Touchable来包装一个带图片的Button组件,且设计成可接受很多自定义参数. 一:创建我们自定义

Yii2.0 高级模版编写使用自定义组件(component)

翻译自:http://www.yiiframework.com/wiki/760/yii-2-0-write-use-a-custom-component-in-yii2-0-advanced-template/ 简单模版中添加自定义组件:http://www.yiiframework.com/wiki/747/write-use-a-custom-component-in-yii2-0/ 我们实现的是添加一个读取真实IP的组件,下面是详细步骤: 1. 在项目根目录的common目录中新建com

Android中自定义组件和它的属性

好长时间没有更新博客了,本来想积累点有深度的东西发,但一直没有找到很好的点.所以,写一些基础的东西,就当积累吧. Android开发中难免会用到自定义的组件,下面以ImageButton为例来介绍怎么自定义组件和它的属性: 第一步.在values/attrs.xml中为组件自定义属性: <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name=&

【ExtJS】关于自定义组件(一)

一.目的: ExtJS中提供了下拉日期选择控件Ext.form.field.Date与下拉时间选择控件Ext.form.field.Time.不过没有一个在选择日期时选择时间的控件datetimefield.目的就是运用自定义组件的方法,来扩展下拉日期选择控件Ext.form.field.Date,在下拉框中添加时间选择的组件.目标效果: 二.一些知识的梳理: 当自定义创建一个新类时,最好根据需要继承一个功能相近的基类,这是因为Ext JS 提供的自动化生命周期管理将会被合适的布局管理器管理并且

Yii之自定义组件

在控制器中(protected/controllers): <?php class WidgetController extends Controller { public function actionIndex(){ $this->render('index'); } } 在视图中(protected/index): $this->widget('application.widgets.UserWidget',array( 'num'=>3 )); 自定义组件: 在protec