【Android学习专题】控件组件篇：PopupWindow
【Android学习专题】控件组件篇：PopupWindow
SkySeraph Feb 24th 2012 SZTCL
Email：zgzhaobo@gmail.com QQ：452728574
-------------------------------------------------------------------------------------------------------------------------------------------------------------
一、界面效果
运行界面
-------------------------------------------------------------------------------------------------------------------------------------------------------------
在博客园博文中该如何添加动画效果呢？ who knows，tell me，tks！o(∩_∩)o ``
-------------------------------------------------------------------------------------------------------------------------------------------------------------
二、知识点
1 PopupWindow & Dialog：
opupWindow是一个阻塞式的弹出框（在我们退出这个弹出框之前，程序会一直等待），Dialog非阻塞式弹出框（后台还可以做其他事情）
2 PopupWindow使用步骤总结
Ⅰ 自定义PopupWindow布局文件，并获取获取其实例
Ⅱ 创建PopupWindow对象，定义相关属性
Ⅲ PopupWindow界面显示
Ⅳ 响应自定义布局的事件
3 相关函数见源码注释
-------------------------------------------------------------------------------------------------------------------------------------------------------------
三、源码
1 布局文件(主)：popupwindow_demo.xml
View Code
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="wrap_content"
5 android:orientation="vertical" >
6
7 <TextView
8 android:layout_width="fill_parent"
9 android:layout_height="wrap_content"
10 android:gravity="center_horizontal"
11 android:paddingBottom="25dp"
12 android:paddingTop="15dp"
13 android:text="SkySeraph Android学习专题：PopupWindow"
14 android:textColor="#FFFF00"
15 android:textSize="15dp"
16 android:id="@+id/popupwindow_demo_TV">
17 </TextView>
18
19
20 <LinearLayout
21 android:layout_width="fill_parent"
22 android:layout_height="wrap_content"
23 android:orientation="vertical"
24 android:layout_gravity="center">
25
26 <Button
27 android:id="@+id/popupwindow_demo_btn01"
28 android:layout_width="fill_parent"
29 android:layout_height="wrap_content"
30 android:text="PopupWindow弹出对话框演示(动画)" >
31 </Button>
32
33
34 </LinearLayout>
35
36 </LinearLayout>
2 布局文件(自定义)：popupwindow_demo01.xml
View Code
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="wrap_content"
5 android:background="#000000"
6 android:orientation="vertical" >
7
8 <TextView
9 android:id="@+id/popupwindow_demo01_TVUsername"
10 android:layout_width="fill_parent"
11 android:layout_height="wrap_content"
12 android:layout_marginLeft="20dip"
13 android:layout_marginRight="20dip"
14 android:text="用户名"
15 android:textAppearance="?android:attr/textAppearanceMedium" />
16
17 <EditText
18 android:id="@+id/popupwindow_demo01_ETUername"
19 android:layout_width="fill_parent"
20 android:layout_height="wrap_content"
21 android:layout_marginLeft="20dip"
22 android:layout_marginRight="20dip"
23 android:capitalize="none"
24 android:textAppearance="?android:attr/textAppearanceMedium" />
25
26 <TextView
27 android:id="@+id/popupwindow_demo01_TVPassword"
28 android:layout_width="fill_parent"
29 android:layout_height="wrap_content"
30 android:layout_marginLeft="20dip"
31 android:layout_marginRight="20dip"
32 android:text="密码"
33 android:textAppearance="?android:attr/textAppearanceMedium" />
34
35 <EditText
36 android:id="@+id/popupwindow_demo01_ETPassword"
37 android:layout_width="fill_parent"
38 android:layout_height="wrap_content"
39 android:layout_marginLeft="20dip"
40 android:layout_marginRight="20dip"
41 android:capitalize="none"
42 android:password="true"
43 android:textAppearance="?android:attr/textAppearanceMedium"
44 android:inputType="numberSigned"/>
45
46 <LinearLayout
47 android:layout_width="fill_parent"
48 android:layout_height="wrap_content"
49 android:gravity="center" >
50
51 <Button
52 android:id="@+id/popupwindow_demo01_BtnOK"
53 android:layout_width="wrap_content"
54 android:layout_height="wrap_content"
55 android:layout_weight="60"
56 android:text="确定" >
57 </Button>
58
59 <Button
60 android:id="@+id/popupwindow_demo01_BtnCancel"
61 android:layout_width="wrap_content"
62 android:layout_height="wrap_content"
63 android:layout_weight="60"
64 android:text="取消" >
65 </Button>
66 </LinearLayout>
67
68 </LinearLayout>
3 java代码：popupwindow_demo.java
View Code
1 public class popupwindow_demo extends Activity
2 {
3 // //////////////////////////////////////////////////////////////////////////////
4 @Override
5 protected void onCreate(Bundle savedInstanceState)
6 {
7 // TODO Auto-generated method stub
8 super.onCreate(savedInstanceState);
9 setContentView(R.layout.popupwindow_demo);
10 findViews();
11 }
12
13 // //////////////////////////////////////////////////////////////////////////////
14 private void findViews()
15 {
16 Button btn1 = (Button) findViewById(R.id.popupwindow_demo_btn01);
17 btn1.setOnClickListener(new OnClickListener()
18 {
19 public void onClick(View v)
20 {
21 // TODO Auto-generated method stub
22 showPopupWindow1(popupwindow_demo.this,
23 popupwindow_demo.this.findViewById(R.id.popupwindow_demo_btn01));
24 return;
25 }
26 });
27 }
28 // //////////////////////////////////////////////////////////////////////////////
29
30
31 // //////////////////////////////////////////////////////////////////////////////
32 private void showPopupWindow1(Context context, View parent)
33 {
34 ///////////////////////////////////////////////////////
35 // 【Ⅰ】 获取自定义popupWindow布局文件
36 //方式一：
37 //LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
38 //final View vPopupWindow = inflater.inflate(R.layout.popupwindow_demo01, null, false);
39 //方式二：
40 final View vPopupWindow = getLayoutInflater().inflate(R.layout.popupwindow_demo01,
41 null,false); // 加载popupWindow的布局文件
42 vPopupWindow.setBackgroundColor(Color.GREEN); // 设置popupWindow的背景颜色
43
44 ///////////////////////////////////////////////////////
45 // 【Ⅱ】 创建PopupWindow实例
46 final PopupWindow pw = new PopupWindow(vPopupWindow, 300, 300, true);// 声明一个弹出框 ，最后一个参数和setFocusable对应
47 pw.setContentView(vPopupWindow); // 为弹出框设定自定义的布局
48 //pw.setBackgroundDrawable(getResources().getDrawable(R.drawable.rounded_corners_pop));//设置整个popupwindow的样式。
49 pw.setAnimationStyle(R.style.AnimationPreview); // 设置动画效果
50 pw.setFocusable(true); //默认为false,如果不设置为true，PopupWindow里面是获取不到焦点的，那么如果PopupWindow里面有输入框等的话就无法输入。
51
52 // /////////////////////////////////////////////////////
53 // 【Ⅲ】 显示popupWindow对话框
54 // 获取屏幕和对话框各自高宽
55 int screenWidth, screenHeight, dialgoWidth, dialgoheight;
56 screenWidth = popupwindow_demo.this.getWindowManager().getDefaultDisplay().getWidth();
57 screenHeight = popupwindow_demo.this.getWindowManager().getDefaultDisplay().getHeight();
58 dialgoWidth = pw.getWidth();
59 dialgoheight = pw.getHeight();
60 // pw.showAsDropDown(parent); //以自己为Anchor，不偏移
61 // pw.showAsDropDown(parent, (screenWidth-dialgoWidth)/2, 0);//以自己为Anchor，偏移(screenWidth-dialgoWidth)/2, 0)--按钮正下方
62 pw.showAtLocation(parent, Gravity.CENTER, 0, 0);// 以屏幕中心为参照，不偏移
63 // pw.showAtLocation(parent, Gravity.BOTTOM, 0, 0);//以屏幕左下角为参照
64 /* 注释：
65 * 【showAsDropDown & showAtLocation】
66 * showAsDropDown(View anchor)相对某个控件的位置（正左下方），无偏移
67 * showAsDropDown(View anchor, int xoff, intyoff) 相对某个控件的位置，有偏移（正数表示下方右边，负数表示（上方左边））
68 * showAtLocation(View parent,int gravity, int x, int y) gravity依靠父布局的位置如Gravity.CENTER x y 坐标值
69 */
70
71 ///////////////////////////////////////////////////////
72 // 【Ⅳ】自定义布局中的事件响应
73 // OK按钮及其处理事件
74 Button btnOK = (Button) vPopupWindow.findViewById(R.id.popupwindow_demo01_BtnOK);
75 btnOK.setOnClickListener(new OnClickListener()
76 {
77 @Override
78 public void onClick(View v)
79 {
80 TextView textView = (TextView)findViewById(R.id.popupwindow_demo_TV);
81 EditText edtUsername = (EditText) vPopupWindow.findViewById(R.id.popupwindow_demo01_ETUername);
82 edtUsername.setHint("请输入您的用户名!");
83 edtUsername.setInputType(InputType.TYPE_TEXT_FLAG_AUTO_CORRECT);
84 edtUsername.setInputType(InputType.TYPE_NULL); //不显示软键盘
85 EditText edtPassword = (EditText) vPopupWindow.findViewById(R.id.popupwindow_demo01_ETPassword);
86 edtPassword.setHint("请输入您的密码!");
87 textView.setText("你输入的用户名是：" + edtUsername.getText().toString() + "\n"
88 +"你输入的密码是："+edtPassword.getText().toString());
89 pw.dismiss();// 关闭
90 }
91 });
92 // Cancel按钮及其处理事件
93 Button btnCancel = (Button) vPopupWindow.findViewById(R.id.popupwindow_demo01_BtnCancel);
94 btnCancel.setOnClickListener(new OnClickListener()
95 {
96 @Override
97 public void onClick(View v)
98 {
99 pw.dismiss();// 关闭
100 }
101 });
102 ///////////////////////////////////////////////////////
103 }
104 // //////////////////////////////////////////////////////////////////////////////
105 }
4 动画效果：
View Code
1 <?xml version="1.0" encoding="utf-8"?>
2 <resources xmlns:android="http://schemas.android.com/apk/res/android">
3 <!-- popupwindow_demo 中动画文件 -->
4 <style name="AnimationPreview">
5 <item name="android:windowEnterAnimation">@anim/fade_in</item>
6 <item name="android:windowExitAnimation">@anim/fade_out</item>
7 </style>
8
9 </resources>
fade_in.xml
View Code
1 <set xmlns:android="http://schemas.android.com/apk/res/android" >
2
3 <scale
4 android:duration="700"
5 android:fillAfter="false"
6 android:fromXScale="0.0"
7 android:fromYScale="0.0"
8 android:interpolator="@android:anim/accelerate_decelerate_interpolator"
9 android:pivotX="50%"
10 android:pivotY="50%"
11 android:toXScale="1.0"
12 android:toYScale="1.0" />
13
14 </set>
fade_out.xml
View Code
1 <set xmlns:android="http://schemas.android.com/apk/res/android" >
2
3 <scale
4 android:duration="700"
5 android:fillAfter="false"
6 android:fromXScale="1.0"
7 android:fromYScale="1.0"
8 android:interpolator="@android:anim/accelerate_decelerate_interpolator"
9 android:pivotX="50%"
10 android:pivotY="50%"
11 android:toXScale="0.0"
12 android:toYScale="0.0" />
13
14 </set>
-------------------------------------------------------------------------------------------------------------------------------------------------------------
Refs：
2 Android高手进阶教程(十)之----Android PopupWindow的使用!!!
作者：skyseraph
出处：http://www.cnblogs.com/skyseraph/
更多精彩请直接访问SkySeraph个人站点：http://skyseraph.com//
Email/GTalk: zgzhaobo@gmail.com
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
