粗糙的级联选择

项目的结构：

代码部分：

ChildAdapter.java

package com.example.cascade;

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

public class ChildAdapter extends BaseAdapter {
	
	Context context = null;
	String[] item = null; //子标题item数组
	
	/**
	 * 构造方法
	 * 
	 * @param context
	 */
	public ChildAdapter(Context context) {
		this.context = context;
	}
	
	/**
	 * 为子ListVitem设置要显示的数据
	 * 
	 * @param childArr
	 */
	public void setChildData(String[] childArr) {
		this.item = childArr;
	}
	
	@Override
	public int getCount() {
		// TODO Auto-generated method stub
		if(this.item==null)
		{
			return 0;
		}
		return this.item.length;
	}

	@Override
	public Object getItem(int position) {
		// TODO Auto-generated method stub
		return this.item[position];
	}

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

	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		// TODO Auto-generated method stub
		ViewHolder holder = null;
		if(convertView==null)
		{
			convertView = LayoutInflater.from(context).inflate(R.layout.child, null);
			holder = new ViewHolder();
			holder.childTextView = (TextView) convertView.findViewById(R.id.child_item_tv);
			convertView.setTag(holder);
		}
		else
		{
			holder = (ViewHolder) convertView.getTag();
		}
		holder.childTextView.setText(this.item[position]);
		return convertView;
	}

	/**
	 * 子类用来存放TextView
	 */
	static class ViewHolder
	{
		TextView childTextView = null;
	}
}

GroupAdapter.java

package com.example.cascade;



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

public class GroupAdapter extends BaseAdapter {
	Context context = null;
	String groupItem[] = null;
	int gPosition;// 选中的位置

	/**
	 * 构造方法
	 * 
	 * @param context
	 *            // 上下文对象
	 * @param groupArr
	 *            // item标题数组
	 */
	public GroupAdapter(Context context, String[] groupArr) {
		this.context = context;
		this.groupItem = groupArr;
	}

	/**
	 * 设置选择的位置
	 * 
	 * @param position
	 */
	public void setSelectedPosition(int position) {
		this.gPosition = position;
	}

	@Override
	public int getCount() {
		// TODO Auto-generated method stub
		if (this.groupItem == null)
			return 0;
		return this.groupItem.length;
	}

	@Override
	public Object getItem(int position) {
		// TODO Auto-generated method stub
		return this.groupItem[position];
	}

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

	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		// TODO Auto-generated method stub
		ViewHolder holder = null;
		if (convertView == null) {
			convertView = LayoutInflater.from(context).inflate(R.layout.group,
					null);
			holder = new ViewHolder();
			holder.groupTextView = (TextView) convertView
					.findViewById(R.id.group_item_tv);
			convertView.setTag(holder);
		} else {
			holder = (ViewHolder) convertView.getTag();
		}
		holder.groupTextView.setText(this.groupItem[position]);

		// 下面我没有设置选中的效果，这里是看看没有下面的代码会有什么效果
		// 设置控件内容
		if (this.gPosition == position) {
			holder.groupTextView.setTextColor(this.context.getResources().getColor(
					R.color.list_item_text_pressed_bg));
			convertView.setBackgroundColor(this.context.getResources().getColor(
					R.color.group_item_pressed_bg));
		} else {
			holder.groupTextView.setTextColor(this.context.getResources().getColor(
					android.R.color.black));
			convertView.setBackgroundColor(this.context.getResources().getColor(
					R.color.group_item_bg));
		}

		return convertView;
	}

	static class ViewHolder {
		TextView groupTextView = null;
	}

}

MainActivity.java

package com.zihao.ui;

import com.example.test.R;
import com.zihao.adapter.GroupAdapter;
import com.zihao.adapter.ChildAdapter;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.util.DisplayMetrics;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.TranslateAnimation;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.ListView;
import android.widget.PopupWindow;
import android.widget.TextView;

public class MainActivity extends Activity implements OnClickListener {

	View showPupWindow = null; // 选择区域的view
	/** 一级菜单名称数组 **/
	String[] GroupNameArray = { "全合肥", "蜀山", "庐阳", "包河", "瑶海", "经开", "高新" };
	/** 二级菜单名称数组 **/
	String[][] childNameArray = { {},
			{ "全蜀山01", "稻香村", "南七里站", "三里庵", "琥珀山庄", "西园新村", "五里墩" },
			{ "全蜀山02", "稻香村", "南七里站", "三里庵", "琥珀山庄", "西园新村", "五里墩" },
			{ "全蜀山03", "稻香村", "南七里站", "三里庵", "琥珀山庄", "西园新村", "五里墩" },
			{ "全蜀山04", "稻香村", "南七里站", "三里庵", "琥珀山庄", "西园新村", "五里墩" },
			{ "全蜀山05", "稻香村", "南七里站", "三里庵", "琥珀山庄", "西园新村", "五里墩" },
			{ "全蜀山06", "稻香村", "南七里站", "三里庵", "琥珀山庄", "西园新村", "五里墩" } };
	ListView groupListView = null;
	ListView childListView = null;
	GroupAdapter groupAdapter = null;
	ChildAdapter childAdapter = null;

	TranslateAnimation animation;// 出现的动画效果
	// 屏幕的宽高
	public static int screen_width = 0;
	public static int screen_height = 0;
	PopupWindow mPopupWindow = null;
	private LinearLayout areaLayout, wageLayout, classLayout, searchLayout;
	private boolean[] tabStateArr = new boolean[4];// 标记tab的选中状态，方便设置
	private ImageView areaImg, WageImg, classImg;
	private TextView areaText, wageText, classText;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		DisplayMetrics dm = new DisplayMetrics();
		getWindowManager().getDefaultDisplay().getMetrics(dm); // 获取手机屏幕的大小
		screen_width = dm.widthPixels;
		screen_height = dm.heightPixels;

		initView();
	}

	private void initView() {
		areaLayout = (LinearLayout) findViewById(R.id.area_layout);
		wageLayout = (LinearLayout) findViewById(R.id.wage_layout);
		classLayout = (LinearLayout) findViewById(R.id.class_layout);
		searchLayout = (LinearLayout) findViewById(R.id.search_layout);
		areaImg = (ImageView) findViewById(R.id.area_img);
		WageImg = (ImageView) findViewById(R.id.wage_img);
		classImg = (ImageView) findViewById(R.id.class_img);
		areaText = (TextView) findViewById(R.id.area_textView);
		wageText = (TextView) findViewById(R.id.wage_textView);
		classText = (TextView) findViewById(R.id.class_textView);

		areaLayout.setOnClickListener(this);
		wageLayout.setOnClickListener(this);
		classLayout.setOnClickListener(this);
		searchLayout.setOnClickListener(this);

		int[] location = new int[2];
		areaLayout.getLocationOnScreen(location);// 获取控件在屏幕中的位置,方便展示Popupwindow

		animation = new TranslateAnimation(0, 0, -700, location[1]);
		animation.setDuration(500);
	}

	@Override
	public void onClick(View v) {
		switch (v.getId()) {
		case R.id.area_layout:
			tabStateArr[0] = !tabStateArr[0];
			setTabState(areaImg, areaText, tabStateArr[0]);
			if (tabStateArr[0]) {// 判断是否需要关闭弹出层
				showPupupWindow();
			} else {
				mPopupWindow.dismiss();
			}
			break;
		case R.id.wage_layout:
			tabStateArr[1] = !tabStateArr[1];
			setTabState(WageImg, wageText, tabStateArr[1]);
			break;
		case R.id.class_layout:
			tabStateArr[2] = !tabStateArr[2];
			setTabState(classImg, classText, tabStateArr[2]);
			break;
		case R.id.search_layout:
			tabStateArr[3] = !tabStateArr[3];
			break;
		}
	}

	/**
	 * 设置tab的状态
	 * 
	 * @param img
	 *            // ImageView对象
	 * @param textView
	 *            // TextView对象
	 * @param state
	 *            // 状态
	 */
	private void setTabState(ImageView img, TextView textView, boolean state) {
		if (state) {// 选中状态
			img.setBackgroundResource(R.drawable.up);
			textView.setTextColor(getResources().getColor(
					R.color.tab_text_pressed_color));
		} else {
			img.setBackgroundResource(R.drawable.down);
			textView.setTextColor(getResources().getColor(
					R.color.tab_text_color));
		}
	}

	@SuppressLint("HandlerLeak")
	Handler handler = new Handler() {
		public void handleMessage(android.os.Message msg) {
			switch (msg.what) {
			case 20:
				childAdapter.setChildData(childNameArray[msg.arg1]);
				childAdapter.notifyDataSetChanged();
				groupAdapter.notifyDataSetChanged();
				break;
			default:
				break;
			}

		};
	};

	/**
	 * 初始化 PopupWindow
	 * 
	 * @param view
	 */
	public void initPopuWindow(View view) {
		/* 第一个参数弹出显示view 后两个是窗口大小 */
		mPopupWindow = new PopupWindow(view, screen_width, screen_height);
		/* 设置背景显示 */
		mPopupWindow.setBackgroundDrawable(getResources().getDrawable(
				R.drawable.mypop_bg));
		/* 设置触摸外面时消失 */
		// mPopupWindow.setOutsideTouchable(true);

		mPopupWindow.update();
		mPopupWindow.setTouchable(true);
		/* 设置点击menu以外其他地方以及返回键退出 */
		mPopupWindow.setFocusable(true);

		/**
		 * 1.解决再次点击MENU键无反应问题 2.sub_view是PopupWindow的子View
		 */
		view.setFocusableInTouchMode(true);
	}

	/**
	 * 展示区域选择的对话框
	 */
	private void showPupupWindow() {
		if (mPopupWindow == null) {
			showPupWindow = LayoutInflater.from(this).inflate(
					R.layout.bottom_layout, null);
			initPopuWindow(showPupWindow);

			groupListView = (ListView) showPupWindow
					.findViewById(R.id.listView1);
			childListView = (ListView) showPupWindow
					.findViewById(R.id.listView2);

			groupAdapter = new GroupAdapter(this, GroupNameArray);
			groupListView.setAdapter(groupAdapter);
		}

		groupListView.setOnItemClickListener(new MyItemClick());

		childListView.setOnItemClickListener(new OnItemClickListener() {
			@Override
			public void onItemClick(AdapterView<?> parent, View view,
					int position, long id) {

			}
		});

		showPupWindow.setAnimation(animation);
		showPupWindow.startAnimation(animation);

		mPopupWindow.showAsDropDown(areaLayout, -5, 10);

	}

	class MyItemClick implements OnItemClickListener {

		@Override
		public void onItemClick(AdapterView<?> parent, View view, int position,
				long id) {

			groupAdapter.setSelectedPosition(position);

			if (childAdapter == null) {
				childAdapter = new ChildAdapter(MainActivity.this);
				childListView.setAdapter(childAdapter);
			}

			Message msg = new Message();
			msg.what = 20;
			msg.arg1 = position;
			handler.sendMessage(msg);
		}

	}

}

res/drawable/mypop_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" >


    <stroke 
        android:color="@color/child_item_diveder"
        android:width="1dp"/>


</shape>

res/layout/activity_main.xml

<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">

    <Button 
        android:id="@+id/spinner"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="选择城市"/>

</RelativeLayout>

res/layout/buttom_click_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >
    
     <ListView
        android:id="@+id/listView01"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="3"
        android:background="@color/group_item_bg"
        android:cacheColorHint="@android:color/transparent"
        android:divider="@color/child_item_diveder"
        android:dividerHeight="1dp"
        android:scrollbars="none" />

    <View
        android:layout_width="1dp"
        android:layout_height="fill_parent"
        android:background="@color/child_item_diveder" />

    <ListView
        android:id="@+id/listView02"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="2"
        android:background="@color/child_item_bg"
        android:cacheColorHint="@android:color/transparent"
        android:divider="@color/child_item_diveder"
        android:dividerHeight="1dp"
        android:scrollbars="none" />

</LinearLayout>

res/layout/child.xml

<LinearLayout 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">

    <TextView
        android:id="@+id/child_item_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

res/layout/group.xml

<LinearLayout 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">

    <TextView
        android:id="@+id/group_item_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

res/values/colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <color name="group_item_bg">#F3F3F3</color>
    <color name="group_item_pressed_bg">#E5E5E5</color>
    <color name="child_item_bg">#E5E5E5</color>
    <color name="child_item_diveder">#D6D6D5</color>
    <color name="white">#FFFFFF</color>
    <color name="list_item_text_pressed_bg">#FF822E</color>
    <color name="tab_text_color">#787878</color>
    <color name="tab_text_pressed_color">#CD0000</color>

</resources>

效果图：

原理解释：

这个是通过两个ListView的，

private ListView listView01 = null;
	private ListView listView02 = null;

首先左边的ListView也就是listView01这个选择后

通过给listView01设置OnItemClickListener的监听然后在监听中有如下代码

Messagemsg = new Message();

msg.what = 20;

msg.arg1 =position;

handler.sendMessage(msg);

这个是调用MainActivity中设置的一个

@SuppressLint("HandlerLeak")
	Handler handler = new Handler() {
		public void handleMessage(android.os.Message msg) {
			switch (msg.what) {
			case 20:
				childAdapter.setChildData(childNameArray[msg.arg1]);//此处是设置ChildAdapter的数据
				childAdapter.notifyDataSetChanged();//用来如果数据改变通知BaseAdapter的 
				groupAdapter.notifyDataSetChanged();
				break;
			default:
				break;
			}

		};
	};

这里面会根据msg.arg1 这个参数来选择数组里不同的数据

childAdapter.setChildData(childNameArray[msg.arg1]);//此处是设置ChildAdapter的数据

childAdapter.notifyDataSetChanged();//用来如果数据改变通知BaseAdapter的

然后用notifyDataSetChanged()这个函数来提醒childAdapter来改变数据，

而这两个ListView的显示是通过一个PopupWindow来显示的

showPupWindow = LayoutInflater.from(this).inflate(

R.layout.buttom_click_layout,null);

这样就可以把ListView加入并显示出来。

而ChildAdapter和GroupAdapter这两个类其实很简单

convertView = LayoutInflater.from(context).inflate(R.layout.child,null);

就是这么一行代码，来讲XML文件变成一个View，而这个XML中是一个TextView，这个TextView就是为了设置一行一行的数据的

	/** 二级菜单名称数组 **/
	String[][] childNameArray = { {},
			{ "全蜀山01", "稻香村", "南七里站", "三里庵", "琥珀山庄", "西园新村", "五里墩" },
			{ "全蜀山02", "稻香村", "南七里站", "三里庵", "琥珀山庄", "西园新村", "五里墩" },
			{ "全蜀山03", "稻香村", "南七里站", "三里庵", "琥珀山庄", "西园新村", "五里墩" },
			{ "全蜀山04", "稻香村", "南七里站", "三里庵", "琥珀山庄", "西园新村", "五里墩" },
			{ "全蜀山05", "稻香村", "南七里站", "三里庵", "琥珀山庄", "西园新村", "五里墩" },
			{ "全蜀山06", "稻香村", "南七里站", "三里庵", "琥珀山庄", "西园新村", "五里墩" } };

就是上面的数据。

GroupAdapter的设置同ChildAdapter。

PS：以上源码来源于DevStore

posted @ 2015-02-02 20:47 伟衙内阅读(6) 评论(0) 编辑收藏举报

刷新页面返回顶部

weiyanei

粗糙的级联选择