Android用PopupWindow实现弹出菜单实例

step1:新建项目PopWindow,并导入菜单项使用的图片到/res/drawable目录下

              （项目总览图）                                                   （drawable目录截图）       

step2:设置应用的UI界面 

a.应用的总体界面，main.xml

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<? xml version = "1.0" encoding = "utf-8" ?> < LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android"      android:orientation = "vertical"      android:layout_width = "fill_parent"      android:layout_height = "fill_parent"      android:id = "@+id/main"      > < Button       android:layout_width = "fill_parent"      android:layout_height = "wrap_content"      android:text = "@string/button"      android:onClick = "openPopWindow"      /> </ LinearLayout >

 

b.弹出菜单的界面，popwindow.xml

?

1 2 3 4 5 6 7 8 9

<? xml version = "1.0" encoding = "utf-8" ?> < LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android"      android:orientation = "vertical" android:layout_width = "fill_parent"      android:layout_height = "fill_parent" android:background = "@drawable/rectangle" >   <!-- 设置一个手绘的长方形背景 -->      < GridView android:layout_width = "fill_parent"          android:layout_height = "wrap_content" android:numColumns = "4"          android:horizontalSpacing = "10dp" android:verticalSpacing = "10dp"          android:id = "@+id/gridView" /> </ LinearLayout >

其中的android:background="@drawable/rectangle"是引用rectangle.xml

?

1 2 3 4 5 6 7 8

<? xml version = "1.0" encoding = "utf-8" ?> < shape xmlns:android = "http://schemas.android.com/apk/res/android"      android:shape = "rectangle" >      < gradient android:startColor = "#1DC9CD" android:endColor = "#A2E0FB"          android:angle = "270" />      < padding android:left = "2dp" android:top = "2dp" android:right = "2dp"          android:bottom = "2dp" /> </ shape >

c.每个菜单项的界面，grid_item.xml

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<? xml version = "1.0" encoding = "utf-8" ?> < LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android"      android:layout_width = "match_parent"      android:layout_height = "match_parent"      android:orientation = "vertical"      android:gravity = "center"      >      < ImageView           android:layout_width = "wrap_content"           android:layout_height = "wrap_content"           android:id = "@+id/imageView"          />      < TextView          android:layout_width = "fill_parent"          android:layout_height = "wrap_content"          android:gravity = "center"          android:textSize = "16sp"          android:textColor = "#000099"          android:id = "@+id/textView"          /> </ LinearLayout >

d:为菜单设置一个style，用于指定菜单弹出时和退出时的动画效果  styles.xml

?

1 2 3 4 5 6 7

<? xml version = "1.0" encoding = "utf-8" ?> < resources >      < style name = "animation" >          < item name = "android:windowEnterAnimation" >@anim/enter</ item >        < item name = "android:windowExitAnimation" >@anim/exit</ item >      </ style > </ resources >

其中enter.xml

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<? xml version = "1.0" encoding = "utf-8" ?> < set xmlns:android = "http://schemas.android.com/apk/res/android"      android:shareInterpolator = "false" >      < translate          android:fromYDelta = "100%p"          android:toYDelta = "0"          android:duration = "500"          />      < alpha          android:fromAlpha = "0.7"          android:toAlpha = "1.0"          android:duration = "300"          />   </ set >

exit.xml

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<? xml version = "1.0" encoding = "utf-8" ?> < set xmlns:android = "http://schemas.android.com/apk/res/android"      android:shareInterpolator = "false" >      < translate          android:fromYDelta = "0"          android:toYDelta = "100%p"          android:duration = "2000"          />      < alpha          android:fromAlpha = "1.0"          android:toAlpha = "0.5"          android:duration = "1000"          />   </ set >

 

step3:MainActivity.java

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85

package cn.roco.popwindow;   import java.util.ArrayList; import java.util.HashMap; import java.util.List;   import android.app.Activity; import android.graphics.drawable.BitmapDrawable; import android.os.Bundle; import android.view.Gravity; import android.view.View; import android.view.ViewGroup; import android.widget.AdapterView; import android.widget.AdapterView.OnItemClickListener; import android.widget.GridView; import android.widget.ListAdapter; import android.widget.PopupWindow; import android.widget.SimpleAdapter;   public class MainActivity  extends Activity {      private PopupWindow popupWindow;      private View parent;      /**菜单弹出来时候的菜单项图案*/      private int [] images = { R.drawable.i1, R.drawable.i2, R.drawable.i3,              R.drawable.i4, R.drawable.i5, R.drawable.i6, R.drawable.i7,              R.drawable.i8 };      /**菜单弹出来时候的菜单项文字*/      private String[] names = {  "搜索" ,  "文件管理" ,  "下载管理" ,  "全屏" ,  "网址" ,  "书签" ,  "加入书签" ,              "分享页面" };        @Override      public void onCreate(Bundle savedInstanceState) {          super .onCreate(savedInstanceState);          setContentView(R.layout.main);          /**PopupWindow的界面*/          View contentView = getLayoutInflater()                  .inflate(R.layout.popwindow,  null );          /**网格布局界面*/          GridView gridView = (GridView) contentView.findViewById(R.id.gridView);          /**设置网格布局的适配器*/          gridView.setAdapter(getAdapter());          /**设置网格布局的菜单项点击时候的Listener*/          gridView.setOnItemClickListener( new ItemClickListener());          /**初始化PopupWindow*/          popupWindow =  new PopupWindow(contentView,                  ViewGroup.LayoutParams.MATCH_PARENT,                  ViewGroup.LayoutParams.WRAP_CONTENT);          popupWindow.setFocusable( true ); // 取得焦点          popupWindow.setBackgroundDrawable( new BitmapDrawable());          /**设置PopupWindow弹出和退出时候的动画效果*/          popupWindow.setAnimationStyle(R.style.animation);                    parent =  this .findViewById(R.id.main);      }            private final class ItemClickListener  implements OnItemClickListener{          @Override          public void onItemClick(AdapterView<?> parent, View view,  int position,                  long id) {              if (popupWindow.isShowing()) {                  popupWindow.dismiss(); //关闭              }          }      }            /**返回网格布局的适配器*/      private ListAdapter getAdapter() {          List<HashMap<String, Object>> data =  new ArrayList<HashMap<String, Object>>();          for ( int i =  0 ; i < images.length; i++) {              HashMap<String, Object> item =  new HashMap<String, Object>();              item.put( "image" , images[i]);              item.put( "name" , names[i]);              data.add(item);          }          SimpleAdapter simpleAdapter =  new SimpleAdapter( this , data,                  R.layout.grid_item,  new String[] {  "image" ,  "name" },                  new int [] { R.id.imageView, R.id.textView });          return simpleAdapter;      }        public void openPopWindow(View v) {          /**设置PopupWindow弹出后的位置*/          popupWindow.showAtLocation(parent, Gravity.BOTTOM,  0 ,  0 );      } }

step4:AndroidManifest.xml

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<? xml version = "1.0" encoding = "utf-8" ?> < manifest xmlns:android = "http://schemas.android.com/apk/res/android"        package = "cn.roco.popwindow"        android:versionCode = "1"        android:versionName = "1.0" >      < uses-sdk android:minSdkVersion = "8" />        < application android:icon = "@drawable/icon" android:label = "@string/app_name" >          < activity android:name = ".MainActivity"                    android:label = "@string/app_name" >              < intent-filter >                  < action android:name = "android.intent.action.MAIN" />                  < category android:name = "android.intent.category.LAUNCHER" />              </ intent-filter >          </ activity >        </ application > </ manifest >

step5:运行效果