android popwindow实现左侧弹出菜单层

http://www.yoyong.com/archives/613

学习一下PopupWindow的浮层显示效果。

PopupWindow可以实现浮层效果，主要方法有：可以自定义view，通过LayoutInflator方法；可以出现和退出时显示动画；可以指定显示位置等。

为了将PopupWindow的多个功能展现并力求用简单的代码实现，编写了一个点击按钮左侧弹出菜单的功能，实现出现和退出时显示动画效果并点击其他区域时弹出层自动消失，效果图如下：

图-1 android 实现左侧弹出菜单的功能

源码：

1.PopwindowOnLeftActivity.java

view plain copy to clipboard print ?

1. package com.pop.main;  
2.   
3. import android.app.Activity;  
4. import android.os.Bundle;  
5. import android.view.MotionEvent;  
6. import android.view.View;  
7. import android.view.View.OnClickListener;  
8. import android.view.View.OnTouchListener;  
9. import android.widget.Button;  
10. import android.widget.PopupWindow;  
11.   
12. public class PopwindowOnLeftActivity extends Activity {  
13. // 声明PopupWindow对象的引用  
14. private PopupWindow popupWindow;  
15.   
16. /** Called when the activity is first created. */  
17. @Override  
18. public void onCreate(Bundle savedInstanceState) {  
19. super.onCreate(savedInstanceState);  
20. setContentView(R.layout.main);  
21. // 点击按钮弹出菜单  
22. Button pop = (Button) findViewById(R.id.popBtn);  
23. pop.setOnClickListener(popClick);  
24. }  
25. //点击弹出左侧菜单的显示方式  
26. OnClickListener popClick = new OnClickListener() {  
27.   
28. @Override  
29. public void onClick(View v) {  
30. // TODO Auto-generated method stub  
31. getPopupWindow();  
32. // 这里是位置显示方式,在按钮的左下角  
33. popupWindow.showAsDropDown(v);  
34. // 这里可以尝试其它效果方式,如popupWindow.showAsDropDown(v,  
35. // (screenWidth-dialgoWidth)/2, 0);  
36. // popupWindow.showAtLocation(findViewById(R.id.layout),  
37. // Gravity.CENTER, 0, 0);  
38. }  
39. };  
40.   
41. /** 
42. * 创建PopupWindow 
43. */  
44. protected void initPopuptWindow() {  
45. // TODO Auto-generated method stub  
46.   
47. // 获取自定义布局文件pop.xml的视图  
48. View popupWindow_view = getLayoutInflater().inflate(R.layout.pop, null,  
49. false);  
50. // 创建PopupWindow实例,200,150分别是宽度和高度  
51. popupWindow = new PopupWindow(popupWindow_view, 200, 150, true);  
52. // 设置动画效果  
53. popupWindow.setAnimationStyle(R.style.AnimationFade);  
54. //点击其他地方消失  
55. popupWindow_view.setOnTouchListener(new OnTouchListener() {  
56. @Override  
57. public boolean onTouch(View v, MotionEvent event) {  
58. // TODO Auto-generated method stub  
59. if (popupWindow != null && popupWindow.isShowing()) {  
60. popupWindow.dismiss();  
61. popupWindow = null;  
62. }  
63. return false;  
64. }  
65. });  
66. // pop.xml视图里面的控件  
67. Button open = (Button) popupWindow_view.findViewById(R.id.open);  
68. Button save = (Button) popupWindow_view.findViewById(R.id.save);  
69. Button close = (Button) popupWindow_view.findViewById(R.id.close);  
70. // pop.xml视图里面的控件触发的事件  
71. // 打开  
72. open.setOnClickListener(new OnClickListener() {  
73. @Override  
74. public void onClick(View v) {  
75. // TODO Auto-generated method stub  
76. // 这里可以执行相关操作  
77. System.out.println("打开操作");  
78. // 对话框消失  
79. popupWindow.dismiss();  
80. }  
81. });  
82. // 保存  
83. save.setOnClickListener(new OnClickListener() {  
84. @Override  
85. public void onClick(View v) {  
86. // TODO Auto-generated method stub  
87. // 这里可以执行相关操作  
88. System.out.println("保存操作");  
89. popupWindow.dismiss();  
90. }  
91. });  
92. // 关闭  
93. close.setOnClickListener(new OnClickListener() {  
94. @Override  
95. public void onClick(View v) {  
96. // TODO Auto-generated method stub  
97. // 这里可以执行相关操作  
98. System.out.println("关闭操作");  
99. popupWindow.dismiss();  
100. }  
101. });  
102.   
103. }  
104. /*** 
105. * 获取PopupWindow实例 
106. */  
107. private void getPopupWindow() {  
108.   
109. if (null != popupWindow) {  
110. popupWindow.dismiss();  
111. return;  
112. } else {  
113. initPopuptWindow();  
114. }  
115. }  
116. }  

主要界面

2.main.xml

view plain copy to clipboard 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:orientation="vertical" >  
6. <Button android:id="@+id/popBtn"  
7. android:layout_width="fill_parent"  
8. android:layout_height="wrap_content"  
9. android:text="@string/pop_left" />  
10. </LinearLayout>  

弹出层的布局

3.pop.xml

view plain copy to clipboard 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="@android:color/darker_gray">  
7. <Button android:id="@+id/open"  
8. android:layout_width="fill_parent"  
9. android:layout_height="wrap_content"  
10. android:background="@drawable/btn"  
11. android:text="@string/open"/>  
12. <Button android:id="@+id/save"  
13. android:layout_width="fill_parent"  
14. android:layout_height="wrap_content"  
15. android:background="@drawable/btn"  
16. android:text="@string/save"/>  
17. <Button android:id="@+id/close"  
18. android:layout_width="fill_parent"  
19. android:layout_height="wrap_content"  
20. android:background="@drawable/btn"  
21. android:text="@string/close"/>  
22. </LinearLayout>  

value下的style文件

4.style

view plain copy to clipboard print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <resources>  
3. <style name="AnimationFade">  
4. <!--   PopupWindow左右弹出的效果-->  
5. <item name="android:windowEnterAnimation">@anim/in_lefttoright</item>  
6. <item name="android:windowExitAnimation">@anim/out_righttoleft</item>  
7. </style>  
8. </resources>  

value下的string文件

5.string.xml

view plain copy to clipboard print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <resources>  
3. <string name="hello">Hello World, PopwindowOnLeftActivity!</string>  
4. <string name="app_name">PopwindowOnLeft</string>  
5. <string name="pop_left">弹出左侧菜单</string>  
6. <string name="open">打开</string>  
7. <string name="save">保存</string>  
8. <string name="close">关闭</string>  
9. </resources>  

anim目录下的文件

出现时从左往右的动画文件

6.in_lefttoright.xml

view plain copy to clipboard print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <set xmlns:android="http://schemas.android.com/apk/res/android">  
3. <!-- 定义从左向右进入的动画 -->  
4. <translate  
5. android:fromXDelta="-100%"  
6. android:toXDelta="0"  
7. android:duration="500"/>  
8. </set>  

退出时从右往左消失的动画

7.out_righttoleft.xml

view plain copy to clipboard print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <set xmlns:android="http://schemas.android.com/apk/res/android">  
3. <!-- 定义从右向左动画退出动画 -->  
4. <translate  
5. android:fromXDelta="0"  
6. android:toXDelta="-100%"  
7. android:duration="500"/>  
8. </set>