【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的使用!!!