Android UI开发第二十七篇——实现左右划出菜单

最新推荐文章于 2022-05-30 20:36:52 发布
最新推荐文章于 2022-05-30 20:36:52 发布
阅读量90 收藏
点赞数
文章标签： 移动开发 ui

年前就想写左右滑动菜单，苦于没有时间，一直拖到现在，这篇代码实现参考了网上流行的SlidingMenu，使用的FrameLayout布局，不是扩展的HorizontalScrollView。

程序中自定义了菜单view：SlidingView，继承自ViewGroup，使用FrameLayout布局。重写了onInterceptTouchEvent(MotionEvent ev)方法实现ontouch的分发拦截，重写了onTouchEvent(MotionEvent ev)方法，实现左右滑动。

public class SlidingView extends ViewGroup {

	private FrameLayout mContainer;
	private Scroller mScroller;
	private VelocityTracker mVelocityTracker;
	private int mTouchSlop;
	private float mLastMotionX;
	private float mLastMotionY;
	private static final int SNAP_VELOCITY = 1000;
	private View mLeftView;
	private View mRightView;

	public SlidingView(Context context) {
		super(context);
		init();
	}

	public SlidingView(Context context, AttributeSet attrs) {
		super(context, attrs);
		init();
	}

	public SlidingView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		init();
	}

	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		super.onMeasure(widthMeasureSpec, heightMeasureSpec);
		mContainer.measure(widthMeasureSpec, heightMeasureSpec);
	}

	@Override
	protected void onLayout(boolean changed, int l, int t, int r, int b) {
		final int width = r - l;
		final int height = b - t;
		mContainer.layout(0, 0, width, height);
	}

	private void init() {
		mContainer = new FrameLayout(getContext());
		mContainer.setBackgroundColor(0xff000000);
		mScroller = new Scroller(getContext());
		mTouchSlop = ViewConfiguration.get(getContext()).getScaledTouchSlop();
		super.addView(mContainer);
	}

	public void setView(View v) {
		if (mContainer.getChildCount() > 0) {
			mContainer.removeAllViews();
		}
		mContainer.addView(v);
	}

	@Override
	public void scrollTo(int x, int y) {
		super.scrollTo(x, y);
		postInvalidate();
	}

	@Override
	public void computeScroll() {
		if (!mScroller.isFinished()) {
			if (mScroller.computeScrollOffset()) {
				int oldX = getScrollX();
				int oldY = getScrollY();
				int x = mScroller.getCurrX();
				int y = mScroller.getCurrY();
				if (oldX != x || oldY != y) {
					scrollTo(x, y);
				}
				// Keep on drawing until the animation has finished.
				invalidate();
			} else {
				clearChildrenCache();
			}
		} else {
			clearChildrenCache();
		}
	}

	private boolean mIsBeingDragged;

	
    /**
     * 实现了ontouch的分发拦截
     */
	@Override
	public boolean onInterceptTouchEvent(MotionEvent ev) {

		final int action = ev.getAction();
		final float x = ev.getX();
		final float y = ev.getY();

		switch (action) {
		case MotionEvent.ACTION_DOWN:
			mLastMotionX = x;
			mLastMotionY = y;
			mIsBeingDragged = false;
			break;

		case MotionEvent.ACTION_MOVE:
			final float dx = x - mLastMotionX;
			final float xDiff = Math.abs(dx);
			final float yDiff = Math.abs(y - mLastMotionY);
			if (xDiff > mTouchSlop && xDiff > yDiff) {
				mIsBeingDragged = true;
				mLastMotionX = x;
			}
			Log.d("Sliding", "SlidingView_Touch:"+x+"|"+y);
			Log.d("Sliding", "SlidingView_Touch:"+xDiff+"|"+mTouchSlop+"|"+yDiff+"|"+mLastMotionY);
			Log.d("Sliding", "SlidingView_Touch:"+mIsBeingDragged);
			break;

		}
		return mIsBeingDragged;
	}

	@Override
	public boolean onTouchEvent(MotionEvent ev) {

		if (mVelocityTracker == null) {
			mVelocityTracker = VelocityTracker.obtain();
		}
		mVelocityTracker.addMovement(ev);

		final int action = ev.getAction();
		final float x = ev.getX();
		final float y = ev.getY();

		switch (action) {
		case MotionEvent.ACTION_DOWN:
			if (!mScroller.isFinished()) {
				mScroller.abortAnimation();
			}
			mLastMotionX = x;
			mLastMotionY = y;
			if (getScrollX() == -getLeftMenuWidth()
					&& mLastMotionX < getLeftMenuWidth()) {
				return false;
			}

			if (getScrollX() == getRightMenuWidth()
					&& mLastMotionX > getLeftMenuWidth()) {
				return false;
			}

			break;
		case MotionEvent.ACTION_MOVE:
			if (mIsBeingDragged) {
				enableChildrenCache();
				final float deltaX = mLastMotionX - x;
				mLastMotionX = x;
				float oldScrollX = getScrollX();
				float scrollX = oldScrollX + deltaX;

				if (deltaX < 0 && oldScrollX < 0) { // left view
					final float leftBound = 0;
					final float rightBound = -getLeftMenuWidth();
					if (scrollX > leftBound) {
						scrollX = leftBound;
					} else if (scrollX < rightBound) {
						scrollX = rightBound;
					}
				} else if (deltaX > 0 && oldScrollX > 0) { // right view
					final float rightBound = getRightMenuWidth();
					final float leftBound = 0;
					if (scrollX < leftBound) {
						scrollX = leftBound;
					} else if (scrollX > rightBound) {
						scrollX = rightBound;
					}
				}

				scrollTo((int) scrollX, getScrollY());
				if (scrollX > 0) {
					mLeftView.setVisibility(View.GONE);
					mLeftView.clearFocus();
					mRightView.setVisibility(View.VISIBLE);
					mRightView.requestFocus();
				} else {
					mLeftView.setVisibility(View.VISIBLE);
					mLeftView.requestFocus();
					mRightView.setVisibility(View.GONE);
					mRightView.clearFocus();
				}
			}
			break;
		case MotionEvent.ACTION_CANCEL:
		case MotionEvent.ACTION_UP:
			if (mIsBeingDragged) {
				final VelocityTracker velocityTracker = mVelocityTracker;
				velocityTracker.computeCurrentVelocity(1000);
				int velocityX = (int) velocityTracker.getXVelocity();
				velocityX = 0;
				int oldScrollX = getScrollX();
				int dx = 0;
				if (oldScrollX < 0) {
					// 左边
					if (oldScrollX < -getLeftMenuWidth() / 2
							|| velocityX > SNAP_VELOCITY) {
						// 左侧页面划出
						dx = -getLeftMenuWidth() - oldScrollX;

					} else if (oldScrollX >= -getLeftMenuWidth() / 2
							|| velocityX < -SNAP_VELOCITY) {
						// 左侧页面关闭
						dx = -oldScrollX;
					}
				} else {
					// 右边
					if (oldScrollX > getRightMenuWidth() / 2
							|| velocityX < -SNAP_VELOCITY) {
						// 右侧页面划出
						dx = getRightMenuWidth() - oldScrollX;

					} else if (oldScrollX <= getRightMenuWidth() / 2
							|| velocityX > SNAP_VELOCITY) {
						// 右侧页面关闭
						dx = -oldScrollX;
					}
				}

				smoothScrollTo(dx);
				clearChildrenCache();

			}

			break;

		}
		if (mVelocityTracker != null) {
			mVelocityTracker.recycle();
			mVelocityTracker = null;
		}
		return true;
	}

	private int getLeftMenuWidth() {
		if (mLeftView == null) {
			return 0;
		}
		return mLeftView.getWidth();
	}

	private int getRightMenuWidth() {
		if (mRightView == null) {
			return 0;
		}
		return mRightView.getWidth();
	}

	@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);
	}

	public View getRightView() {
		return mRightView;
	}

	public void setRightView(View mRightView) {
		this.mRightView = mRightView;
	}

	public View getMenuView() {
		return mLeftView;
	}

	public void setLeftView(View mLeftView) {
		this.mLeftView = mLeftView;
	}

	void toggle() {
		int menuWidth = mLeftView.getWidth();
		int oldScrollX = getScrollX();
		if (oldScrollX == 0) {
			smoothScrollTo(-menuWidth);
		} else if (oldScrollX == -menuWidth) {
			smoothScrollTo(menuWidth);
		}
	}

	/**
	 * 打开（关闭）左侧页面
	 */
	public void showLeftView() {
		mLeftView.setVisibility(View.VISIBLE);
		mRightView.setVisibility(View.GONE);
		int menuWidth = mLeftView.getWidth();
		int oldScrollX = getScrollX();
		if (oldScrollX == 0) {
			smoothScrollTo(-menuWidth);
		} else if (oldScrollX == -menuWidth) {
			smoothScrollTo(menuWidth);
		}
	}

	/**
	 * 打开（关闭）右侧页面
	 */
	public void showRightView() {
		mLeftView.setVisibility(View.GONE);
		mLeftView.clearFocus();
		mRightView.setVisibility(View.VISIBLE);
		mRightView.requestFocus();
		int menuWidth = mRightView.getWidth();
		int oldScrollX = getScrollX();
		if (oldScrollX == 0) {
			smoothScrollTo(menuWidth);
		} else if (oldScrollX == menuWidth) {
			smoothScrollTo(-menuWidth);
		}
	}

	/**
	 * 显示中间页面
	 */
	public void showCenterView() {
		int menuWidth = mRightView.getWidth();
		int oldScrollX = getScrollX();
		if (oldScrollX == menuWidth) {
			showRightView();
		} else if (oldScrollX == -menuWidth) {
			showLeftView();
		}
	}

	void smoothScrollTo(int dx) {
		int duration = 500;
		int oldScrollX = getScrollX();
		mScroller.startScroll(oldScrollX, getScrollY(), dx, getScrollY(),
				duration);
		invalidate();
	}

	void enableChildrenCache() {
		final int count = getChildCount();
		for (int i = 0; i < count; i++) {
			final View layout = (View) getChildAt(i);
			layout.setDrawingCacheEnabled(true);
		}
	}

	void clearChildrenCache() {
		final int count = getChildCount();
		for (int i = 0; i < count; i++) {
			final View layout = (View) getChildAt(i);
			layout.setDrawingCacheEnabled(false);
		}
	}

}

SlidingMenu对SlidingView做了进一步封装处理： 

public class SlidingMenu extends RelativeLayout {

	private SlidingView mSlidingView;
	private View mLeftView;
	private View mRightView;
	// menu width
	private int alignScreenWidth;

	public SlidingMenu(Context context) {
		super(context);
	}

	public SlidingMenu(Context context, AttributeSet attrs) {
		super(context, attrs);
	}

	public SlidingMenu(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
	}

	public void setAlignScreenWidth(int alignScreenWidth) {
		this.alignScreenWidth = alignScreenWidth;
	}

	public void setLeftView(View view) {
		LayoutParams behindParams = new LayoutParams(alignScreenWidth,
				LayoutParams.MATCH_PARENT);
		addView(view, behindParams);
		mLeftView = view;
	}

	public void setRightView(View view) {
		LayoutParams behindParams = new LayoutParams(alignScreenWidth,
				LayoutParams.MATCH_PARENT);
		behindParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);
		addView(view, behindParams);
		mRightView = view;
	}

	public void setCenterView(View view) {
		LayoutParams aboveParams = new LayoutParams(LayoutParams.MATCH_PARENT,
				LayoutParams.MATCH_PARENT);
		mSlidingView = new SlidingView(getContext());
		addView(mSlidingView, aboveParams);
		mSlidingView.setView(view);
		mSlidingView.invalidate();
		mSlidingView.setLeftView(mLeftView);
		mSlidingView.setRightView(mRightView);
	}

	public void showLeftView() {
		mSlidingView.showLeftView();
	}

	public void showRightView() {
		mSlidingView.showRightView();
	}

	public void showCenterView() {
		mSlidingView.showCenterView();
	}

}

SlidingMenu的使用代码

public class SlidingActivity extends Activity implements OnClickListener{
	SlidingMenu mSlidingMenu;

	@Override
	protected void onCreate(Bundle arg0) {
		super.onCreate(arg0);
		setContentView(R.layout.main);


		DisplayMetrics dm = new DisplayMetrics();
		getWindowManager().getDefaultDisplay().getMetrics(dm);

		mSlidingMenu = (SlidingMenu) findViewById(R.id.slidingMenu);
		mSlidingMenu.setAlignScreenWidth((dm.widthPixels / 5) * 2);
		
		View leftView=getLayoutInflater().inflate(R.layout.left_menu, null);
		View rightView=getLayoutInflater().inflate(R.layout.right_menu, null);
		View centerView=getLayoutInflater().inflate(R.layout.center, null);
		
		mSlidingMenu.setLeftView(leftView);
		mSlidingMenu.setRightView(rightView);
		mSlidingMenu.setCenterView(centerView);
        
		Button showLeftMenu=(Button)centerView.findViewById(R.id.center_left_btn);
		showLeftMenu.setOnClickListener(this);
		Button showRightMenu=(Button)centerView.findViewById(R.id.center_right_btn);
		showRightMenu.setOnClickListener(this);
	}

	@Override
	public void onClick(View v) {
		// TODO Auto-generated method stub
		switch (v.getId()) {
		case R.id.center_left_btn:
			mSlidingMenu.showLeftView();
			break;
        case R.id.center_right_btn:
        	mSlidingMenu.showRightView();
			break;
		default:
			break;
		}
	}
	
}


代码：http://download.youkuaiyun.com/detail/xyz_lmn/5109965

/**
* @author 张兴业
* android开发进阶群： 241395671
*/

xyzlmn
关注
Android开发最新所有框架总结
zhwadezh的博客
01-19 1万+
1. Retrofit　　 一句话介绍：Retrofit是一款类型安全的网络框架，基于HTTP协议，服务于Android和java语言 上榜理由：Retrofit以21.8k的stars量雄踞github中android子标题榜首，第一当之无愧。 官网地址 http://square.github.io/retrofit/ github   https://github.c
Android左右菜单滑动
04-09
这是一个可以从左，或右端滑出菜单，菜单中可以添加ListView，并写了个公共控件来处理上下，左右手势处理，避免冲突。
Android实现导航菜单左右滑动效果
Dream It Possible
05-02 7639
今天给大家介绍在Android中实现顶部导航菜单左右滑动效果的二种解决方案。 第一种解决方案：  在以前的一篇博文中我使用android-support-v4.jar实现了左右滑动指引效果，有兴趣的朋友可以查看： http://www.cnblogs.com/hanyonglu/archive/2012/04/07/2435589.html    那么今天第一个示例我仍
Android之 左右滑动菜单
weixin_30375247的博客
10-02 258
近来学习了极客学院有关于界面左右滑动的视频，就在这里写个博客，巩固一下知识点，以免忘了。 这里主要介绍界面是如何左右滑动的： 1.首先我们应该设置好将要滑动的三个界面，即leftMenu、middleMenu、rightMenu三个布局，并且放置好它们的位置，这段大家自己在源码中看 2.当位置放好后，就可以开始关于滑动方面的代码。 页面的滑动是通过点的坐标变化距离来进行来实现的。首先我们定...
Android左右滑动菜单
09-10
android滑动菜单，在开发中经常遇到像91手机助手和豌豆夹的滑动菜单。现在滑动菜单也成移动开发在主流。
1000套安卓（Android）毕业设计（带论文）、大作业、实例快速下载 （Android Studio）
web13618542420的博客
05-30 5338
ctrl+F 快速定位 序号 类型 项目名称 1 毕业设计 毕业设计-基于安卓Android学生考勤信息管理系统.zip 2 毕业设计 毕业设计-安卓Android教务选课成绩管理系统.zip 3 毕业设计 114基于Android的理财记账本20141215+论文+需求文档+演示视频.zip.zip 4 毕业设计 Android科大讯飞语音识别.zip 5 毕业设计 基于android的点餐系统.zip.zip 6 毕业设计 Android客户端与服务器端的json数据交互(服务端客户端) .zip .
2017 github 上android 源码（适合工作中开发）
热门推荐
snake_son的博客
12-30 1万+
转载： http://blog.youkuaiyun.com/a774057695/article/details/49889437 https://github.com/XinRan5312/Android-open-project 目前包括：Android 开源项目第一篇——个性化控件(View)篇 包括ListView、ActionBar、Menu、ViewPager、Gallery、GridV
2017年Android第三方框架排行榜
qin的博客
09-15 1679
2017年Android百大第三方框架排行榜 榜单介绍排行榜包括四大类：单一框架：仅提供路由、网络层、UI层、通信层或其他单一功能的框架 混合开发框架：提供开发hybrid app、h5与webview结合能力、web app能力的框架。企业级开源项目：可以独立运行的app，有极高的学习价值、思路借鉴意义 书籍类开源项目：类似Open-sourc-project这样的导航类项目； 大型公司的Andr
Android上的菜单左右滑动菜单，android-menudrawer
01-18
Android上的菜单展示风格各异，其中用得最多且体验最好的莫过于左右滑动来显示隐藏的菜单，android-menudrawer是一个滑动 式菜单实现，允许用户在应用当中实现无缝导航。该项目具有多种菜单展示效果，其中最常见的就是通过屏幕边缘拖动或点击动作栏的“向上”按钮显示。
Android项目导航菜单横向左右滑动并和下方的控件实现联动.rar
09-09
Android项目导航菜单横向左右滑动并和下方的控件实现联动.rar
一个很简易的导航菜单栏，支持左右滑动！
08-22
一个很简易的导航菜单栏，支持左右滑动！ 无意中在群里看到水友问是否有这样的demo，自己正好也闲暇无事写了一下，真的很简单的。望采纳 。谢谢！
android 左右侧滑菜单（点击+左右滑动）
人走丿茶凉
08-14 2809
在android开发中，左右侧滑菜单的开发已成为我们现在开发的必备技术之一，再次之前，我没有做过相类似的demo,但是项目的开发有要求有这样的效果，而且大家都知道，虽然网上由开源的代码，但是不仅种类多，看着一个头两个大，而且代码不好分离。因此我们无法简化成自己的demo,为此，还查阅了很多别人的资料，最后做出了自己想要的效果，具体效果如下所示：图1 左边菜单 图2 右边菜单 今天要做的是把两
android实现图片菜单,android 左右侧滑动菜单 效果实现 有图有源码
weixin_39729115的博客
05-28 193
【实例简介】1、简介我们时常看到Android的一些菜单的设置 可以左右滑动,如下图。要实现下面的效果我们可以获得许多的实现在github 通过 收索 “SlidingMenu”。本实验是在http://www.github.com/TangKe/SlideMenu基础上该的。本次实验的实验的效果2、具体的实现。本次实验的基础是在上面提供的资源和code，应用到我们实验上面。(1)、BaseSl...
左侧菜单滑动效果html,jquery实现左右滑动菜单效果代码
weixin_36134871的博客
06-02 555
本文实例讲述了jquery实现左右滑动菜单效果代码。分享给大家供大家参考。具体如下：这里演示了三种背景颜色左右滑动jquery菜单导航效果，IE下有问题，本菜单使用了CSS3的部分属性，因此建议使用火狐或Chrome等浏览器获取最佳效果。当把鼠标移到菜单上的时候，对应菜单项的背景会变化，而且本菜单具有圆角的效果。运行效果截图如下：在线演示地址如下：具体代码如下：/p>"http://www....
android 之ViewPager左右滑动切换界面
04-19
NULL 博文链接：https://fuchangle.iteye.com/blog/1876429
实现点击Button后弹出下拉菜单的UI设计
根据给定的文件名称“TestPullPopWindow”，我们可以推断这是一个测试程序，用于验证下拉菜单弹出功能的实现。具体实现代码的结构可能包括： - HTML中定义一个按钮和一个容器。 - CSS中定义按钮和容器的样式，容器...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值