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开发笔记的完整目录

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券