Custom components-use BreadcrumbTreeView and android custom components

Custom components-use BreadcrumbTreeView and android custom components

I. Problem Overview

Tree structure is a common structure for data organization in development. Many platforms also provide corresponding controls. On the android platform, tree structure controls are not provided for the convenience of using fingers to operate the tree structure. However, in practical applications, it is inevitable to display hierarchical data, such as the presentation of organizational structures and file directories.

Based on this requirement, I have implemented the following TreeView controls by referring to the bread navigation in the website and the listview control in android:

In this way, you can use the bread navigation part to navigate to any node, make full use of the powerful data display function of listview, and load node data through the listener. The procedure is as follows:

II. Implementation steps

1. This component supports any object and maps the object to a node in the component through annotation. Defined folder object:

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. Create a layout file. Make sure that you have 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. Implement the adapter component for listview. The main adapter must inherit the BreadcrumbTreeViewAdapter, which converts the object to a TreeNode node.

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. Bind The OnTreeNodeClickListener listener to the breadcrumbtreeview component in the activity. This listener is executed when you click item in the listview or click the bread navigation bar. Only one method in the listener is onNodeClick. you can load the data of the subnode in this method.

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

First parameter: The clicked Node
Second parameter: Index of the clicked Node
Third place: When the node is clicked, the node in the listview is still in the breadcrumb.

The BreadcrumbTreeView component can be used through the above steps. This component is only initially implemented, and some functions have not been completed and are not optimized. The next step will continue to improve the modification.

 

If you want to learn more, you can download the source code to view more information! If you have any questions, you can leave a comment ~