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

在Android里，直接提供的Spinner控件虽然可以实现下拉菜单的效果，但其效果并不理想，很多时候我们需要类似手机QQ那样既可以在文本框中直接输入编辑文字，可以在下拉菜单中选中或者删除菜单选项，并且下拉菜单并不是以遮罩整个手机屏幕方式，而是以浮动在屏幕上的效果出现。下面呢，就来实现一下这些效果。

最后效果为：      

此次主要以EdiText、PopupWindow、ListView及Adapter来实现这种下拉效果。具体实现步骤就不一步步详细介绍了，直接贴完整代码吧，注释比较详细，相信都能看得懂。

//主界面Activity代码：

[html] view plain copy print ?

1. public class SelectActivity extends Activity implements Callback { 
2.     //PopupWindow对象 
3.     private PopupWindow selectPopupWindow= null; 
4.     //自定义Adapter 
5.     private OptionsAdapter optionsAdapter = null; 
6.     //下拉框选项数据源 
7.     private ArrayList<String> datas = new ArrayList<String>();;  
8.     //下拉框依附组件 
9.     private LinearLayout parent; 
10.     //下拉框依附组件宽度，也将作为下拉框的宽度 
11.     private int pwidth;  
12.     //文本框 
13.     private EditText et; 
14.     //下拉箭头图片组件 
15.     private ImageView image; 
16.     //恢复数据源按钮 
17.     private Button button; 
18.     //展示所有下拉选项的ListView 
19.     private ListView listView = null;  
20.     //用来处理选中或者删除下拉项消息 
21.     private Handler handler; 
22.     //是否初始化完成标志   
23.     private boolean flag = false; 
24.      
25.     @Override 
26.     public void onCreate(Bundle savedInstanceState) { 
27.         super.onCreate(savedInstanceState); 
28.         setContentView(R.layout.select); 
29.     } 
30.  
31.     /** 
32.      * 没有在onCreate方法中调用initWedget()，而是在onWindowFocusChanged方法中调用， 
33.      * 是因为initWedget()中需要获取PopupWindow浮动下拉框依附的组件宽度，在onCreate方法中是无法获取到该宽度的 
34.      */ 
35.     @Override 
36.     public void onWindowFocusChanged(boolean hasFocus) { 
37.         super.onWindowFocusChanged(hasFocus); 
38.         while(!flag){ 
39.             initWedget(); 
40.             flag = true; 
41.         } 
42.          
43.     } 
44.      
45.     /** 
46.      * 初始化界面控件 
47.      */ 
48.     private void initWedget(){ 
49.         //初始化Handler,用来处理消息 
50.         handler = new Handler(SelectActivity.this); 
51.          
52.         //初始化界面组件 
53.         parent = (LinearLayout)findViewById(R.id.parent); 
54.         et = (EditText)findViewById(R.id.edittext); 
55.         image = (ImageView)findViewById(R.id.btn_select); 
56.          
57.          
58.         //获取下拉框依附的组件宽度 
59.         int width = parent.getWidth(); 
60.         pwidth = width; 
61.          
62.         //设置点击下拉箭头图片事件，点击弹出PopupWindow浮动下拉框 
63.         image.setOnClickListener(new View.OnClickListener() { 
64.             @Override 
65.             public void onClick(View v) { 
66.                 if(flag){ 
67.                     //显示PopupWindow窗口 
68.                     popupWindwShowing(); 
69.                 } 
70.             } 
71.         }); 
72.          
73.         //初始化PopupWindow 
74.         initPopuWindow(); 
75.          
76.         button = (Button)findViewById(R.id.refresh); 
77.         //设置点击事件，恢复下拉框列表数据，没有什么作用，纯粹是为了方便多看几次效果而设置 
78.         button.setOnClickListener(new View.OnClickListener() { 
79.             @Override 
80.             public void onClick(View v) { 
81.                 initDatas(); 
82.                 optionsAdapter.notifyDataSetChanged(); 
83.             } 
84.         }); 
85.     } 
86.  
87.     /** 
88.      * 初始化填充Adapter所用List数据 
89.      */ 
90.     private void initDatas(){ 
91.          
92.          datas.clear(); 
93.           
94.          datas.add("北京"); 
95.          datas.add("上海"); 
96.          datas.add("广州"); 
97.          datas.add("深圳"); 
98.          datas.add("重庆"); 
99.          datas.add("青岛"); 
100.          datas.add("石家庄"); 
101.     } 
102.      
103.      /** 
104.      * 初始化PopupWindow 
105.      */  
106.     private void initPopuWindow(){  
107.          
108.         initDatas(); 
109.          
110.         //PopupWindow浮动下拉框布局 
111.         View loginwindow = (View)this.getLayoutInflater().inflate(R.layout.options, null);  
112.         listView = (ListView) loginwindow.findViewById(R.id.list);  
113.          
114.         //设置自定义Adapter 
115.         optionsAdapter = new OptionsAdapter(this, handler,datas);  
116.         listView.setAdapter(optionsAdapter);  
117.          
118.         selectPopupWindow = new PopupWindow(loginwindow, pwidth,LayoutParams.WRAP_CONTENT, true);  
119.          
120.         selectPopupWindow.setOutsideTouchable(true);  
121.          
122.         //这一句是为了实现弹出PopupWindow后，当点击屏幕其他部分及Back键时PopupWindow会消失， 
123.         //没有这一句则效果不能出来，但并不会影响背景 
124.         //本人能力极其有限，不明白其原因，还望高手、知情者指点一下 
125.         selectPopupWindow.setBackgroundDrawable(new BitmapDrawable());   
126.     }  
127.  
128.      
129.      
130.     /** 
131.      * 显示PopupWindow窗口 
132.      *  
133.      * @param popupwindow 
134.      */  
135.     public void popupWindwShowing() {  
136.        //将selectPopupWindow作为parent的下拉框显示，并指定selectPopupWindow在Y方向上向上偏移3pix， 
137.        //这是为了防止下拉框与文本框之间产生缝隙，影响界面美化 
138.        //（是否会产生缝隙，及产生缝隙的大小，可能会根据机型、Android系统版本不同而异吧，不太清楚） 
139.        selectPopupWindow.showAsDropDown(parent,0,-3);  
140.     }  
141.       
142.     /** 
143.      * PopupWindow消失 
144.      */  
145.     public void dismiss(){  
146.         selectPopupWindow.dismiss();  
147.     } 
148.  
149.     /** 
150.      * 处理Hander消息 
151.      */ 
152.     @Override 
153.     public boolean handleMessage(Message message) { 
154.         Bundle data = message.getData(); 
155.         switch(message.what){ 
156.             case 1: 
157.                 //选中下拉项，下拉框消失 
158.                 int selIndex = data.getInt("selIndex"); 
159.                 et.setText(datas.get(selIndex)); 
160.                 dismiss(); 
161.                 break; 
162.             case 2: 
163.                 //移除下拉项数据 
164.                 int delIndex = data.getInt("delIndex"); 
165.                 datas.remove(delIndex); 
166.                 //刷新下拉列表 
167.                 optionsAdapter.notifyDataSetChanged(); 
168.                 break; 
169.         } 
170.         return false; 
171.     }  
172. } 

public class SelectActivity extends Activity implements Callback {
	//PopupWindow对象
	private PopupWindow selectPopupWindow= null;
	//自定义Adapter
	private OptionsAdapter optionsAdapter = null;
	//下拉框选项数据源
	private ArrayList<String> datas = new ArrayList<String>();; 
	//下拉框依附组件
	private LinearLayout parent;
	//下拉框依附组件宽度，也将作为下拉框的宽度
	private int pwidth; 
	//文本框
	private EditText et;
	//下拉箭头图片组件
	private ImageView image;
	//恢复数据源按钮
	private Button button;
	//展示所有下拉选项的ListView
	private ListView listView = null; 
	//用来处理选中或者删除下拉项消息
	private Handler handler;
	//是否初始化完成标志  
	private boolean flag = false;
	
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.select);
    }

    /**
     * 没有在onCreate方法中调用initWedget()，而是在onWindowFocusChanged方法中调用，
     * 是因为initWedget()中需要获取PopupWindow浮动下拉框依附的组件宽度，在onCreate方法中是无法获取到该宽度的
     */
	@Override
	public void onWindowFocusChanged(boolean hasFocus) {
		super.onWindowFocusChanged(hasFocus);
		while(!flag){
			initWedget();
			flag = true;
		}
		
	}
	
	/**
	 * 初始化界面控件
	 */
	private void initWedget(){
		//初始化Handler,用来处理消息
		handler = new Handler(SelectActivity.this);
		
		//初始化界面组件
		parent = (LinearLayout)findViewById(R.id.parent);
		et = (EditText)findViewById(R.id.edittext);
		image = (ImageView)findViewById(R.id.btn_select);
		
		
		//获取下拉框依附的组件宽度
        int width = parent.getWidth();
        pwidth = width;
        
        //设置点击下拉箭头图片事件，点击弹出PopupWindow浮动下拉框
        image.setOnClickListener(new View.OnClickListener() {
			@Override
			public void onClick(View v) {
				if(flag){
					//显示PopupWindow窗口
					popupWindwShowing();
				}
			}
		});
        
        //初始化PopupWindow
        initPopuWindow();
        
        button = (Button)findViewById(R.id.refresh);
        //设置点击事件，恢复下拉框列表数据，没有什么作用，纯粹是为了方便多看几次效果而设置
		button.setOnClickListener(new View.OnClickListener() {
			@Override
			public void onClick(View v) {
				initDatas();
				optionsAdapter.notifyDataSetChanged();
			}
		});
	}

	/**
	 * 初始化填充Adapter所用List数据
	 */
	private void initDatas(){
		
		 datas.clear();
		 
		 datas.add("北京");
         datas.add("上海");
         datas.add("广州");
         datas.add("深圳");
         datas.add("重庆");
         datas.add("青岛");
         datas.add("石家庄");
	}
	
	 /**
     * 初始化PopupWindow
     */ 
    private void initPopuWindow(){ 
    	
    	initDatas();
    	
    	//PopupWindow浮动下拉框布局
        View loginwindow = (View)this.getLayoutInflater().inflate(R.layout.options, null); 
        listView = (ListView) loginwindow.findViewById(R.id.list); 
        
        //设置自定义Adapter
        optionsAdapter = new OptionsAdapter(this, handler,datas); 
        listView.setAdapter(optionsAdapter); 
        
        selectPopupWindow = new PopupWindow(loginwindow, pwidth,LayoutParams.WRAP_CONTENT, true); 
        
        selectPopupWindow.setOutsideTouchable(true); 
        
        //这一句是为了实现弹出PopupWindow后，当点击屏幕其他部分及Back键时PopupWindow会消失，
        //没有这一句则效果不能出来，但并不会影响背景
        //本人能力极其有限，不明白其原因，还望高手、知情者指点一下
        selectPopupWindow.setBackgroundDrawable(new BitmapDrawable());  
    } 

	
	
	/**
     * 显示PopupWindow窗口
     * 
     * @param popupwindow
     */ 
    public void popupWindwShowing() { 
       //将selectPopupWindow作为parent的下拉框显示，并指定selectPopupWindow在Y方向上向上偏移3pix，
       //这是为了防止下拉框与文本框之间产生缝隙，影响界面美化
       //（是否会产生缝隙，及产生缝隙的大小，可能会根据机型、Android系统版本不同而异吧，不太清楚）
       selectPopupWindow.showAsDropDown(parent,0,-3); 
    } 
     
    /**
     * PopupWindow消失
     */ 
    public void dismiss(){ 
        selectPopupWindow.dismiss(); 
    }

    /**
     * 处理Hander消息
     */
	@Override
	public boolean handleMessage(Message message) {
		Bundle data = message.getData();
		switch(message.what){
			case 1:
				//选中下拉项，下拉框消失
				int selIndex = data.getInt("selIndex");
				et.setText(datas.get(selIndex));
				dismiss();
				break;
			case 2:
				//移除下拉项数据
				int delIndex = data.getInt("delIndex");
				datas.remove(delIndex);
				//刷新下拉列表
				optionsAdapter.notifyDataSetChanged();
				break;
		}
		return false;
	} 
}

自定义适配器Adapter代码：

[java] view plain copy print ?

1. public class OptionsAdapter extends BaseAdapter { 
2.  
3.     private ArrayList<String> list = new ArrayList<String>();  
4.     private Activity activity = null;  
5.     private Handler handler; 
6.      
7.     /**
8.      * 自定义构造方法
9.      * @param activity
10.      * @param handler
11.      * @param list
12.      */ 
13.     public OptionsAdapter(Activity activity,Handler handler,ArrayList<String> list){ 
14.         this.activity = activity; 
15.         this.handler = handler; 
16.         this.list = list; 
17.     } 
18.      
19.     @Override 
20.     public int getCount() { 
21.         return list.size(); 
22.     } 
23.  
24.     @Override 
25.     public Object getItem(int position) { 
26.         return list.get(position); 
27.     } 
28.  
29.     @Override 
30.     public long getItemId(int position) { 
31.         return position; 
32.     } 
33.  
34.     @Override 
35.     public View getView(final int position, View convertView, ViewGroup parent) { 
36.         ViewHolder holder = null;  
37.         if (convertView == null) {  
38.             holder = new ViewHolder();  
39.             //下拉项布局 
40.             convertView = LayoutInflater.from(activity).inflate(R.layout.option_item, null);  
41.             holder.textView = (TextView) convertView.findViewById(R.id.item_text);  
42.             holder.imageView = (ImageView) convertView.findViewById(R.id.delImage);  
43.              
44.             convertView.setTag(holder);  
45.         } else {  
46.             holder = (ViewHolder) convertView.getTag();  
47.         }  
48.          
49.         holder.textView.setText(list.get(position)); 
50.          
51.         //为下拉框选项文字部分设置事件，最终效果是点击将其文字填充到文本框 
52.         holder.textView.setOnClickListener(new View.OnClickListener() { 
53.             @Override 
54.             public void onClick(View v) { 
55.                 Message msg = new Message(); 
56.                 Bundle data = new Bundle(); 
57.                 //设置选中索引 
58.                 data.putInt("selIndex", position); 
59.                 msg.setData(data); 
60.                 msg.what = 1; 
61.                 //发出消息 
62.                 handler.sendMessage(msg); 
63.             } 
64.         }); 
65.          
66.         //为下拉框选项删除图标部分设置事件，最终效果是点击将该选项删除 
67.         holder.imageView.setOnClickListener(new View.OnClickListener() { 
68.             @Override 
69.             public void onClick(View v) { 
70.                 Message msg = new Message(); 
71.                 Bundle data = new Bundle(); 
72.                 //设置删除索引 
73.                 data.putInt("delIndex", position); 
74.                 msg.setData(data); 
75.                 msg.what = 2; 
76.                 //发出消息 
77.                 handler.sendMessage(msg); 
78.             } 
79.         }); 
80.          
81.         return convertView;  
82.     } 
83.  
84. } 
85.  
86.  
87. class ViewHolder {  
88.     TextView textView;  
89.     ImageView imageView;  
90. }  

public class OptionsAdapter extends BaseAdapter {

	private ArrayList<String> list = new ArrayList<String>(); 
    private Activity activity = null; 
	private Handler handler;
    
	/**
	 * 自定义构造方法
	 * @param activity
	 * @param handler
	 * @param list
	 */
    public OptionsAdapter(Activity activity,Handler handler,ArrayList<String> list){
    	this.activity = activity;
    	this.handler = handler;
    	this.list = list;
    }
	
	@Override
	public int getCount() {
		return list.size();
	}

	@Override
	public Object getItem(int position) {
		return list.get(position);
	}

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

	@Override
	public View getView(final int position, View convertView, ViewGroup parent) {
		ViewHolder holder = null; 
        if (convertView == null) { 
            holder = new ViewHolder(); 
            //下拉项布局
            convertView = LayoutInflater.from(activity).inflate(R.layout.option_item, null); 
            holder.textView = (TextView) convertView.findViewById(R.id.item_text); 
            holder.imageView = (ImageView) convertView.findViewById(R.id.delImage); 
            
            convertView.setTag(holder); 
        } else { 
            holder = (ViewHolder) convertView.getTag(); 
        } 
        
        holder.textView.setText(list.get(position));
        
        //为下拉框选项文字部分设置事件，最终效果是点击将其文字填充到文本框
        holder.textView.setOnClickListener(new View.OnClickListener() {
			@Override
			public void onClick(View v) {
				Message msg = new Message();
				Bundle data = new Bundle();
				//设置选中索引
				data.putInt("selIndex", position);
				msg.setData(data);
				msg.what = 1;
				//发出消息
				handler.sendMessage(msg);
			}
		});
        
        //为下拉框选项删除图标部分设置事件，最终效果是点击将该选项删除
        holder.imageView.setOnClickListener(new View.OnClickListener() {
			@Override
			public void onClick(View v) {
				Message msg = new Message();
				Bundle data = new Bundle();
				//设置删除索引
				data.putInt("delIndex", position);
				msg.setData(data);
				msg.what = 2;
				//发出消息
				handler.sendMessage(msg);
			}
		});
        
        return convertView; 
	}

}


class ViewHolder { 
    TextView textView; 
    ImageView imageView; 
} 

主界面布局select.xml文件：

[html] view plain copy print ?

1. <?xml version="1.0" encoding="utf-8"?> 
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
3.     android:orientation="vertical" 
4.     android:layout_width="fill_parent" 
5.     android:layout_height="fill_parent" 
6.     android:background="#EEEED1" 
7.     > 
8. <LinearLayout android:id="@+id/parent" android:layout_width="wrap_content"  

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#EEEED1"
    >
<LinearLayout android:id="@+id/parent" android:layout_width="wrap_content" 

[html] view plain copy print ?

1. android:layout_height="wrap_content" android:orientation="horizontal"  

	android:layout_height="wrap_content" android:orientation="horizontal" 

[html] view plain copy print ?

1.      android:layout_marginTop="50dp" android:layout_marginLeft="30dp"> 
2. <EditText android:id="@+id/edittext" android:layout_width="200dp"  android:singleLine="true" 
3.     android:layout_height="40dp" android:background="@drawable/bg1" android:paddingLeft="3dp"/> 
4. <ImageView android:id="@+id/btn_select" android:layout_width="30dp" android:layout_height="40dp"  
5.     android:src="@drawable/img1" android:scaleType="fitXY"/> 
6. </LinearLayout> 
7. <Button android:id="@+id/refresh" android:layout_width="wrap_content" android:layout_height="45dp" 
8.     android:text="恢复" android:textColor="#000000" android:textSize="20sp"  

	 android:layout_marginTop="50dp" android:layout_marginLeft="30dp">
<EditText android:id="@+id/edittext" android:layout_width="200dp"  android:singleLine="true"
    android:layout_height="40dp" android:background="@drawable/bg1" android:paddingLeft="3dp"/>
<ImageView android:id="@+id/btn_select" android:layout_width="30dp" android:layout_height="40dp" 
	android:src="@drawable/img1" android:scaleType="fitXY"/>
</LinearLayout>
<Button android:id="@+id/refresh" android:layout_width="wrap_content" android:layout_height="45dp"
	android:text="恢复" android:textColor="#000000" android:textSize="20sp" 

[html] view plain copy print ?

1. android:layout_marginTop="30dp" android:layout_marginLeft="30dp"/> 
2. lt;/LinearLayout> 

	android:layout_marginTop="30dp" android:layout_marginLeft="30dp"/>
</LinearLayout>

PopupWindow浮动下拉框布局options.xml文件：

[html] view plain copy print ?

1. <?xml version="1.0" encoding="utf-8"?> 
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
3.     android:orientation="vertical" 
4.     android:layout_width="fill_parent" 
5.     android:layout_height="wrap_content" 
6.     android:gravity="center_horizontal" 
7.     > 
8. <ListView android:id="@+id/list" android:layout_width="fill_parent" 
9.     android:layout_height="wrap_content" android:cacheColorHint="#00000000"> 
10. </ListView> 
11. </LinearLayout> 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal"
    >
<ListView android:id="@+id/list" android:layout_width="fill_parent"
    android:layout_height="wrap_content" android:cacheColorHint="#00000000">
</ListView>
</LinearLayout>

下拉选项布局option_item.xml文件：

[html] view plain copy print ?

1. <?xml version="1.0" encoding="utf-8"?> 
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
3.     android:layout_width="fill_parent" 
4.     android:layout_height="fill_parent" 
5.     android:background="#235654" 
6.     > 
7. <RelativeLayout 
8.     android:layout_width="wrap_content" 
9.     android:layout_height="wrap_content" 
10.     android:gravity="center_vertical" 
11.     android:minHeight="40dp" 
12.     > 
13. <ImageView android:id="@+id/delImage" android:layout_width="20dp" 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#235654"
    >
<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:minHeight="40dp"
    >
<ImageView android:id="@+id/delImage" android:layout_width="20dp"

[html] view plain copy print ?

1.      android:layout_height="wrap_content" android:src="@drawable/del" android:textSize="18sp" 
2.     android:layout_alignParentRight="true" android:layout_marginRight="10dp"/> 
3. <TextView android:id="@+id/item_text"  android:layout_height="wrap_content" 
4.      android:layout_width="fill_parent" android:layout_toLeftOf="@id/delImage" 
5.       android:paddingLeft="5dp" android:layout_alignParentLeft="true"></TextView> 
6. </RelativeLayout> 
7. </LinearLayout> 

	 android:layout_height="wrap_content" android:src="@drawable/del" android:textSize="18sp"
	android:layout_alignParentRight="true" android:layout_marginRight="10dp"/>
<TextView android:id="@+id/item_text"  android:layout_height="wrap_content"
	 android:layout_width="fill_parent" android:layout_toLeftOf="@id/delImage"
	  android:paddingLeft="5dp" android:layout_alignParentLeft="true"></TextView>
</RelativeLayout>
</LinearLayout>

 

 转自：http://blog.csdn.net/zw_yuyan/article/details/7734736