`
萧_瑟
  • 浏览: 160632 次
社区版块
存档分类
最新评论

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

 

 

  • 大小: 76.1 KB
  • 大小: 23.6 KB
分享到:
评论
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!!!

相关推荐

    Android 自定义可编辑下拉框

    "Android 自定义可编辑下拉框"是一个常见的需求,特别是在创建表单或者需要用户输入并选择特定值时。本教程将深入探讨如何实现这样一个功能,并提供已优化的代码和界面设计。 首先,我们来理解下拉框(Spinner)的...

    Android实现仿QQ登录可编辑下拉框

    在Android开发中,创建一个仿QQ登录的可编辑下拉框是一种常见的需求,它结合了EditText的文本输入功能和Spinner的下拉选择功能,同时提供了更友好的用户交互体验。本示例将通过使用EdiText、PopupWindow、ListView和...

    combox实现的可编辑下拉框

    本文将深入探讨如何使用JavaScript实现一个可编辑的下拉框,并阐述其核心知识点。 ### 1. 可编辑下拉框的概念 传统的下拉框允许用户从预定义的选项中进行选择,但不支持用户直接在框内输入自定义值。而可编辑...

    可编辑下拉框 动态修改添加下拉框选项

    参考别人文献 同时结合实际修改部分代码做出的一个可编辑的下拉框,并且修改过程同时会动态把没有的选项加入到下拉框中

    可编辑下拉框(html)

    可编辑下拉框,用javascript 实现

    Spinner下拉框Demo

    这个名为"Spinner下拉框Demo"的项目,显然是为了展示如何在Android应用中有效地使用Spinner控件。通过下载并运行这个Demo,开发者可以直观地了解Spinner的基本用法和功能。下面将详细介绍Spinner的使用方法以及可能...

    可编辑下拉框

    "可编辑下拉框"是一种交互式的UI组件,它结合了传统的下拉选择框与文本输入框的功能,允许用户既可以从中选择预设的选项,也可以自行输入新的内容。这种设计提高了用户体验,特别是当用户需要输入的数据可能不在预设...

    可编辑的下拉框 既可以编辑,又可以下拉选择

    可编辑的下拉框 既可以编辑,又可以下拉选择 很不错的

    可编辑下拉框.zip

    本示例中,我们探讨的主题是如何创建一个“可编辑下拉框”,它具备筛选、过滤和搜索功能,适用于选择国家等场景。这样的组件可以极大地提升用户体验,让用户能够更高效地找到他们需要的信息。 “可编辑下拉框”通常...

    可编辑下拉框 可以自动匹配

    在IT领域,尤其是在前端开发中,"可编辑下拉框 可以自动匹配"是一种常见的交互元素设计,它结合了输入框与下拉选择框的功能,提供了用户友好的数据筛选和输入体验。这种控件通常被称为`edSelect`,正如标签所示。...

    仿美团网团购搜索级联下拉框DEMO

    本DEMO——“仿美团网团购搜索级联下拉框”专注于提供一个类似美团网的多级选择搜索功能,这在Android应用开发中是一项常见的需求。这个DEMO通过实现级联下拉框,为用户提供了更高效、更直观的筛选和查找服务。 1. ...

    Android实现仿QQ登录可编辑下拉框 源码

    主要以EdiText、PopupWindow、ListView及Adapter来实现下拉效果,源码,如果没有资源分可以直接访问http://blog.csdn.net/zw_yuyan/article/details/7734736 完整的代码文档,或者我的bd文库...

    Android实现仿QQ登录可编辑下拉框源代码

    在Android开发中,创建一个仿QQ登录的可编辑下拉框是一项常见的需求,它不仅可以提供用户友好的界面,还能提高应用的用户体验。本教程将详细讲解如何实现这样一个功能,并通过源代码实例帮助开发者深入理解其工作...

    基于ASP.NET实现的可编辑的下拉框控件程序例子

    ASP.NET作为一种流行的Web应用程序框架,提供了丰富的服务器控件,其中可编辑的下拉框(DropDownList)控件是一个常用且功能强大的组件。本文将深入探讨如何在ASP.NET中实现一个可编辑的下拉框控件,并通过具体的...

    可编辑的下拉框(JavaScript)

    然而,随着Web应用的不断发展,用户对于交互性的需求越来越高,可编辑的下拉框应运而生。这种下拉框允许用户在选择现有选项的同时,还能自定义输入新的选项,极大地提升了用户体验。 **可编辑的下拉框实现原理** ...

    可编辑下拉框.动态加载数据

    现在可以编辑下拉框,可根据输入的内容重新加载下拉框的内容.令客户选择查找起来更方便. 使用方法.将此js复制到项目中.在用到需要编辑下拉框的jsp界面中引用此js.在body 属性里. 调用onload事件. ();"&gt; 测试方法:点击...

    自写js 仿下拉框 demo

    这个"自写js 仿下拉框 demo"项目就是这样一个例子,它通过JavaScript来模仿下拉框的功能,提供了更灵活的定制性。 首先,让我们了解一下JavaScript(简称JS)的基本概念。JS是一种轻量级的解释型编程语言,主要用于...

    bootstrap-select 下拉框demo(含多种样式)

    select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demo

    jQuery ajax 多级联动 下拉框 Demo

    ajax 实现 (全国,省,是,区....) N级联 Demo js: &lt;script type="text/javascript"&gt; $(function () { $.fn.CascadeSelect({ url: '/CascadeSelect/CascadeSelect.ashx', //返回Json数据的一般处理文件 idKey: ...

Global site tag (gtag.js) - Google Analytics