ListView多级子菜单的实现

在网上看了很多关于多级子菜单的实现方式，有自定义ListView实现的，还有一些使用的PopWindow实现的，总得来说可能对于刚刚上手Android开发的人来说可能看这些有些不明白，下面我将使用传统的方式来实现（两个ListView结合使用），对于这种方式，可能在代码量上比较多，但是个人认为还是比较基础的，还有就是我的代码没有进行重构，可能很多代码都是冗余的，所以希望看官们见谅哈。。。。。。

多级下拉菜单的原理：

第一步：初始化两个ListView的数据

第二步：将这个两个ListView中的数据进行关联（这个是重点）

之后就是根据实际情况，在代码中进行处理。下面我就结合代码来说一说整个实现的过程。

首先就是让大家看看效果图：

我这里就仅仅实现了“全部地区”选项的二级子菜单，而且这些都是我从项目中抠出来的，可能会遗漏一些东西，但是大家把原理看懂了，自己去慢慢写吧。

布局文件是：

下面是Activity代码：

import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;

import android.app.Activity;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.ListView;
import android.widget.TextView;

import com.dazhong.dianping.adapter.DataAdapter;
import com.dazhong.dianping.adapter.SecondDataAdapter;
import com.dazhong.dianping.contacts.Contacts;

public class ShopListActivity extends Activity implements OnClickListener {
	private LinearLayout mShoplist_palcell;
	private TextView mShoplist_title_textbtn1;
	private ImageView mSearch_city_img;
	private ListView  mShoplist_onePlacelv,	mShoplist_twoPlacelv;
	private DataAdapter palceTwoAdapter;
	private SecondDataAdapter palceAdapter;
	private boolean	palcelistflag = false;

	private ArrayList> palcelist;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.activity_shoplist);

		initView();
		setOnClickListener();
		bindData();
		setListViewItemClick();

	}

	private void initView() {
		// 位置
		mShoplist_title_textbtn1 = (TextView) this
				.findViewById(R.id.Shoplist_title_textbtn1);
		mShoplist_palcell = (LinearLayout) this
				.findViewById(R.id.Shoplist_palcell);
		mShoplist_onePlacelv = (ListView) this
				.findViewById(R.id.Shoplist_onePlacelv);
		mShoplist_twoPlacelv = (ListView) this
				.findViewById(R.id.Shoplist_twoPlacelv);
	}

	private void setOnClickListener() {

		mShoplist_title_textbtn1.setOnClickListener(this);

	}

	private void bindData() {
		initPalceData();
		// 位置
		palceAdapter = new SecondDataAdapter(this, palcelist,
				R.layout.shop_list1_item, false);
		mShoplist_onePlacelv.setAdapter(palceAdapter);
		initSecondAdapter(Contacts.SHOPLIST_PLACESTREET[0]);
		palceAdapter.setSelectItem(0);

	}

	private void setListViewItemClick() {
		
		// 位置ListView，这个方法就是将两个LitView的数据进行绑定，并显示出来
		mShoplist_onePlacelv.setOnItemClickListener(new OnItemClickListener() {
			@Override
			public void onItemClick(AdapterView arg0, View arg1,
					int position, long arg3) {
				initSecondAdapter(Contacts.SHOPLIST_PLACESTREET[position]);
				palceAdapter.setSelectItem(position);
				palceAdapter.notifyDataSetChanged();
			}
		});
		mShoplist_twoPlacelv.setOnItemClickListener(new OnItemClickListener() {
			@Override
			public void onItemClick(AdapterView arg0, View arg1,
					int position, long arg3) {
				palceTwoAdapter.setSelectItem(position);
				Drawable drawable = getResources().getDrawable(
						R.drawable.ic_arrow_down_black);
				drawable.setBounds(0, 0, drawable.getMinimumWidth(),
						drawable.getMinimumHeight());
				mShoplist_title_textbtn1.setCompoundDrawables(null, null,
						drawable, null);
				mShoplist_palcell.setVisibility(View.GONE);
				palcelistflag = false;
				int id = palceAdapter.getSelectItem();
				mShoplist_title_textbtn1
						.setText(Contacts.SHOPLIST_PLACESTREET[id][position]);
			}
		});
	}

	@Override
	public void onClick(View v) {
		int mId = v.getId();
		if (mId == R.id.Shoplist_title_textbtn1) {
			Drawable drawable = null;
			if (!palcelistflag) {
				drawable = getResources().getDrawable(
						R.drawable.ic_arrow_up_black);
				mShoplist_palcell.setVisibility(View.VISIBLE);
				palceTwoAdapter.notifyDataSetChanged();
				palcelistflag = true;
			} else {
				drawable = getResources().getDrawable(
						R.drawable.ic_arrow_down_black);
				mShoplist_palcell.setVisibility(View.GONE);
				palcelistflag = false;
			}
			// 这一步必须要做,否则不会显示.
			drawable.setBounds(0, 0, drawable.getMinimumWidth(),
					drawable.getMinimumHeight());
			mShoplist_title_textbtn1.setCompoundDrawables(null, null, drawable,
					null);
		} else {
			Drawable drawable = getResources().getDrawable(
					R.drawable.ic_arrow_down_black);
			drawable.setBounds(0, 0, drawable.getMinimumWidth(),
					drawable.getMinimumHeight());
			mShoplist_title_textbtn1.setCompoundDrawables(null, null, drawable,
					null);
			mShoplist_palcell.setVisibility(View.GONE);
			palcelistflag = false;
		}

		
	}

	public void initPalceData() {
		palcelist = new ArrayList>();
		for (int i = 0; i < Contacts.SHOPLIST_PLACE.length; i++) {
			Map map = new HashMap();
			map.put("txt", Contacts.SHOPLIST_PLACE[i]);
			palcelist.add(map);
		}
	}

	// 初始化位置二级下拉菜单中的第二个listView
	private void initSecondAdapter(String[] strings) {
		palceTwoAdapter = new DataAdapter(this, strings,
				R.layout.shop_list2_item);
		mShoplist_twoPlacelv.setAdapter(palceTwoAdapter);
		palceTwoAdapter.notifyDataSetChanged();
	}

}

在这个类里面，initPalceData（）和initSecondAdapter（）两个方法就是来分别绑定两个ListView的数据的，那么在单击第一个ListView的Item的时候，就会重新调用 initSecondAdapter（）方法来实时的更新第二个ListView中的数据。这样就可以实现我们需要的效果了。

这里我用两个Adapter，其实是因为在项目中有这个需要，因为在第一个个ListView中可能不只是显示出文字，还需要将图片也一起显示，那么这个时候SecondDataAdapter就发挥作用了。例如下面这中效果：

下面就是Adapter的代码：

package com.dazhong.dianping.adapter;

import java.util.List;
import java.util.Map;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.dazhong.dianping.R;

public class SecondDataAdapter extends BaseAdapter {
	private Context ctx;
	private List> list;
	private int selectposition = 0;
	private boolean islodingimg = true;
	private int layout = R.layout.search_more_mainlist_item;;

	public SecondDataAdapter(Context ctx, List> list) {
		this.ctx = ctx;
		this.list = list;
	}

	public SecondDataAdapter(Context ctx, List> list,
			int layout, boolean islodingimg) {
		this.ctx = ctx;
		this.list = list;
		this.layout = layout;
		this.islodingimg = islodingimg;
	}

	@Override
	public int getCount() {
		// TODO Auto-generated method stub
		return list.size();
	}

	@Override
	public Object getItem(int position) {
		// TODO Auto-generated method stub
		return list.get(position);
	}

	@Override
	public long getItemId(int position) {
		// TODO Auto-generated method stub
		return position;
	}

	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		ViewHolder holder;
		if (convertView == null) {
			holder = new ViewHolder();
			convertView = View.inflate(ctx, layout, null);
			holder.layout = (LinearLayout) convertView
					.findViewById(R.id.Search_more_mainitem_layout);
			holder.img = (ImageView) convertView
					.findViewById(R.id.Search_more_mainitem_img);
			holder.txt = (TextView) convertView
					.findViewById(R.id.Search_more_mainitem_txt);
			convertView.setTag(holder);
		} else {
			holder = (ViewHolder) convertView.getTag();
		}
		if (islodingimg == true) {
			holder.img.setImageResource(Integer.parseInt(list.get(position)
					.get("img").toString()));
		}

		holder.txt.setText(list.get(position).get("txt").toString());
		holder.layout
				.setBackgroundResource(R.drawable.search_more_mainlistselect);
		if (selectposition == position) {
			holder.layout
					.setBackgroundResource(R.drawable.list_bkg_line_u);
		}
		return convertView;
	}

	public void setSelectItem(int i) {
		selectposition = i;
	}

	public int getSelectItem() {
		return selectposition;
	}

	private static class ViewHolder {
		LinearLayout layout;
		ImageView img;
		TextView txt;
	}
}

好了，希望大家可以明白原理，然后自己动手实现，最关键的部分就是两个ListView数据的相互绑定。

枫