Android开发笔记（一百零一）滑出式菜单

可移动页面MoveActivity

滑出式菜单从界面上看，像极了一个水平滚动视图HorizontalScrollView，当然也可以使用HorizontalScrollView来实现侧滑菜单。不过今天博主要说的是利用线性布局LinearLayout来实现，而且是水平方向上的线性布局。


可是LinearLayout作为水平展示时有点逗，因为如果下面有两个子视图的宽度都是match_parent，那么LinearLayout只会显示第一个子视图，第二个子视图却是怎么拉也死活显示不了。倘若在外侧加个HorizontalScrollView，由于HorizontalScrollView的宽度只能是wrap_content，因此子视图的宽度也只能是wrap_content而不能是match_parent了，故而HorizontalScrollView做不到子页面全屏的效果。


现在我们既希望两个子视图的宽度是match_parent，又希望能够拖动两个子视图，还有没有办法呢？办法肯定是有的，在《 Android开发笔记（三十五）页面布局视图》中，我们提到margin和padding都可用来设置空隙，空隙的数值都是正数，其实空隙值也能是负数，负数表示该视图被隐藏了一部分，仿佛一张纸插了部分纸面到书中，于是只有一部分露了出来。具体到LinearLayout的编码实现，对应的便是LinearLayout.LayoutParams的leftMargin参数，若该参数为正数，则视图页面拉出了一段空白；若该参数为负数，则视图页面隐藏了一段内容；若该参数是该视图宽度的赋值，则表示视图页面完全隐藏了起来，跟visible="gone"的效果类似。


所以我们可以给视图添加触摸监听器OnTouchListener，在触摸坐标发生变化的同时，给菜单子页面隐入隐出对应的宽度，从而达到抽屉式拉出菜单的效果。一旦触摸弹起，根据手势滑动的距离，判断当前是要拉出整个菜单，还是缩回才拉出一部分的菜单。这个判断可按照滑动偏移是否达到屏幕一半宽度的条件，至于自动拉出或者自动缩进的动画，可由Runnable来定时刷新视图的leftMargin参数。


下面是一个简单侧滑的效果截图：



下面是一个简单侧滑的代码例子：

import com.example.exmslidingmenu.util.MetricsUtil;

import android.annotation.SuppressLint;
import android.annotation.TargetApi;
import android.app.Activity;
import android.os.Build;
import android.os.Bundle;
import android.os.Handler;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.View.OnTouchListener;
import android.widget.LinearLayout;

public class MoveActivity extends Activity implements OnTouchListener,OnClickListener {
	private static final String TAG = "MoveActivity";

	private int screenWidth;
	private float rawX=0;
	private LinearLayout.LayoutParams menuParams;
	private View ll_menu_move;
	private View ll_content_move;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_move);
		initView();
	}
	
	@TargetApi(Build.VERSION_CODES.JELLY_BEAN_MR1)
	private void initView() {
		ll_menu_move = (View) findViewById(R.id.ll_menu_move);
		ll_content_move = (View) findViewById(R.id.ll_content_move);
		
		screenWidth = MetricsUtil.getWidth(this);
		menuParams = (LinearLayout.LayoutParams) ll_menu_move.getLayoutParams();
		menuParams.width = screenWidth;
		menuParams.leftMargin = -screenWidth;
		ll_content_move.getLayoutParams().width = screenWidth;
		ll_menu_move.setOnClickListener(this);
		ll_content_move.setOnTouchListener(this);
	}

	@SuppressLint("ClickableViewAccessibility")
	@Override
	public boolean onTouch(View v, MotionEvent event) {
		int distanceX = (int) (event.getRawX() - rawX);
		switch (event.getAction()) {
		case MotionEvent.ACTION_DOWN:
			rawX = event.getRawX();
			break;
		case MotionEvent.ACTION_MOVE:
			if (distanceX > 0) {
				menuParams.leftMargin = -screenWidth + distanceX;
				ll_menu_move.setLayoutParams(menuParams);
			}
			break;
		case MotionEvent.ACTION_UP:
			if (distanceX < screenWidth/2) {
				mHandler.postDelayed(new ScrollRunnable(-1, distanceX), mTimeGap);
			} else {
				mHandler.postDelayed(new ScrollRunnable(1, distanceX), mTimeGap);
			}
			break;
		}
		return true;
	}

	private int mTimeGap = 20;
	private int mDistanceGap = 20;
	private Handler mHandler = new Handler();
	private class ScrollRunnable implements Runnable {
		private int mDirection;
		private int mDistance;
		public ScrollRunnable(int direction, int distance) {
			mDirection = direction;
			mDistance = distance;
		}
		
		@Override
		public void run() {
			if (mDirection==-1 && mDistance>0) {
				mDistance -= mDistanceGap;
				if (mDistance < 0) {
					mDistance = 0;
				}
				menuParams.leftMargin = -screenWidth + mDistance;
				ll_menu_move.setLayoutParams(menuParams);
				mHandler.postDelayed(new ScrollRunnable(-1, mDistance), mTimeGap);
			} else if (mDirection==1 && mDistance<screenWidth) {
				mDistance += mDistanceGap;
				if (mDistance > screenWidth) {
					mDistance = screenWidth;
				}
				menuParams.leftMargin = -screenWidth + mDistance;
				ll_menu_move.setLayoutParams(menuParams);
				mHandler.postDelayed(new ScrollRunnable(1, mDistance), mTimeGap);
			}
		}
	}
	@Override
	public void onClick(View v) {
		if (v.getId() == R.id.ll_menu_move) {
			menuParams.leftMargin = -screenWidth;
			ll_menu_move.setLayoutParams(menuParams);
		}
	}

}

水平列表视图HorizontalListView

上面说的侧滑菜单只适用于单个Activity页面，如果要在其他页面也使用侧滑菜单，显然是不方便的。基于此，我们希望把侧滑功能独立出来，封装成一个通用的控件。现在有个开源的HorizontalListView，它是水平滚动的列表视图，如果该视图只有两列，左边一列作为菜单页面，右边一列作为内容页面，这就很类似侧滑菜单的功能。


当然，要把HorizontalListView作为侧滑菜单来使用，我们还需要对其做下列改造：
1、在手势松开的时候，根据当前的滑动偏移，自动判断接下来是往左滑动对齐，还是往右滑动对齐。具体步骤就是：首先在onTouch方法中拦截MotionEvent.ACTION_UP与MotionEvent.ACTION_CANCE进行判断；其次计算当前的滑动偏移，如果滑动距离超过阈值，则继续翻页滑动，否则做滑动缩回；最后调用Scroller的startScroll方法来完成后续的滑动动画效果。
2、菜单默认在左边页，内容默认在右边页，所以首次加载视图时，页面要自动滑到右边的内容页（调用scrollTo方法滚动到内容页）。
3、通过手势滑动拉出菜单页后，要捕获点击事件完成翻页，即在onSingleTapUp方法中将当前页面切换到内容页。


下面是采用HorizontalListView实现侧滑的效果截图：

滑出菜单SlidingMenu

SlidingMenu开发步骤

前面说的两个侧滑效果，都依赖于手势触摸事件，实际开发中由于页面上很多控件都要响应点击事件，其实不可能一一接管页面触摸事件。问题的症结在于菜单布局和内容布局都在同一个页面中，所以极易造成滑动冲突，要想彻底解决滑动冲突，最好还是把两种布局分开到不同页面处理，技术上便是使用不同的Fragment分别放置菜单和内容布局。SlidingMenu就是采用这一思路的开源库，也是使用最广泛的滑出式菜单控件。


使用SlidingMenu的开发步骤大致如下：
1、给自己的工程引用SlidingMenu库工程；
2、写个继承自SlidingFragmentActivity的Activity类；
3、调用setContentView方法设置内容布局，调用setBehindContentView方法设置菜单布局，注意两个初始布局都是空的；
4、从自己写的Fragment类分别构造出实际的内容布局和菜单布局，然后调用FragmentManager的replace方法把初始布局替换为实际布局；
5、调用getSlidingMenu()获得侧滑菜单的实例，并设置侧滑菜单的显示参数；

SlidingMenu参数设置

下面是SlidingMenu常用的参数设置：

setSlidingEnabled : 设置是否允许滑动。
setMode : 设置滑出模式。LEFT表示左侧菜单，RIGHT表示右侧菜单，LEFT_RIGHT表示左右两侧都有菜单。
setTouchModeAbove : 设置触摸范围。TOUCHMODE_MARGIN表示只在空白处响应触摸，TOUCHMODE_FULLSCREEN表示全屏均响应触摸，TOUCHMODE_NONE表示不响应触摸。
setBehindOffsetRes : 设置菜单布局相对于页面的偏移。
setBehindScrollScale : 设置滚动条的缩放比例。
setFadeDegree : 设置淡入淡出的度数。
setShadowWidthRes : 设置阴影的宽度。
setShadowDrawable : 设置背景图像。
setSecondaryMenu : 设置第二个菜单布局。setMode为LEFT_RIGHT时使用。
setSecondaryShadowDrawable : 设置第二个菜单的背景图像。setMode为LEFT_RIGHT时使用。

菜单点击时跳回内容页面

菜单点击的交互例子可见demo工程的ResponsiveUIActivity，主要做法步骤如下：

1、定义一个菜单点击接口如OnSlidingMenuListener，其内部定义菜单点击方法如onMenuItemClick；
2、菜单Fragment类定义OnSlidingMenuListener的实例，及该实例的设置方法setOnSlidingMenuListener；
3、菜单布局的Fragment类继承自ListFragment；
4、菜单Fragment类在onCreateView中调用setListAdapter方法设置菜单项列表信息；
5、重写菜单Fragment类的onListItemClick方法，收到点击事件后调用onMenuItemClick；
6、Activity类实现接口OnSlidingMenuListener，并重写onMenuItemClick方法进行相应的业务逻辑处理；
7、Activity类构造菜单布局后，对菜单布局设置点击接口setOnSlidingMenuListener(this);

ViewPager使用SlidingMenu

ViewPager本身做翻页操作时就使用了Fragment，然后SlidingMenu也采用Fragment区分菜单布局和内容布局，因此如果把ViewPager作为内容布局，就会产生Fragment嵌套的情况。即ViewPager自身就是作为内容布局的Fragment嵌入到SlidingMenu中，然后ViewPager的子页面也是作为Fragment嵌入到ViewPager，这样就造成了一个问题：Fragment嵌套可能导致资源回收异常。


表现在界面上，就是点击菜单布局后回到ViewPager页面，会看到ViewPager的头两页变空白了，查看日志发现头两页不会执行onCreateView方法。这就涉及到Fragment的回收机制，onCreateView只会在该页面第一次打开时调用，如果该页面还未被回收，自然就不会重新创建。我们首次进入Activity页面，ViewPager的头两个页面已经执行了onCreateView；接着点击菜单项，SlidingMenu把整个内容页面的Fragment替换掉，但这时对于ViewPager的子页面来说，仅仅是做了detach操作，并没有做remove或destroy操作，也就是说，ViewPager子页面根本就没被回收；所以点击菜单重新回到替换后的ViewPager时，系统发现头两页没有回收，自然也不会再次onCreateView了。


不知道这个情况算不算Fragment的一个bug，不管怎样，系统没有自动回收嵌套的Fragment，就得我们自己手动回收了。下面就是一个回收嵌套Fragment的代码例子，先执行detach操作，再执行remove操作：

	public void cleanFragments() {
		for (Fragment fragment : mFragments) {
			mFragmentMgr
				.beginTransaction()
				.detach((ColorFragment) fragment)
				.commit();
			mFragmentMgr
				.beginTransaction()
				.remove((ColorFragment) fragment)
				.commit();
		}
	}

代码示例

限于篇幅，这里就不贴出本文的完整源码了，有需要的朋友可留下邮箱，我看到后把工程打包用邮件发过去。

下面是SlidingMenu+ViewPager的效果截图：



下面是SlidingMenu的Activity主页面代码示例：

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.View;

import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu;
import com.jeremyfeinstein.slidingmenu.lib.app.SlidingFragmentActivity;

public abstract class BaseContentActivity extends SlidingFragmentActivity {

	protected Fragment mContent;
	protected Fragment mMenuLeft;
	protected Fragment mMenuRight;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);

		int mode = SlidingMenu.LEFT;
		Bundle bundle = getIntent().getExtras();
		if (bundle != null) {
			mode = bundle.getInt("mode", SlidingMenu.LEFT);
		}
		if (findViewById(R.id.menu_frame) == null) {
			setBehindContentView(R.layout.menu_frame);
			getSlidingMenu().setMode(mode);
			getSlidingMenu().setSlidingEnabled(true);
			getSlidingMenu().setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
		} else {
			View v = new View(this);
			setBehindContentView(v);
			getSlidingMenu().setSlidingEnabled(false);
			getSlidingMenu().setTouchModeAbove(SlidingMenu.TOUCHMODE_NONE);
		}

		if (savedInstanceState != null) {
			mContent = getSupportFragmentManager().getFragment(
					savedInstanceState, "mContent");
		}
		if (mContent == null) {
			mContent = newDefaultContent();
		}
		setFragment(R.id.content_frame, mContent);

		mMenuLeft = newMenuFragment();
		setFragment(R.id.menu_frame, mMenuLeft);

		SlidingMenu sm = getSlidingMenu();
		sm.setBehindOffsetRes(R.dimen.slidingmenu_offset);
		sm.setShadowWidthRes(R.dimen.shadow_width);
		sm.setBehindScrollScale(0.25f);
		sm.setFadeDegree(0.25f);
		if (mode == SlidingMenu.LEFT_RIGHT) {
			sm.setSecondaryMenu(R.layout.menu_frame_two);
			mMenuRight = newMenuFragment();
			setFragment(R.id.menu_frame_two, mMenuRight);
			sm.setSecondaryShadowDrawable(R.drawable.shadow_right);
		}
		sm.setShadowDrawable((mode==SlidingMenu.RIGHT)?R.drawable.shadow_right:R.drawable.shadow_left);
	}

	protected void setFragment(int resid, Fragment fragment) {
		getSupportFragmentManager()
			.beginTransaction()
			.replace(resid, fragment)
			.commit();
	}

	protected abstract Fragment newDefaultContent();

	protected abstract Fragment newMenuFragment();
	
	@Override
	public void onSaveInstanceState(Bundle outState) {
		super.onSaveInstanceState(outState);
		getSupportFragmentManager().putFragment(outState, "mContent", mContent);
	}

}

下面是SlidingMenu左侧菜单的代码示例：

import android.content.Context;
import android.os.Bundle;
import android.support.v4.app.ListFragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ListView;

public class BaseMenuFragment extends ListFragment {
	protected View mView;
	protected Context mContext;

	protected OnSlidingMenuListener onSlidingMenuListener;
	public void setOnSlidingMenuListener(OnSlidingMenuListener listener) {
		this.onSlidingMenuListener = listener;
	}
	
	protected int mLayoutId;
	public BaseMenuFragment(int layout_id) {
		mLayoutId = layout_id;
	}

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
		mContext = getActivity();
		mView = inflater.inflate(mLayoutId, null);
		return mView;
	}

	@Override
	public void onListItemClick(ListView lv, View v, int position, long id) {
		if (onSlidingMenuListener != null) {
			onSlidingMenuListener.onMenuItemClick(position);
		}
	}
	
}

点此查看Android开发笔记的完整目录