android PopupWindow实现从底部弹出或滑出选择菜单或窗口

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

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

 

Xml代码  收藏代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout   
  3.     xmlns:android="http://schemas.android.com/apk/res/android"  
  4.     android:layout_width="fill_parent"  
  5.     android:layout_height="wrap_content"  
  6.     android:gravity="center_horizontal"  
  7.     android:orientation="vertical"  
  8.   >  
  9.   
  10. <LinearLayout   
  11.     android:id="@+id/pop_layout"  
  12.     android:layout_width="fill_parent"  
  13.     android:layout_height="wrap_content"  
  14.     android:gravity="center_horizontal"  
  15.     android:orientation="vertical"  
  16.     android:layout_alignParentBottom="true"  
  17.      android:background="@drawable/btn_style_alert_dialog_background"  
  18.      >  
  19.   
  20.       
  21.     <Button  
  22.         android:id="@+id/btn_take_photo"  
  23.         android:layout_marginLeft="20dip"  
  24.         android:layout_marginRight="20dip"  
  25.         android:layout_marginTop="20dip"  
  26.         android:layout_width="fill_parent"  
  27.         android:layout_height="wrap_content"  
  28.         android:text="拍照"  
  29.         android:background="@drawable/btn_style_alert_dialog_button"  
  30.         android:textStyle="bold"  
  31.          />  
  32.   
  33.     <Button  
  34.         android:id="@+id/btn_pick_photo"  
  35.         android:layout_marginLeft="20dip"  
  36.         android:layout_marginRight="20dip"  
  37.         android:layout_marginTop="5dip"   
  38.          android:layout_width="fill_parent"  
  39.         android:layout_height="wrap_content"  
  40.         android:text="从相册选择"  
  41.          android:background="@drawable/btn_style_alert_dialog_button"  
  42.          android:textStyle="bold"  
  43.          />  
  44.   
  45.     <Button  
  46.         android:id="@+id/btn_cancel"  
  47.        android:layout_marginLeft="20dip"  
  48.        android:layout_marginRight="20dip"  
  49.        android:layout_marginTop="15dip"   
  50.        android:layout_marginBottom="15dip"  
  51.        android:layout_width="fill_parent"  
  52.        android:layout_height="wrap_content"  
  53.        android:text="取消"  
  54.        android:background="@drawable/btn_style_alert_dialog_cancel"  
  55.        android:textColor="#ffffff"  
  56.        android:textStyle="bold"  
  57.          
  58.         />  
  59. </LinearLayout>  
  60. </RelativeLayout>  

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

 

Java代码  收藏代码
  1. import android.app.Activity;  
  2. import android.content.Context;  
  3. import android.graphics.drawable.ColorDrawable;  
  4. import android.view.LayoutInflater;  
  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.view.ViewGroup.LayoutParams;  
  10. import android.widget.Button;  
  11. import android.widget.PopupWindow;  
  12.   
  13. public class SelectPicPopupWindow extends PopupWindow {  
  14.   
  15.   
  16.     private Button btn_take_photo, btn_pick_photo, btn_cancel;  
  17.     private View mMenuView;  
  18.   
  19.     public SelectPicPopupWindow(Activity context,OnClickListener itemsOnClick) {  
  20.         super(context);  
  21.         LayoutInflater inflater = (LayoutInflater) context  
  22.                 .getSystemService(Context.LAYOUT_INFLATER_SERVICE);  
  23.         mMenuView = inflater.inflate(R.layout.alert_dialog, null);  
  24.         btn_take_photo = (Button) mMenuView.findViewById(R.id.btn_take_photo);  
  25.         btn_pick_photo = (Button) mMenuView.findViewById(R.id.btn_pick_photo);  
  26.         btn_cancel = (Button) mMenuView.findViewById(R.id.btn_cancel);  
  27.         //取消按钮  
  28.         btn_cancel.setOnClickListener(new OnClickListener() {  
  29.   
  30.             public void onClick(View v) {  
  31.                 //销毁弹出框  
  32.                 dismiss();  
  33.             }  
  34.         });  
  35.         //设置按钮监听  
  36.         btn_pick_photo.setOnClickListener(itemsOnClick);  
  37.         btn_take_photo.setOnClickListener(itemsOnClick);  
  38.         //设置SelectPicPopupWindow的View  
  39.         this.setContentView(mMenuView);  
  40.         //设置SelectPicPopupWindow弹出窗体的宽  
  41.         this.setWidth(LayoutParams.FILL_PARENT);  
  42.         //设置SelectPicPopupWindow弹出窗体的高  
  43.         this.setHeight(LayoutParams.WRAP_CONTENT);  
  44.         //设置SelectPicPopupWindow弹出窗体可点击  
  45.         this.setFocusable(true);  
  46.         //设置SelectPicPopupWindow弹出窗体动画效果  
  47.         this.setAnimationStyle(R.style.AnimBottom);  
  48.         //实例化一个ColorDrawable颜色为半透明  
  49.         ColorDrawable dw = new ColorDrawable(0xb0000000);  
  50.         //设置SelectPicPopupWindow弹出窗体的背景  
  51.         this.setBackgroundDrawable(dw);  
  52.         //mMenuView添加OnTouchListener监听判断获取触屏位置如果在选择框外面则销毁弹出框  
  53.         mMenuView.setOnTouchListener(new OnTouchListener() {  
  54.               
  55.             public boolean onTouch(View v, MotionEvent event) {  
  56.                   
  57.                 int height = mMenuView.findViewById(R.id.pop_layout).getTop();  
  58.                 int y=(int) event.getY();  
  59.                 if(event.getAction()==MotionEvent.ACTION_UP){  
  60.                     if(y<height){  
  61.                         dismiss();  
  62.                     }  
  63.                 }                 
  64.                 return true;  
  65.             }  
  66.         });  
  67.   
  68.     }  
  69.   
  70. }  
 

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

 

Java代码  收藏代码
  1. import android.app.Activity;  
  2. import android.os.Bundle;  
  3. import android.view.Gravity;  
  4. import android.view.View;  
  5. import android.view.View.OnClickListener;  
  6. import android.widget.TextView;  
  7.   
  8. public class MainActivity extends Activity {  
  9.   
  10.     //自定义的弹出框类  
  11.     SelectPicPopupWindow menuWindow;  
  12.       
  13.     @Override  
  14.     public void onCreate(Bundle savedInstanceState) {  
  15.         super.onCreate(savedInstanceState);  
  16.         setContentView(R.layout.activity_main);  
  17.         TextView tv = (TextView) this.findViewById(R.id.text);  
  18.         //把文字控件添加监听,点击弹出自定义窗口  
  19.         tv.setOnClickListener(new OnClickListener() {             
  20.             public void onClick(View v) {  
  21.                 //实例化SelectPicPopupWindow  
  22.                 menuWindow = new SelectPicPopupWindow(MainActivity.this, itemsOnClick);  
  23.                 //显示窗口  
  24.                 menuWindow.showAtLocation(MainActivity.this.findViewById(R.id.main), Gravity.BOTTOM|Gravity.CENTER_HORIZONTAL, 00); //设置layout在PopupWindow中显示的位置  
  25.             }  
  26.         });  
  27.     }  
  28.       
  29.     //为弹出窗口实现监听类  
  30.     private OnClickListener  itemsOnClick = new OnClickListener(){  
  31.   
  32.         public void onClick(View v) {  
  33.             menuWindow.dismiss();  
  34.             switch (v.getId()) {  
  35.             case R.id.btn_take_photo:  
  36.                 break;  
  37.             case R.id.btn_pick_photo:                 
  38.                 break;  
  39.             default:  
  40.                 break;  
  41.             }  
  42.               
  43.                   
  44.         }  
  45.           
  46.     };  
  47.       
  48. }  
 

第四:运行效果如下:

posted @ 2013-09-22 10:18  郑文亮  阅读(56578)  评论(6编辑  收藏  举报