首页 > 代码库 > Android无限极树状(tree)结构Demo

Android无限极树状(tree)结构Demo

2024-08-03 07:14:46   219人阅读

上篇文章写了一下ExpandableListView，就是两层结构的点击，Android中没有三层结构的组件，这个时候需要自己去扩展一下，可以扩展ExpandableListView，也可以选择扩展ListView。为了是实现这个效果，也是在搜了很多文章（中国的文章你懂的），有个哥们在GitHub开源了项目，奈何封装的太多，看的头晕目眩。看到有人扩展ListView的更符合自己的想法，因为做服务器端的时候也是先加载顶层元素，然后控制点击事件加载父级下面的子元素，有这个理解就可以去是实现一颗所谓的N级结构，开始正题吧:

布局文件

新建一个activity_tree.xml布局文件，里面放一个ListView即可:

 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.example.googletree.TreeActivity" >  <ListView         android:id="@+id/tree_list"        android:layout_width="match_parent"        android:layout_height="match_parent"/></RelativeLayout>

 

　新建一个tree_item布局文件:

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent" >           <ImageView         android:id="@+id/homeImg"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_centerVertical="true"        android:layout_alignParentLeft="true"/>        <TextView         android:id="@+id/treeText"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_centerVertical="true"        android:layout_toRightOf="@id/homeImg"/>    </RelativeLayout>

　Demo实现

需要展示一个树状结构的数据，先定义一个TreeNode类，存放数据:

 

public class TreeNode {	/** 文字内容 */	private String contentText;	/** 在tree中的层级 */	private int level;	/** 元素的id */	private int id;	/** 父元素的id */	private int parendId;	/** 是否有子元素 */	private boolean hasChildren;	/** item是否展开 */	private boolean isExpanded;		/** 表示该节点没有父元素，也就是level为0的节点 */	public static final int NO_PARENT = -1;	/** 表示该元素位于最顶层的层级 */	public static final int TOP_LEVEL = 0;		public TreeNode(String contentText, int level, int id, int parendId,			boolean hasChildren, boolean isExpanded) {		super();		this.contentText = contentText;		this.level = level;		this.id = id;		this.parendId = parendId;		this.hasChildren = hasChildren;		this.isExpanded = isExpanded;	}	public boolean isExpanded() {		return isExpanded;	}	public void setExpanded(boolean isExpanded) {		this.isExpanded = isExpanded;	}	public String getContentText() {		return contentText;	}	public void setContentText(String contentText) {		this.contentText = contentText;	}	public int getLevel() {		return level;	}	public void setLevel(int level) {		this.level = level;	}	public int getId() {		return id;	}	public void setId(int id) {		this.id = id;	}	public int getParendId() {		return parendId;	}	public void setParendId(int parendId) {		this.parendId = parendId;	}	public boolean isHasChildren() {		return hasChildren;	}	public void setHasChildren(boolean hasChildren) {		this.hasChildren = hasChildren;	}}

 

　为了填充视图的中ListView，需要自定义TreeViewAdapter：

public class TreeViewAdapter extends BaseAdapter {	/** 所有的数据集合 */	private ArrayList<TreeNode> allNodes;	/** 顶层元素结合*/	private ArrayList<TreeNode> topNodes;	/** LayoutInflater */	private LayoutInflater inflater;	/** item的行首缩进基数 */	private int indentionBase;		public TreeViewAdapter(ArrayList<TreeNode> topNodes, ArrayList<TreeNode> allNodes, LayoutInflater inflater) {		this.topNodes = topNodes;		this.allNodes = allNodes;		this.inflater = inflater;		indentionBase =20;	}	public ArrayList<TreeNode> getTopNodes() {		return topNodes;	}		public ArrayList<TreeNode> getAllNodes() {		return allNodes;	}		@Override	public int getCount() {		return topNodes.size();	}	@Override	public Object getItem(int position) {		return topNodes.get(position);	}	@Override	public long getItemId(int position) {		return position;	}	@Override	public View getView(int position, View convertView, ViewGroup parent) {		ViewHolder holder = null;		if (convertView == null) {			holder = new ViewHolder();			convertView = inflater.inflate(R.layout.tree_item, null);			holder.homeImg = (ImageView) convertView.findViewById(R.id.homeImg);			holder.treeText = (TextView) convertView.findViewById(R.id.treeText);			convertView.setTag(holder);		} else {			holder = (ViewHolder) convertView.getTag();		}		TreeNode element = topNodes.get(position);		int level =element.getLevel();		holder.homeImg.setPadding(				indentionBase * (level + 1), 				holder.homeImg.getPaddingTop(), 				holder.homeImg.getPaddingRight(), 				holder.homeImg.getPaddingBottom());		holder.treeText.setText(element.getContentText());		if (element.isHasChildren() && !element.isExpanded()) {			holder.homeImg.setImageResource(R.drawable.open);			//这里要主动设置一下icon可见，因为convertView有可能是重用了"设置了不可见"的view，下同。			holder.homeImg.setVisibility(View.VISIBLE);		} else if (element.isHasChildren() && element.isExpanded()) {			holder.homeImg.setImageResource(R.drawable.open);			holder.homeImg.setVisibility(View.VISIBLE);		} else if (!element.isHasChildren()) {			holder.homeImg.setImageResource(R.drawable.open);			holder.homeImg.setVisibility(View.VISIBLE);		}		return convertView;	}		static class ViewHolder{		ImageView homeImg;		TextView treeText;	}}

　在Activity中的调用:　

public class TreeActivity extends Activity {	/** 树中的顶层元素集合 */	private ArrayList<TreeNode> topNodes;	/** 所有的元素集合 */	private ArrayList<TreeNode> allNodes;		@Override	protected void onCreate(Bundle savedInstanceState) {		super.onCreate(savedInstanceState);		setContentView(R.layout.activity_tree);				LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);				init();				ListView treeview = (ListView) findViewById(R.id.tree_list);		TreeViewAdapter treeViewAdapter = new TreeViewAdapter(topNodes, allNodes, inflater);		TreeViewItemClickListener treeViewItemClickListener = new TreeViewItemClickListener(treeViewAdapter);		treeview.setAdapter(treeViewAdapter);		treeview.setOnItemClickListener(treeViewItemClickListener);	}		private void init() {		topNodes = new ArrayList<TreeNode>();		allNodes = new ArrayList<TreeNode>();				//添加节点  -- 节点名称，节点level，节点id，父节点id，是否有子节点，是否展开				//添加最外层节点		TreeNode node1= new TreeNode("北京市", TreeNode.TOP_LEVEL, 0, TreeNode.NO_PARENT, true, false);				//添加第一层节点		TreeNode node2= new TreeNode("海淀区", TreeNode.TOP_LEVEL + 1, 1, node1.getId(), true, false);		//添加第二层节点		TreeNode node3= new TreeNode("西二旗", TreeNode.TOP_LEVEL + 2, 2, node2.getId(), true, false);		//添加第三层节点//		TreeNode node7= new TreeNode("辉煌国际", TreeNode.TOP_LEVEL + 3, 6, node3.getId(), false, false);					//添加第一层节点		TreeNode node4= new TreeNode("河南省", TreeNode.TOP_LEVEL , 3, TreeNode.NO_PARENT, true, false);		//添加第二层节点		TreeNode node5= new TreeNode("郑州市", TreeNode.TOP_LEVEL + 1, 4, node4.getId(), true, false);		//添加第三层节点		TreeNode node6= new TreeNode("金水区", TreeNode.TOP_LEVEL + 2, 5, node5.getId(), false, false);						//添加初始树元素		topNodes.add(node1);		topNodes.add(node4);		//创建数据源		allNodes.add(node1);		allNodes.add(node2);		allNodes.add(node3);		allNodes.add(node4);		allNodes.add(node5);		allNodes.add(node6);//		allNodes.add(node7);	}	@Override	public boolean onCreateOptionsMenu(Menu menu) {		getMenuInflater().inflate(R.menu.tree, menu);		return true;	}}

由于每次都是加载一层节点，需要自己控制点击事件，自定义一个TreeViewItemClickListener:

public class TreeViewItemClickListener implements OnItemClickListener {	/** 定义的适配器 */	private TreeViewAdapter treeViewAdapter;		public TreeViewItemClickListener(TreeViewAdapter treeViewAdapter) {		this.treeViewAdapter = treeViewAdapter;	}		@Override	public void onItemClick(AdapterView<?> parent, View view, int position,			long id) {		//点击的item代表的元素		TreeNode treeNode = (TreeNode) treeViewAdapter.getItem(position);		//树中顶层的元素		ArrayList<TreeNode> topNodes = treeViewAdapter.getTopNodes();		//元素的数据源		ArrayList<TreeNode> allNodes = treeViewAdapter.getAllNodes();				//点击没有子项的item直接返回		if (!treeNode.isHasChildren()) {			return;		}				if (treeNode.isExpanded()) {			treeNode.setExpanded(false);			//删除节点内部对应子节点数据，包括子节点的子节点...			ArrayList<TreeNode> elementsToDel = new ArrayList<TreeNode>();			for (int i = position + 1; i < topNodes.size(); i++) {				if (treeNode.getLevel() >= topNodes.get(i).getLevel())					break;				elementsToDel.add(topNodes.get(i));			}			topNodes.removeAll(elementsToDel);			treeViewAdapter.notifyDataSetChanged();		} else {			treeNode.setExpanded(true);			//从数据源中提取子节点数据添加进树，注意这里只是添加了下一级子节点，为了简化逻辑			int i = 1;//注意这里的计数器放在for外面才能保证计数有效			for (TreeNode e : allNodes) {				if (e.getParendId() == treeNode.getId()) {					e.setExpanded(false);					topNodes.add(position + i, e);					i ++;				}			}			treeViewAdapter.notifyDataSetChanged();		}	}}

　代码搞定，看初始效果吧:

全部展开：

 

　这个时候把treeActivity中那个node7注释取消，也就是加了第三层节点的效果:

 

TreeNode node7= new TreeNode("辉煌国际", TreeNode.TOP_LEVEL + 3, 6, node3.getId(), false, false);

 

　　效果如下:

 

好了，无限极结构实现了，周四愉快~北京早安~

 

Android无限极树状(tree)结构Demo


联系
我们