Android侧面菜单(覆盖内容)的实现

MrDuoduo

2015-08-17

Android本身为大家提供了菜单的构建函数，但这种菜单太过单调，而且很多手机都去掉了菜单的按钮，更无法使用原来提供的菜单。所以，自定义一个有个性的菜单组件便显得较为重要。PopupWindow类可以实现浮层效果，也就是常见的侧面弹出菜单的效果。

当然，要实现菜单，还有很多问题需要解决，比如菜单内部的布局、菜单弹出的方式、菜单的样式等。所以在使用PopupWindow之前还需要创建一些xml的配置文件。

首先就是菜单内部的布局和组件的样式。这里需要新建一个layout.xml文件，并写出菜单内部的布局、样式。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="50dp"
    android:orientation="horizontal" 
    >
    
    <Button 
        android:id="@+id/menu_color"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:background="@drawable/list_bt_selecotr"
        android:layout_margin="5dp"
        android:text="颜色"/>

    <Button 
        android:id="@+id/menu_size"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:layout_margin="5dp"
        android:background="@drawable/list_bt_selecotr"
        android:text="线条"/>
    <Button 
        android:id="@+id/menu_type"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:layout_margin="5dp"
        android:background="@drawable/list_bt_selecotr"
        android:text="样式"/>
    <Button 
        android:id="@+id/menu_pic"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_margin="5dp"
        android:background="@drawable/list_bt_selecotr"
        android:layout_weight="1"
        android:text="清空"/>
    
    
</LinearLayout>

（注：按钮的background设置的是另一个设置按钮样式的文件，详见）

接下来要做的是设置菜单进入和退出的方式。

进入方式的代码（需要在res文件夹中新建一个anim文件夹，并新建一个set文件）：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate 
      <!--出现时的起始位置-->
        android:fromYDelta="100%p"
     <!--出现时的终止位置-->
        android:toYDelta="0%p"
<!--出现动画持续的时间-->
        android:duration="300"
        />

</set>

退出动画的代码：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
    <!--这里设置的是菜单退出时的起始位置-->
        android:fromYDelta="0%p"
    <!--这里设置的是菜单退出的终止位置-->
        android:toYDelta="100%p"
    <!--这里设置的是退出动画持续的时间-->
        android:duration="300"
         >
        
        
    </translate>

</set>

接下来就是将进入和退出的动画进行整合，设置成菜单的动画效果。

在value文件夹中新建一个style文件

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="AnimationFade">
    <!--设置菜单进入的动画-->
        <item name="android:windowEnterAnimation">@anim/menu_from_below</item>
       <!--设置菜单退出的动画--> 
        <item name="android:windowExitAnimation">@anim/menu_to_below</item>
        
    </style>
</resources>

接下来就是给某个按钮添加监听，来弹出菜单了。

下面是监听器的代码，主界面的就不用写了吧，直接创建监听器对象并添加监听就行了。

package sqm.paintPage;

import sqm.selfandmenu.MyView;
import sqm.selfandmenu.R;
import android.app.AlertDialog;
import android.content.DialogInterface;
import android.graphics.Color;
import android.util.Log;
import android.view.Gravity;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.View.OnTouchListener;
import android.widget.Button;
import android.widget.PopupMenu;
import android.widget.PopupWindow;
import android.widget.Toast;

public class MenuButtonListener implements OnClickListener {

	
	private PaintingActivity pa;//菜单依附的activity对象
	private PopupWindow popWindow ;
	private View view;
	
	
	private int height;//屏幕的高度（用来让菜单适应不同分辨率的手机
	private int width;//屏幕的宽度
	private MyView myView;//自定义的view组件，与view相同
	
	public MenuButtonListener(PaintingActivity pa,int height,int width,MyView myView){
		this.pa = pa;
		this.height = height;
		this.width = width;
		this.myView = myView;
	}
	
	
	@Override
	public void onClick(View v) {
		//先获取对象
		getPopuWindow();
//		opWindow.showAsDropDown(v);
//		int height =
		
		//初始化按键
		initButtons();
		popWindow.showAtLocation(v,Gravity.BOTTOM, 0, height/9);
	}
	
	
	protected void  initPopMenu() {
		//获取菜单的布局
		view = pa.getLayoutInflater().inflate(R.layout.menu_layout, null, false);
		//创建popmenu对象
		popWindow = new PopupWindow(view,width*4/5,height/9,true);
		//设置动画效果
		popWindow.setAnimationStyle(R.style.AnimationFade);
		//设置点击其他地方消失
		view.setOnTouchListener(new OnTouchListener() {
			
			@Override
			public boolean onTouch(View v, MotionEvent event) {
				
				if (popWindow!=null&&popWindow.isShowing()){
					popWindow.dismiss();
					popWindow = null;
				}
				return false;
			}
		});
	
	}
	
	/**
	 * 获取PopuMenu对象实例
	 */
	private void getPopuWindow(){
		if (null!=popWindow){
			//再次点击是退出
			popWindow.dismiss();
			return ;
		}
		else {
			//首次点击时开启
			initPopMenu();
		}
	}
	
	public void initButtons(){
		//颜色按钮的初始化
		Button b1 = (Button)view.findViewById(R.id.menu_color);
		Log.i("BUTTON", b1.toString());
		b1.setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				String[] colors = {"红色","黄色","绿色","黑色"};
				new AlertDialog.Builder(pa).setTitle("请选择颜色").setItems(colors, new DialogInterface.OnClickListener() {

					@Override
					public void onClick(DialogInterface dialog, int which) {
						// TODO Auto-generated method stub
						if (which==0){
							myView.color = Color.RED;
						}else if (which == 1){
							myView.color = Color.YELLOW;
						}else if (which == 2){
							myView.color = Color.GREEN;
						}else {
							myView.color = Color.CYAN;
						}
						dialog.dismiss();
						popWindow.dismiss();
						popWindow = null;
					}
				}).create().show();
			}
		});
		
		//线条按钮的初始化
		Button b2 = (Button)view.findViewById(R.id.menu_size);
		b2.setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				String[] sizes = {"1px","3px","5px","7px",};
				new AlertDialog.Builder(pa).setTitle("请选择线条的粗细").setItems(sizes, new DialogInterface.OnClickListener() {
					
					public void onClick(DialogInterface dialog, int which) {
						if (which==0){
							myView.stoke = 1;
						}else if (which == 1){
							myView.stoke = 3;
						}else if (which == 2){
							myView.stoke = 6;
						}else {
							myView.stoke = 9;
						}
						dialog.dismiss();
						popWindow.dismiss();
						popWindow = null;
					}
				}).create().show();
				
			}
		});
		
		
		//样式按钮的初始化
		Button b3 = (Button)view.findViewById(R.id.menu_type);
		b3.setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				Toast.makeText(pa, "功能暂无", Toast.LENGTH_LONG).show();
			}
		});
		
		//图片按钮的初始化
		Button b4 =  (Button)view.findViewById(R.id.menu_pic);
		b4.setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				new AlertDialog.Builder(pa).setMessage("确定要清空画面").setPositiveButton("确定", new DialogInterface.OnClickListener() {
					
					public void onClick(DialogInterface dialog, int which) {
						// TODO Auto-generated method stub
						myView.setBitmap(null);
						myView.invalidate();
						dialog.dismiss();
						popWindow.dismiss();
						popWindow = null;
					}
				}).setNegativeButton("取消", new DialogInterface.OnClickListener() {
					
					@Override
					public void onClick(DialogInterface dialog, int which) {
						// TODO Auto-generated method stub
						dialog.dismiss();
						popWindow.dismiss();
						popWindow = null;
					}
				}).create().show();
			}
		});
	}
	
	
	
}

效果图：
Android侧面菜单(覆盖内容)的实现