android UI进阶之弹窗的使用

其实这是第二遍写这篇博客……浏览器崩溃了。。。我还以为博客园和CSDN的一样自动保存，竟然没有！好吧，没事，重新写过。
年就算过完啦。新年第一篇来讲下android 中的PopupWindow。姑且就叫做弹窗吧，其实和AlertDialog一样，也是一种对话框，两者也经常混用，但是也各有特点。
下面就看看使用方法。首先初始化一个PopupWindow

1. PopupWindow mPop = new PopupWindow(getLayoutInflater().inflate(R.layout.window, null),
   
2. LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);

复制代码

实现PopupWindow的构造函数，第一个参数导入布局，后面两个指定宽和高。弹窗一般有两种展示方法，用showAsDropDown()和showAtLocation()两种方法实现。一般参数有两种，有偏移和无偏移。

1. bt1.setOnClickListener(new OnClickListener(){
   
2. 
   
3. @Override
   
4. public void onClick(View v) {
   
5. initPopWindow();
   
6. mPop.showAsDropDown(v);//以这个Button为anchor（可以理解为锚，基准），在下方弹出
   
7. 
   
8. }});
   
9. 
   
10. bt2.setOnClickListener(new OnClickListener(){
    
11. 
    
12. @Override
    
13. public void onClick(View v) {
    
14. initPopWindow();
    
15. mPop.showAsDropDown(v,20,-20);//横轴偏移20，纵轴-20，一个状态栏的长度
    
16. 
    
17. }});
    
18. 
    
19. bt3.setOnClickListener(new OnClickListener(){
    
20. 
    
21. @Override
    
22. public void onClick(View v) {
    
23. initPopWindow();
    
24. mPop.showAtLocation(PopWindow.this.findViewById(R.id.rl),
    
25. Gravity.CENTER, 0, 0);//在屏幕居中，无偏移
    
26. 
    
27. }});
    
28. 
    
29. 
    
30. bt4.setOnClickListener(new OnClickListener(){
    
31. 
    
32. @Override
    
33. public void onClick(View v) {
    
34. initPopWindow();
    
35. mPop.showAtLocation(PopWindow.this.findViewById(R.id.rl),
    
36. Gravity.TOP | Gravity.LEFT, 20, 20);//在屏幕顶部|居右，带偏移
    
37. 
    
38. }});
    
39. 
    
40. bt5.setOnClickListener(new OnClickListener(){
    
41. 
    
42. @Override
    
43. public void onClick(View v) {
    
44. if (mPop != null) {
    
45. mPop.dismiss();
    
46. }
    
47. 
    
48. }});

复制代码

其中initPopWindow()方法来初始化一个弹窗

1. private void initPopWindow() {
   
2. if (mPop == null) {
   
3. mPop = new PopupWindow(getLayoutInflater().inflate(R.layout.pop, null),
   
4. LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
   
5. }
   
6. if (mPop.isShowing()) {
   
7. mPop.dismiss();
   
8. }
   
9. }

复制代码

这里定义了4个按钮来呈现展示效果，一个按钮用来关闭，来看下第三个按钮点击效果，就不一一截图了，大家可以自己试下。

  看过我以前这系列博客的朋友就会发现，PopupWindow里面的布局就是抽屉里面用的布局，后面的背景就是上篇博客讲的可延伸图像。为什么用这个呢，我们来看下UC的menu效果

可能这个是用AlertDialog做的，但是用PopupWindow也非常方便。很多的应用都使用了这样的menu。这里我就不去仿照UC来做了，就用上面那个布局，原理是一样的，换换图片就行。
要做的很简单，看代码

1. public boolean onKeyDown(int keyCode, KeyEvent event){ //截获按键事件
   
2. if(keyCode == KeyEvent.KEYCODE_MENU){
   
3. initPopWindow();
   
4. mPop.showAtLocation(this.findViewById(R.id.rl),
   
5. Gravity.BOTTOM|Gravity.CENTER_HORIZONTAL, 0, 0); //在屏幕底部
   
6. }
   
7. else if(keyCode == KeyEvent.KEYCODE_BACK){
   
8. if(mPop.isShowing()){
   
9. mPop.dismiss();
   
10. }else{
    
11. System.exit(0);
    
12. }
    
13. }
    
14. return false;
    
15. }

复制代码

看下效果

图片似乎不是很给力，大家搞点漂亮点的图片就可以了。
我把这个代码全部贴出来

1. 
   
2. package com.notice.popWindow;
   
3. 
   
4. import android .app.Activity;
   
5. import android .os.Bundle;
   
6. import android .view.Gravity;
   
7. import android .view.KeyEvent;
   
8. import android .view.View;
   
9. import android .view.View.OnClickListener;
   
10. import android .view.ViewGroup.LayoutParams;
    
11. import android .widget.Button;
    
12. import android .widget.GridView;
    
13. import android .widget.PopupWindow;
    
14. 
    
15. public class PopWindow extends Activity {
    
16. private GridView gv;
    
17. private Button bt1;
    
18. private Button bt2;
    
19. private Button bt3;
    
20. private Button bt4;
    
21. private Button bt5;
    
22. private int[] icons={R.drawable.browser,R.drawable.gallery,
    
23. R.drawable.camera,R.drawable.gmail,
    
24. R.drawable.music,R.drawable.market,
    
25. R.drawable.phone,R.drawable.messages,R.drawable.maps};
    
26. private String[] items={"浏览器","图片","相机","时钟","音乐","市场","拨号","信息","地图"};
    
27. private PopupWindow mPop;
    
28. private View layout;
    
29. private void initPopWindow() {
    
30. if (mPop == null) {
    
31. mPop = new PopupWindow(layout,
    
32. LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
    
33. }
    
34. if (mPop.isShowing()) {
    
35. mPop.dismiss();
    
36. }
    
37. }
    
38. /** Called when the activity is first created. */
    
39. @Override
    
40. public void onCreate(Bundle savedInstanceState) {
    
41. super.onCreate(savedInstanceState);
    
42. setContentView(R.layout.main);
    
43. bt1 = (Button)findViewById(R.id.bt1);
    
44. bt2 = (Button)findViewById(R.id.bt2);
    
45. bt3 = (Button)findViewById(R.id.bt3);
    
46. bt4 = (Button)findViewById(R.id.bt4);
    
47. bt5 = (Button)findViewById(R.id.bt5);
    
48. layout = View.inflate(this, R.layout.window, null);
    
49. gv = (GridView) layout.findViewById(R.id.gv);
    
50. MyAdapter adapter=new MyAdapter(this,items,icons);
    
51. gv.setAdapter(adapter);
    
52. 
    
53. bt1.setOnClickListener(new OnClickListener(){
    
54. 
    
55. @Override
    
56. public void onClick(View v) {
    
57. initPopWindow();
    
58. mPop.showAsDropDown(v);//以这个Button为anchor（可以理解为锚，基准），在下方弹出
    
59. 
    
60. }});
    
61. 
    
62. bt2.setOnClickListener(new OnClickListener(){
    
63. 
    
64. @Override
    
65. public void onClick(View v) {
    
66. initPopWindow();
    
67. mPop.showAsDropDown(v,20,-20);//横轴偏移20，纵轴-20，一个状态栏的长度
    
68. 
    
69. }});
    
70. 
    
71. bt3.setOnClickListener(new OnClickListener(){
    
72. 
    
73. @Override
    
74. public void onClick(View v) {
    
75. initPopWindow();
    
76. mPop.showAtLocation(PopWindow.this.findViewById(R.id.rl),
    
77. Gravity.CENTER, 0, 0);//在屏幕居中，无偏移
    
78. 
    
79. }});
    
80. 
    
81. 
    
82. bt4.setOnClickListener(new OnClickListener(){
    
83. 
    
84. @Override
    
85. public void onClick(View v) {
    
86. initPopWindow();
    
87. mPop.showAtLocation(PopWindow.this.findViewById(R.id.rl),
    
88. Gravity.TOP | Gravity.LEFT, 20, 20);//在屏幕顶部|居右，带偏移
    
89. 
    
90. }});
    
91. 
    
92. bt5.setOnClickListener(new OnClickListener(){
    
93. 
    
94. @Override
    
95. public void onClick(View v) {
    
96. if (mPop != null) {
    
97. mPop.dismiss();
    
98. }
    
99. 
    
100. }})
     
101. 
     
102. 
     
103. public boolean onKeyDown(int keyCode, KeyEvent event)
     
104. //截获按键事?
     
105. if(keyCode == KeyEvent.KEYCODE_MENU)
     
106. initPopWindow()
     
107. mPop.showAtLocation(this.findViewById(R.id.rl)
     
108. Gravity.BOTTOM|Gravity.CENTER_HORIZONTAL, 0, 0); //在屏幕底?
     
109. }else if(keyCode == KeyEvent.KEYCODE_BACK)
     
110. if(mPop.isShowing())
     
111. mPop.dismiss()
     
112. }else
     
113. System.exit(0)
     
114. 
     
115. 
     
116. 
     
117. return false
     
118. 
     
119. 
     
120. }

复制代码

其中的MyAdapter类可以去看我以前的一篇写抽屉的博客，代码都在里面。然后就是window.xml

1. <?xml version="1.0" encoding="utf-8"?>
   
2. <GridView
   
3. xmlns:android ="http://schemas.android .com/apk/res/android "
   
4. android :id="@+id/gv"
   
5. android :background="@drawable/tbg"
   
6. android :layout_width="wrap_content"
   
7. android :layout_height="wrap_content"
   
8. android :numColumns="3"
   
9. android :gravity="center">
   
10. </GridView>

复制代码

只有一个GridView。main.xml就不贴了，就几个Button。
当然弹窗的作用不仅限于menu，你还可以用他做的更多来为你UI增色。今天就写到这了，哎，写了好久。有问题可以留言交流

评论

1 楼 shuyahui2010 2011-07-27  

楼主能不能发个代码给我，急着用，3Q，[e-mail]