Android用PopupWindow实现从底部滑出选择菜单

在开发中PopupWindow的弹出效果是必不可少的。许多应用的App都喜欢用到PopupWindow。如：新浪微博客户端、微信客户端、大众点评客户端等等。今天给大家

介绍的是微信客户端里用PopupWindow实现的一种从底部滑出选择菜单的效果。

本实例弹出窗口主要是继承PopupWindow类来实现的弹出窗体，布局可以根据自己定义设计。弹出效果主要使用了translate和alpha样式实现，具体实例如下：

第一步：设计弹出窗口xml：

<?xml version="1.0" encoding="utf-8"?>  <RelativeLayout       xmlns:android="http://schemas.android.com/apk/res/android"      android:layout_width="fill_parent"      android:layout_height="wrap_content"      android:gravity="center_horizontal"      android:orientation="vertical"    >     <LinearLayout       android:id="@+id/pop_layout"      android:layout_width="fill_parent"      android:layout_height="wrap_content"      android:gravity="center_horizontal"      android:orientation="vertical"      android:layout_alignParentBottom="true"       android:background="@drawable/btn_style_alert_dialog_background"       >                <Button          android:id="@+id/btn_take_photo"          android:layout_marginLeft="20dip"          android:layout_marginRight="20dip"          android:layout_marginTop="20dip"          android:layout_width="fill_parent"          android:layout_height="wrap_content"          android:text="拍照"          android:background="@drawable/btn_style_alert_dialog_button"          android:textStyle="bold"           />         <Button          android:id="@+id/btn_pick_photo"          android:layout_marginLeft="20dip"          android:layout_marginRight="20dip"          android:layout_marginTop="5dip"           android:layout_width="fill_parent"          android:layout_height="wrap_content"          android:text="从相册选择"           android:background="@drawable/btn_style_alert_dialog_button"           android:textStyle="bold"           />         <Button          android:id="@+id/btn_cancel"         android:layout_marginLeft="20dip"         android:layout_marginRight="20dip"         android:layout_marginTop="15dip"         android:layout_marginBottom="15dip"         android:layout_width="fill_parent"         android:layout_height="wrap_content"         android:text="取消"         android:background="@drawable/btn_style_alert_dialog_cancel"         android:textColor="#ffffff"         android:textStyle="bold"                    />  </LinearLayout>  </RelativeLayout>

 第二步：创建SelectPicPopupWindow类继承PopupWindow：

import android.app.Activity;  import android.content.Context;  import android.graphics.drawable.ColorDrawable;  import android.view.LayoutInflater;  import android.view.MotionEvent;  import android.view.View;  import android.view.View.OnClickListener;  import android.view.View.OnTouchListener;  import android.view.ViewGroup.LayoutParams;  import android.widget.Button;  import android.widget.PopupWindow;     public class SelectPicPopupWindow extends PopupWindow {            private Button btn_take_photo, btn_pick_photo, btn_cancel;      private View mMenuView;         public SelectPicPopupWindow(Activity context,OnClickListener itemsOnClick) {          super(context);          LayoutInflater inflater = (LayoutInflater) context                  .getSystemService(Context.LAYOUT_INFLATER_SERVICE);          mMenuView = inflater.inflate(R.layout.alert_dialog, null);          btn_take_photo = (Button) mMenuView.findViewById(R.id.btn_take_photo);          btn_pick_photo = (Button) mMenuView.findViewById(R.id.btn_pick_photo);          btn_cancel = (Button) mMenuView.findViewById(R.id.btn_cancel);          //取消按钮          btn_cancel.setOnClickListener(new OnClickListener() {                 public void onClick(View v) {                  //销毁弹出框                  dismiss();              }          });          //设置按钮监听          btn_pick_photo.setOnClickListener(itemsOnClick);          btn_take_photo.setOnClickListener(itemsOnClick);          //设置SelectPicPopupWindow的View          this.setContentView(mMenuView);          //设置SelectPicPopupWindow弹出窗体的宽          this.setWidth(LayoutParams.FILL_PARENT);          //设置SelectPicPopupWindow弹出窗体的高          this.setHeight(LayoutParams.WRAP_CONTENT);          //设置SelectPicPopupWindow弹出窗体可点击          this.setFocusable(true);          //设置SelectPicPopupWindow弹出窗体动画效果          this.setAnimationStyle(R.style.AnimBottom);          //实例化一个ColorDrawable颜色为半透明          ColorDrawable dw = new ColorDrawable(0xb0000000);          //设置SelectPicPopupWindow弹出窗体的背景          this.setBackgroundDrawable(dw);          //mMenuView添加OnTouchListener监听判断获取触屏位置如果在选择框外面则销毁弹出框          mMenuView.setOnTouchListener(new OnTouchListener() {                             public boolean onTouch(View v, MotionEvent event) {                                     int height = mMenuView.findViewById(R.id.pop_layout).getTop();                  int y=(int) event.getY();                  if(event.getAction()==MotionEvent.ACTION_UP){                      if(y<height){                          dismiss();                      }                  }                                 return true;              }          });         }     }

第三步：编写MainActivity类实现测试：

import android.app.Activity;  import android.os.Bundle;  import android.view.Gravity;  import android.view.View;  import android.view.View.OnClickListener;  import android.widget.TextView;     public class MainActivity extends Activity {         //自定义的弹出框类      SelectPicPopupWindow menuWindow;             @Override      public void onCreate(Bundle savedInstanceState) {          super.onCreate(savedInstanceState);          setContentView(R.layout.activity_main);          TextView tv = (TextView) this.findViewById(R.id.text);          //把文字控件添加监听，点击弹出自定义窗口          tv.setOnClickListener(new OnClickListener() {                         public void onClick(View v) {                  //实例化SelectPicPopupWindow                  menuWindow = new SelectPicPopupWindow(MainActivity.this, itemsOnClick);                  //显示窗口                  menuWindow.showAtLocation(MainActivity.this.findViewById(R.id.main), Gravity.BOTTOM|Gravity.CENTER_HORIZONTAL, 0, 0); //设置layout在PopupWindow中显示的位置              }          });      }             //为弹出窗口实现监听类      private OnClickListener  itemsOnClick = new OnClickListener(){             public void onClick(View v) {              menuWindow.dismiss();              switch (v.getId()) {              case R.id.btn_take_photo:                  break;              case R.id.btn_pick_photo:                                 break;              default:                  break;              }                                            }                 };         }

第四：运行效果如下：