android 可编辑的下拉框 Demo

最终实现效果：

项目目录结构：

EditDropdownTextboxActivity.java

package com.royal.editDropdownTextbox;

import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.View.OnTouchListener;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.EditText;
import android.widget.ImageButton;
import android.widget.LinearLayout.LayoutParams;
import android.widget.ListView;
import android.widget.PopupWindow;
import android.widget.TextView;

/**
 * 可编辑的下拉框Demo
 * @author royal
 *
 */
public class EditDropdownTextboxActivity extends Activity {

	private ImageButton ibtn_dropDown;
	private PopupWindow pop;
	private PopupAdapter adapter;
	private ListView listView;
	private EditText et_username;
	// popupWindow listView是否显示
	private boolean isShow = false;
	private List<String> names;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		ibtn_dropDown = (ImageButton) findViewById(R.id.ibtn_dropDown);
		et_username = (EditText) findViewById(R.id.et_username);

		// 图片按钮监听
		setUpIbtnListeners();

		names = new ArrayList<String>();
		names.add("曹操");
		names.add("刘备");
		names.add("孙权");
	}

	/**
	 * 图片按钮监听
	 */
	public void setUpIbtnListeners() {
		ibtn_dropDown.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				if (pop == null) {
					if (adapter == null) {
						adapter = new PopupAdapter(EditDropdownTextboxActivity.this);
						listView = new ListView(EditDropdownTextboxActivity.this);
						pop = new PopupWindow(listView, et_username.getWidth(), LayoutParams.WRAP_CONTENT);
						listView.setAdapter(adapter);
						pop.showAsDropDown(et_username);
						isShow = true;
					}
				} else if (isShow) {
					pop.dismiss();
					isShow = false;
				} else if (!isShow) {
					pop.showAsDropDown(et_username);
					isShow = true;
				}
			}

		});
	}

	/**
	 * 自定义适配器,PopupWindow listView的数据处理
	 * 
	 * @author royal
	 * 
	 */
	class PopupAdapter extends BaseAdapter {

		private LayoutInflater layoutInflater;
		private Context context;

		public PopupAdapter() {

		}

		public PopupAdapter(Context context) {
			this.context = context;
		}

		@Override
		public int getCount() {
			return names.size();
		}

		@Override
		public Object getItem(int position) {
			return null;
		}

		@Override
		public long getItemId(int position) {
			return position;
		}

		@Override
		public View getView(final int position, View convertView, ViewGroup parent) {
			Holder holder = null;
			final String name = names.get(position);
			if (convertView == null) {
				layoutInflater = LayoutInflater.from(context);
				convertView = layoutInflater.inflate(R.layout.popup, null);
				holder = new Holder();
				holder.tv = (TextView) convertView.findViewById(R.id.tv_account);
				holder.ibtn = (ImageButton) convertView.findViewById(R.id.ibtn_delete);
				convertView.setTag(holder);
			} else {
				holder = (Holder) convertView.getTag();
			}
			if (holder != null) {
				convertView.setId(position);
				holder.setId(position);
				holder.tv.setText(name);
				holder.tv.setOnTouchListener(new OnTouchListener() {

					@Override
					public boolean onTouch(View v, MotionEvent event) {
						// TODO Auto-generated method stub

						pop.dismiss();
						isShow = false;
						et_username.setText(name);
						return true;
					}
				});

				holder.ibtn.setOnClickListener(new OnClickListener() {

					@Override
					public void onClick(View v) {
						names.remove(position);
						adapter.notifyDataSetChanged();
					}
				});
			}
			return convertView;
		}

		class Holder {
			TextView tv;
			ImageButton ibtn;

			void setId(int position) {
				tv.setId(position);
				ibtn.setId(position);
			}
		}

	}
}

 

2个布局文件

 

main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <!-- 用户名 输入框 -->

    <EditText
        android:id="@+id/et_username"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:background="@drawable/username_edit"
        android:hint="@string/inputUsername"
        android:maxLength="20"
        android:paddingLeft="60.0dip"
        android:saveEnabled="true" />

    <!-- 用户名 -->

    <TextView
        android:id="@+id/tv_username"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/et_username"
        android:paddingLeft="7.0dip"
        android:text="@string/username"
        android:textColor="#ff3f3f3f"
        android:textSize="16.0dip" />

    <!-- 下拉按钮 -->

    <ImageButton
        android:id="@+id/ibtn_dropDown"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/et_username"
        android:layout_alignRight="@+id/et_username"
        android:layout_alignTop="@+id/et_username"
        android:layout_marginRight="1.0dip"
        android:background="@drawable/dropdown_select" />

</RelativeLayout>

 

popup.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/popup_linear"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:orientation="horizontal" >

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="3dip"
        android:src="@drawable/user" >
    </ImageView>

    <TextView
        android:id="@+id/tv_account"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="17dip"
        android:layout_weight="1" >
    </TextView>

    <ImageButton
        android:id="@+id/ibtn_delete"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="10dip"
        android:background="@drawable/delete" >
    </ImageButton>

</LinearLayout>

 

其他就没什么特殊的了。

 

强调自己的是：玩这些demo要注意自己android的版本 ，不然可能导入别人的项目到自己环境中跑不起来；如果这样可以试试自己拷贝代码到自己的项目中。

 

参考：

   http://gqdy365.iteye.com/blog/992340

   http://hhulijin.iteye.com/blog/1495082

 

 

这个demo还有一个地方就是背景图片的切换，用到了selector

 

  具体用法可以看：http://royal2xiaose.iteye.com/blog/1420162

 

 

评论

5 楼 萧_瑟 2012-10-12  

nottoobad 写道

建议把listview的onTouch事件改成onClick，这样当列表很长的时候就不会看不到下面的项

原来会这样啊，这还没试过，谢谢您的建议.

4 楼 nottoobad 2012-10-11  

建议把listview的onTouch事件改成onClick，这样当列表很长的时候就不会看不到下面的项

3 楼 萧_瑟 2012-10-08  

gao18bin 写道

仁兄！非常感谢啊，你的demo非常有用，有空请你吃饭啊

哈哈，有点小感动..

2 楼 gao18bin 2012-09-28  

仁兄！非常感谢啊，你的demo非常有用，有空请你吃饭啊

1 楼 zhengyao 2012-04-28  

mark！！！