android弹出窗口的实现（PopupWindow）

最近看到 新浪微博顶部栏的微博分组效果很炫，从网上查了一些资料明白原来是用PopupWindow实现的，今天自己也写了一个例子实现了这种效果，希望对大家有帮助。

         PopupWindow就是弹出窗口的意思，类似windows下面的开始按钮。PopupWindow可以实现浮层效果，而且可以自定义显示位置，出现和退出时的动画.

            首先定义新浪微博的顶部栏,title_two_button.xml和main.xml

      

[html] view plain copy print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="wrap_content" >  
5.   
6.     <TextView  
7.         android:id="@+id/tvtitle"  
8.         android:layout_width="fill_parent"  
9.         android:layout_height="45dip"  
10.         android:background="@drawable/search_bg"  
11.         android:gravity="center"  
12.         android:text="天堂没有路"  
13.         android:textColor="@color/black"  
14.         android:textSize="25dip" />  
15.   
16.     <Button  
17.         android:id="@+id/btn_title_left"  
18.         android:layout_width="50dip"  
19.         android:layout_height="35dip"  
20.         android:layout_gravity="center_vertical"  
21.         android:background="@drawable/title_button"  
22.         android:textColor="@color/white" />  
23.   
24.     <Button  
25.         android:id="@+id/btn_title_right"  
26.         android:layout_width="50dip"  
27.         android:layout_height="35dip"  
28.         android:layout_gravity="right"  
29.         android:layout_marginRight="2dip"  
30.         android:layout_marginTop="4dip"  
31.         android:background="@drawable/title_button2"  
32.         android:textColor="@color/white" />  
33.   
34. </FrameLayout>  

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

    <TextView
        android:id="@+id/tvtitle"
        android:layout_width="fill_parent"
        android:layout_height="45dip"
        android:background="@drawable/search_bg"
        android:gravity="center"
        android:text="天堂没有路"
        android:textColor="@color/black"
        android:textSize="25dip" />

    <Button
        android:id="@+id/btn_title_left"
        android:layout_width="50dip"
        android:layout_height="35dip"
        android:layout_gravity="center_vertical"
        android:background="@drawable/title_button"
        android:textColor="@color/white" />

    <Button
        android:id="@+id/btn_title_right"
        android:layout_width="50dip"
        android:layout_height="35dip"
        android:layout_gravity="right"
        android:layout_marginRight="2dip"
        android:layout_marginTop="4dip"
        android:background="@drawable/title_button2"
        android:textColor="@color/white" />

</FrameLayout>

[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="@android:color/white"  
6.     android:orientation="vertical" >  
7.   
8.     <include  
9.         android:id="@+id/top_title"  
10.         layout="@layout/title_two_button" />  
11.   
12. </LinearLayout>  

<?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="@android:color/white"
    android:orientation="vertical" >

    <include
        android:id="@+id/top_title"
        layout="@layout/title_two_button" />

</LinearLayout>

主要是为了实现一个这样的界面：

接下来定义弹出对话框的布局文件group_list.xml和group_item_view.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="@drawable/group_bg"  
6.     android:orientation="vertical"  
7.      >  
8.   
9.   
10.     <ImageView  
11.         android:id="@+id/iv_group_list_bg_divider"  
12.         android:layout_width="fill_parent"  
13.         android:layout_height="wrap_content"  
14.         android:background="@drawable/group_divider"  
15.          />  
16.   
17.     <ListView  
18.         android:id="@+id/lvGroup"  
19.         android:layout_width="fill_parent"  
20.         android:layout_height="fill_parent"  
21.         android:divider="@drawable/group_divider"  
22.           />  
23.   
24. </LinearLayout>  

<?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="@drawable/group_bg"
    android:orientation="vertical"
     >


    <ImageView
        android:id="@+id/iv_group_list_bg_divider"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/group_divider"
         />

    <ListView
        android:id="@+id/lvGroup"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:divider="@drawable/group_divider"
          />

</LinearLayout>

[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="@dimen/group_item_height"  
5.     android:orientation="vertical" >  
6.   
7.     <TextView  
8.         android:id="@+id/groupItem"  
9.        android:textColor="#ffffff"  
10.        android:textSize="18dp"  
11.         android:layout_width="fill_parent"  
12.         android:layout_height="fill_parent"  
13.         android:gravity="center" />  
14.   
15. </LinearLayout>  

<?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="@dimen/group_item_height"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/groupItem"
       android:textColor="#ffffff"
       android:textSize="18dp"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center" />

</LinearLayout>

自定义一个适配器：GroupAdapter

[html] view plain copy print ?

1. import java.util.List;  
2.   
3. import cn.com.karl.popwindow.R;  
4.   
5.   
6. import android.content.Context;  
7. import android.graphics.Color;  
8. import android.view.LayoutInflater;  
9. import android.view.View;  
10. import android.view.ViewGroup;  
11. import android.widget.BaseAdapter;  
12. import android.widget.TextView;  
13.   
14. public class GroupAdapter extends BaseAdapter {  
15.   
16.     private Context context;  
17.   
18.     private List<String> list;  
19.   
20.     public GroupAdapter(Context context, List<String> list) {  
21.   
22.         this.context = context;  
23.         this.list = list;  
24.   
25.     }  
26.   
27.     @Override  
28.     public int getCount() {  
29.         return list.size();  
30.     }  
31.   
32.     @Override  
33.     public Object getItem(int position) {  
34.   
35.         return list.get(position);  
36.     }  
37.   
38.     @Override  
39.     public long getItemId(int position) {  
40.         return position;  
41.     }  
42.   
43.     @Override  
44.     public View getView(int position, View convertView, ViewGroup viewGroup) {  
45.   
46.           
47.         ViewHolder holder;  
48.         if (convertView==null) {  
49.             convertView=LayoutInflater.from(context).inflate(R.layout.group_item_view, null);  
50.             holder=new ViewHolder();  
51.               
52.             convertView.setTag(holder);  
53.               
54.             holder.groupItem=(TextView) convertView.findViewById(R.id.groupItem);  
55.               
56.         }  
57.         else{  
58.             holder=(ViewHolder) convertView.getTag();  
59.         }  
60.         holder.groupItem.setTextColor(Color.BLACK);  
61.         holder.groupItem.setText(list.get(position));  
62.           
63.         return convertView;  
64.     }  
65.   
66.     static class ViewHolder {  
67.         TextView groupItem;  
68.     }  
69.   
70. }  

import java.util.List;

import cn.com.karl.popwindow.R;


import android.content.Context;
import android.graphics.Color;
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 {

	private Context context;

	private List<String> list;

	public GroupAdapter(Context context, List<String> list) {

		this.context = context;
		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(int position, View convertView, ViewGroup viewGroup) {

		
		ViewHolder holder;
		if (convertView==null) {
			convertView=LayoutInflater.from(context).inflate(R.layout.group_item_view, null);
			holder=new ViewHolder();
			
			convertView.setTag(holder);
			
			holder.groupItem=(TextView) convertView.findViewById(R.id.groupItem);
			
		}
		else{
			holder=(ViewHolder) convertView.getTag();
		}
		holder.groupItem.setTextColor(Color.BLACK);
		holder.groupItem.setText(list.get(position));
		
		return convertView;
	}

	static class ViewHolder {
		TextView groupItem;
	}

}

最后是我要实现弹出对话框的核心类PoupWindowDemoActivity

[html] view plain copy print ?

1. import java.util.ArrayList;  
2. import java.util.List;  
3.   
4.   
5. import cn.com.karl.adapter.GroupAdapter;  
6.   
7. import android.app.Activity;  
8. import android.content.Context;  
9. import android.graphics.drawable.BitmapDrawable;  
10. import android.os.Bundle;  
11. import android.util.Log;  
12. import android.view.LayoutInflater;  
13. import android.view.View;  
14. import android.view.Window;  
15. import android.view.WindowManager;  
16. import android.widget.AdapterView;  
17. import android.widget.AdapterView.OnItemClickListener;  
18. import android.widget.ListView;  
19. import android.widget.PopupWindow;  
20. import android.widget.TextView;  
21. import android.widget.Toast;  
22.   
23. public class PoupWindowDemoActivity extends Activity {  
24.   
25.     private PopupWindow popupWindow;  
26.   
27.     private ListView lv_group;  
28.   
29.     private View view;  
30.   
31.     private View top_title;  
32.   
33.     private TextView tvtitle;  
34.   
35.     private List<String> groups;  
36.   
37.     public void onCreate(Bundle savedInstanceState) {  
38.         super.onCreate(savedInstanceState);  
39.         this.requestWindowFeature(Window.FEATURE_NO_TITLE);  
40.         setContentView(R.layout.main);  
41.   
42.         top_title = this.findViewById(R.id.top_title);  
43.   
44.         tvtitle = (TextView) top_title.findViewById(R.id.tvtitle);  
45.   
46.         tvtitle.setText("天堂没有路");  
47.   
48.         tvtitle.setOnClickListener(new View.OnClickListener() {  
49.   
50.             @Override  
51.             public void onClick(View v) {  
52.                 showWindow(v);  
53.             }  
54.         });  
55.   
56.     }  
57.   
58.       
59.     private void showWindow(View parent) {  
60.   
61.         if (popupWindow == null) {  
62.             LayoutInflater layoutInflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);  
63.   
64.             view = layoutInflater.inflate(R.layout.group_list, null);  
65.   
66.             lv_group = (ListView) view.findViewById(R.id.lvGroup);  
67.             // 加载数据  
68.             groups = new ArrayList<String>();  
69.             groups.add("全部");  
70.             groups.add("我的微博");  
71.             groups.add("好友");  
72.             groups.add("亲人");  
73.             groups.add("同学");  
74.             groups.add("朋友");  
75.             groups.add("陌生人");  
76.   
77.             GroupAdapter groupAdapter = new GroupAdapter(this, groups);  
78.             lv_group.setAdapter(groupAdapter);  
79.             // 创建一个PopuWidow对象  
80.             popupWindow = new PopupWindow(view, 300, 350);  
81.         }  
82.   
83.         // 使其聚集  
84.         popupWindow.setFocusable(true);  
85.         // 设置允许在外点击消失  
86.         popupWindow.setOutsideTouchable(true);  
87.   
88.         // 这个是为了点击“返回Back”也能使其消失，并且并不会影响你的背景  
89.         popupWindow.setBackgroundDrawable(new BitmapDrawable());  
90.         WindowManager windowManager = (WindowManager) getSystemService(Context.WINDOW_SERVICE);  
91.         // 显示的位置为:屏幕的宽度的一半-PopupWindow的高度的一半  
92.         int xPos = windowManager.getDefaultDisplay().getWidth() / 2  
93.                 - popupWindow.getWidth() / 2;  
94.         Log.i("coder", "xPos:" + xPos);  
95.   
96.         popupWindow.showAsDropDown(parent, xPos, 0);  
97.   
98.         lv_group.setOnItemClickListener(new OnItemClickListener() {  
99.   
100.             @Override  
101.             public void onItemClick(AdapterView<?> adapterView, View view,  
102.                     int position, long id) {  
103.   
104.                 Toast.makeText(PoupWindowDemoActivity.this,  
105.                         groups.get(position), 1000)  
106.                         .show();  
107.   
108.                 if (popupWindow != null) {  
109.                     popupWindow.dismiss();  
110.                 }  
111.             }  
112.         });  
113.     }  
114. }  

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


import cn.com.karl.adapter.GroupAdapter;

import android.app.Activity;
import android.content.Context;
import android.graphics.drawable.BitmapDrawable;
import android.os.Bundle;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ListView;
import android.widget.PopupWindow;
import android.widget.TextView;
import android.widget.Toast;

public class PoupWindowDemoActivity extends Activity {

	private PopupWindow popupWindow;

	private ListView lv_group;

	private View view;

	private View top_title;

	private TextView tvtitle;

	private List<String> groups;

	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		this.requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.main);

		top_title = this.findViewById(R.id.top_title);

		tvtitle = (TextView) top_title.findViewById(R.id.tvtitle);

		tvtitle.setText("天堂没有路");

		tvtitle.setOnClickListener(new View.OnClickListener() {

			@Override
			public void onClick(View v) {
				showWindow(v);
			}
		});

	}

	
	private void showWindow(View parent) {

		if (popupWindow == null) {
			LayoutInflater layoutInflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);

			view = layoutInflater.inflate(R.layout.group_list, null);

			lv_group = (ListView) view.findViewById(R.id.lvGroup);
			// 加载数据
			groups = new ArrayList<String>();
			groups.add("全部");
			groups.add("我的微博");
			groups.add("好友");
			groups.add("亲人");
			groups.add("同学");
			groups.add("朋友");
			groups.add("陌生人");

			GroupAdapter groupAdapter = new GroupAdapter(this, groups);
			lv_group.setAdapter(groupAdapter);
			// 创建一个PopuWidow对象
			popupWindow = new PopupWindow(view, 300, 350);
		}

		// 使其聚集
		popupWindow.setFocusable(true);
		// 设置允许在外点击消失
		popupWindow.setOutsideTouchable(true);

		// 这个是为了点击“返回Back”也能使其消失，并且并不会影响你的背景
		popupWindow.setBackgroundDrawable(new BitmapDrawable());
		WindowManager windowManager = (WindowManager) getSystemService(Context.WINDOW_SERVICE);
		// 显示的位置为:屏幕的宽度的一半-PopupWindow的高度的一半
		int xPos = windowManager.getDefaultDisplay().getWidth() / 2
				- popupWindow.getWidth() / 2;
		Log.i("coder", "xPos:" + xPos);

		popupWindow.showAsDropDown(parent, xPos, 0);

		lv_group.setOnItemClickListener(new OnItemClickListener() {

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

				Toast.makeText(PoupWindowDemoActivity.this,
						groups.get(position), 1000)
						.show();

				if (popupWindow != null) {
					popupWindow.dismiss();
				}
			}
		});
	}
}

这样就完成了一个弹出对话框的效果，下面来看一下吧！

再看一张新浪微博的弹出对话框效果：