(转)android UI进阶之弹窗的使用

下面就看看使用方法。首先初始化一个PopupWindow

 

 

[java] view plaincopy
  1. PopupWindow  mPop = new PopupWindow(getLayoutInflater().inflate(R.layout.window, null), LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);  

 

 

 

 

实现PopupWindow的构造函数，第一个参数导入布局，后面两个指定宽和高。

弹窗一般有两种展示方法，用showAsDropDown()和showAtLocation()两种方法实现。一般参数有两种，有偏移和无偏移。

 

[java] view plaincopy
  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.     }});  
  49.         
  50.   }  

 

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

 

[java] view plaincopy
  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来做了，就用上面那个布局，原理是一样的，换换图片就行。

要做的很简单，看代码

 

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

 

看下效果

图片似乎不是很给力，大家搞点漂亮点的图片就可以了。

我把这个代码全部贴出来

 

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

 

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

 

[xhtml] view plaincopy
  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增色。

posted @ 2012-08-23 10:44  幻星宇  阅读(309)  评论(0)  编辑  收藏  举报