[Android] 底部菜单布局+PopupWindows实现弹出菜单功能(初级篇)

<?xml version="1.0" encoding="utf-8"?>  
<set xmlns:android="http://schemas.android.com/apk/res/android">    
    <translate    
        android:fromXDelta="0"    
        android:toXDelta="0"    
        android:fromYDelta="120"    
        android:toYDelta="0"    
        android:duration="500" />    
</set>

<?xml version="1.0" encoding="UTF-8"?>  
<set xmlns:android="http://schemas.android.com/apk/res/android" >  
    <!-- 透明度消失 -->
    <alpha 
        android:fromAlpha="1.0" 
        android:toAlpha="0.0" 
        android:duration="200" />
</set>

<!-- 定义popupwindows动画效果 -->
 <style name="AnimationPreview">  
     <item name="android:windowEnterAnimation">@anim/anim_entry</item>  
     <item name="android:windowExitAnimation">@anim/anim_exit</item>  
 </style>  

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"  
    android:layout_height="wrap_content" >  
  
    <LinearLayout  
        android:layout_width="fill_parent"  
        android:layout_height="wrap_content"  
        android:layout_alignParentBottom="true"  
        android:background="@drawable/image_button_bg_left"  
        android:orientation="vertical" >  
        <LinearLayout  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:layout_gravity="center_horizontal"  
            android:layout_marginTop="5dp"  
            android:orientation="horizontal" > 
             
            <LinearLayout  
                android:id="@+id/layout_effect_hj"
                android:layout_width="wrap_content"  
                android:layout_height="wrap_content"  
                android:layout_margin="2dp"  
                android:layout_weight="1"  
                android:orientation="vertical" >  
                <ImageView  
                    android:layout_width="wrap_content"  
                    android:layout_height="wrap_content"  
                    android:layout_gravity="center_horizontal"  
                    android:layout_marginTop="1.0dip"  
                    android:src="@drawable/image_effect_hj" />
                <TextView  
                    android:layout_width="wrap_content"  
                    android:layout_height="wrap_content"  
                    android:layout_gravity="center_horizontal"  
                    android:layout_marginTop="1.0dip"  
                    android:shadowColor="#ff000000"  
                    android:shadowDx="1.0"  
                    android:shadowDy="1.0"  
                    android:shadowRadius="1.0"  
                    android:text="怀旧"  
                    android:textColor="#ffffffff"  
                    android:textSize="13.0dip" />  
            </LinearLayout>  
  
            <LinearLayout  
                android:id="@+id/layout_effect_fd"
                android:layout_width="wrap_content"  
                android:layout_height="wrap_content"  
                android:layout_margin="2dp"  
                android:layout_weight="1"  
                android:orientation="vertical" >  
                <ImageView  
                    android:layout_width="wrap_content"  
                    android:layout_height="wrap_content"  
                    android:layout_gravity="center_horizontal"  
                    android:layout_marginTop="1.0dip"  
                    android:src="@drawable/image_effect_fd" />  
                <TextView  
                    android:layout_width="wrap_content"  
                    android:layout_height="wrap_content"  
                    android:layout_gravity="center_horizontal"  
                    android:layout_marginTop="1.0dip"  
                    android:shadowColor="#ff000000"  
                    android:shadowDx="1.0"  
                    android:shadowDy="1.0"  
                    android:shadowRadius="1.0"  
                    android:text="浮雕"  
                    android:textColor="#ffffffff"  
                    android:textSize="13.0dip" />  
            </LinearLayout>  

            <LinearLayout  
                android:id="@+id/layout_effect_gz"
                android:layout_width="wrap_content"  
                android:layout_height="wrap_content"  
                android:layout_margin="2dp"  
                android:layout_weight="1"  
                android:orientation="vertical" >  
                <ImageView  
                    android:layout_width="wrap_content"  
                    android:layout_height="wrap_content"  
                    android:layout_gravity="center_horizontal"  
                    android:layout_marginTop="1.0dip"  
                    android:src="@drawable/image_effect_gz" /> 
                <TextView  
                    android:layout_width="wrap_content"  
                    android:layout_height="wrap_content"  
                    android:layout_gravity="center_horizontal"  
                    android:layout_marginTop="1.0dip"  
                    android:shadowColor="#ff000000"  
                    android:shadowDx="1.0"  
                    android:shadowDy="1.0"  
                    android:shadowRadius="1.0"  
                    android:text="光照"  
                    android:textColor="#ffffffff"  
                    android:textSize="13.0dip" />  
            </LinearLayout>  
  
            <LinearLayout  
                android:id="@+id/layout_effect_sm"
                android:layout_width="wrap_content"  
                android:layout_height="wrap_content"  
                android:layout_margin="2dp"  
                android:layout_weight="1"  
                android:orientation="vertical" >  
                <ImageView  
                    android:layout_width="wrap_content"  
                    android:layout_height="wrap_content"  
                    android:layout_gravity="center_horizontal"  
                    android:layout_marginTop="1.0dip"  
                    android:src="@drawable/image_effect_sm" />  
                <TextView  
                    android:layout_width="wrap_content"  
                    android:layout_height="wrap_content"  
                    android:layout_gravity="center_horizontal"  
                    android:layout_marginTop="1.0dip"  
                    android:shadowColor="#ff000000"  
                    android:shadowDx="1.0"  
                    android:shadowDy="1.0"  
                    android:shadowRadius="1.0"  
                    android:text="素描"  
                    android:textColor="#ffffffff"  
                    android:textSize="13.0dip" />  
            </LinearLayout>  
  
            <LinearLayout  
                android:id="@+id/layout_effect"
                android:layout_width="wrap_content"  
                android:layout_height="wrap_content"  
                android:layout_margin="2dp"  
                android:layout_weight="1"  
                android:orientation="vertical" >  
                <ImageView  
                    android:layout_width="wrap_content"  
                    android:layout_height="wrap_content"  
                    android:layout_gravity="center_horizontal"  
                    android:layout_marginTop="1.0dip"  
                    android:src="@drawable/image_effect" />  
                <TextView  
                    android:layout_width="wrap_content"  
                    android:layout_height="wrap_content"  
                    android:layout_gravity="center_horizontal"  
                    android:layout_marginTop="1.0dip"  
                    android:shadowColor="#ff000000"  
                    android:shadowDx="1.0"  
                    android:shadowDy="1.0"  
                    android:shadowRadius="1.0"  
                    android:text="锐化"  
                    android:textColor="#ffffffff"  
                    android:textSize="13.0dip" />  
            </LinearLayout>  
            
        </LinearLayout>  
    </LinearLayout>  
</RelativeLayout>

//弹出按钮
private PopupWindow popupWindow1;     
private PopupWindow popupWindow2;
private PopupWindow popupWindow3;
private PopupWindow popupWindow4;
private PopupWindow popupWindow5;

//按钮四 监听事件图片相框
layoutFrame.setOnClickListener( new OnClickListener() {
	@Override
	public void onClick(View v) {
		//载入PopupWindow
		if (popupWindow4 != null&&popupWindow4.isShowing()) {  
            popupWindow4.dismiss();  
            return;  
        } else {  
            initmPopupWindowView(4);   //number=4
            int[] location = new int[2];  
            v.getLocationOnScreen(location); 
            Toast.makeText(MainActivity.this, ""+location[0], Toast.LENGTH_SHORT).show();
            popupWindow4.showAtLocation(v, Gravity.NO_GRAVITY, location[0], location[1]-popupWindow4.getHeight());
        }
	}
});

public void initmPopupWindowView(int number) {  
    	View customView = null;
        // 获取自定义布局文件  
    	if(number==1) { //查看
    		customView = getLayoutInflater().inflate(R.layout.popup_watch, null, false);  
    		// 创建PopupWindow实例  (250,180)分别是宽度和高度  
            popupWindow1 = new PopupWindow(customView, 250, 280); 
            // 设置动画效果 [R.style.AnimationFade 是自己事先定义好的]  
            popupWindow1.setAnimationStyle(R.style.AnimationPreview);  
            // 自定义view添加触摸事件  
            customView.setOnTouchListener(new OnTouchListener() {  
                @Override  
                public boolean onTouch(View v, MotionEvent event) {  
                    if (popupWindow1 != null && popupWindow1.isShowing()) {  
                        popupWindow1.dismiss();  
                        popupWindow1 = null;  
                    }  
                    return false;  
                }  
            });  
    	}
    	 if(number==2) { //增强
         	customView = getLayoutInflater().inflate(R.layout.popup_increase, null, false);  
         	popupWindow2 = new PopupWindow(customView, 450, 150);
         	// 使其聚集 要想监听菜单里控件的事件就必须要调用此方法   
             popupWindow2.setFocusable(true);  
             // 设置允许在外点击消失   
             popupWindow2.setOutsideTouchable(true); 
             popupWindow2.setAnimationStyle(R.style.AnimationPreview);  
             // 自定义view添加触摸事件  
             customView.setOnTouchListener(new OnTouchListener() {  
                 @Override  
                 public boolean onTouch(View v, MotionEvent event) {  
                     if (popupWindow2 != null && popupWindow2.isShowing()) {  
                         popupWindow2.dismiss();  
                         popupWindow2 = null;  
                     }  
                     return false;  
                 }  
             });  
         }
        if(number==3) { //效果
        	customView = getLayoutInflater().inflate(R.layout.popup_effect, null, false);  
        	popupWindow3 = new PopupWindow(customView, 450, 150);
        	// 使其聚集 要想监听菜单里控件的事件就必须要调用此方法   
            popupWindow3.setFocusable(true);  
            // 设置允许在外点击消失   
            popupWindow3.setOutsideTouchable(true); 
            popupWindow3.setAnimationStyle(R.style.AnimationPreview);  
            // 自定义view添加触摸事件  
            customView.setOnTouchListener(new OnTouchListener() {  
                @Override  
                public boolean onTouch(View v, MotionEvent event) {  
                    if (popupWindow3 != null && popupWindow3.isShowing()) {  
                        popupWindow3.dismiss();  
                        popupWindow3 = null;  
                    }  
                    return false;  
                }  
            });  
        }
        if(number==4) {
        	customView = getLayoutInflater().inflate(R.layout.popup_frame, null, false);  
        	popupWindow4 = new PopupWindow(customView, 450, 150);
        	// 使其聚集 要想监听菜单里控件的事件就必须要调用此方法   
            popupWindow4.setFocusable(true);  
            popupWindow4.setAnimationStyle(R.style.AnimationPreview);  
            // 自定义view添加触摸事件  
            customView.setOnTouchListener(new OnTouchListener() {  
                @Override  
                public boolean onTouch(View v, MotionEvent event) {  
                    if (popupWindow4 != null && popupWindow4.isShowing()) {  
                        popupWindow4.dismiss();  
                        popupWindow4 = null;  
                    }  
                    return false;  
                }  
            });  
        }
        if(number==5) {
        	customView = getLayoutInflater().inflate(R.layout.popup_frame, null, false);  
        	popupWindow5 = new PopupWindow(customView, 450, 150);
        	// 使其聚集 要想监听菜单里控件的事件就必须要调用此方法   
            popupWindow5.setFocusable(true);  
            popupWindow5.setAnimationStyle(R.style.AnimationPreview);  
            // 自定义view添加触摸事件  
            customView.setOnTouchListener(new OnTouchListener() {  
                @Override  
                public boolean onTouch(View v, MotionEvent event) {  
                    if (popupWindow5 != null && popupWindow5.isShowing()) {  
                        popupWindow5.dismiss();  
                        popupWindow5 = null;  
                    }  
                    return false;  
                }  
            });  
        } //end if
    }

    四. PopupWindow实现点击效果

    做到这里,你就能实现点击底部菜单实现弹出PopupWindows效果,但显然是不足的.怎样通过点击弹出PopupWindow中的按钮实现做不同的事情呢?下面讲解,你只需要添加下面的代码即可实现"特效"效果.

if(number==3) { //效果
	customView = getLayoutInflater().inflate(R.layout.popup_effect, null, false);  
	popupWindow3 = new PopupWindow(customView, 450, 150);
	// 使其聚集 要想监听菜单里控件的事件就必须要调用此方法   
    popupWindow3.setFocusable(true);  
    // 设置允许在外点击消失   
    popupWindow3.setOutsideTouchable(true); 
    popupWindow3.setAnimationStyle(R.style.AnimationPreview);  
    // 自定义view添加触摸事件  
    customView.setOnTouchListener(new OnTouchListener() {  
        @Override  
        public boolean onTouch(View v, MotionEvent event) {  
            if (popupWindow3 != null && popupWindow3.isShowing()) {  
                popupWindow3.dismiss();  
                popupWindow3 = null;  
            }  
            return false;  
        }  
    });  
    //判断点击子菜单不同按钮实现不同功能
    LinearLayout layoutEffect1 = (LinearLayout) customView.findViewById(R.id.layout_effect_hj);
    layoutEffect1.setOnClickListener(new OnClickListener() {
    	@Override
    	public void onClick(View v) {
    		Toast.makeText(MainActivity.this, "效果-怀旧", Toast.LENGTH_SHORT).show();
    	}
    });
    LinearLayout layoutEffect2 = (LinearLayout) customView.findViewById(R.id.layout_effect_fd);
    layoutEffect2.setOnClickListener(new OnClickListener() {
    	@Override
    	public void onClick(View v) {
    		Toast.makeText(MainActivity.this, "效果-浮雕", Toast.LENGTH_SHORT).show();
    	}
    });
    LinearLayout layoutEffect3 = (LinearLayout) customView.findViewById(R.id.layout_effect_gz);
    layoutEffect3.setOnClickListener(new OnClickListener() {
    	@Override
    	public void onClick(View v) {
    		Toast.makeText(MainActivity.this, "效果-光照", Toast.LENGTH_SHORT).show();
    	}
    });
    LinearLayout layoutEffect4 = (LinearLayout) customView.findViewById(R.id.layout_effect_sm);
    layoutEffect4.setOnClickListener(new OnClickListener() {
    	@Override
    	public void onClick(View v) {
    		Toast.makeText(MainActivity.this, "效果-素描", Toast.LENGTH_SHORT).show();
    		//打开图片
    		OpenImage();
    	}
    });
    LinearLayout layoutEffect5 = (LinearLayout) customView.findViewById(R.id.layout_effect);
    layoutEffect5.setOnClickListener(new OnClickListener() {
    	@Override
    	public void onClick(View v) {
    		Toast.makeText(MainActivity.this, "效果-锐化", Toast.LENGTH_SHORT).show();
    	}
    });
}

    五. 总结