左右滑动菜单,模仿 ios智慧无锡 上的左右滑动菜单

滑动到左边,滑动到右边,手势滑动时候动画可以自行修改。

控件是继承RelativeLayout,首先定义左边,中间,右边三个layout,我用的是LinearLayout,名字分别是,mLeftView, mMiddleView, mRightView, leftView和rightView放在middleView下面,分别占屏幕宽度的五分之四,middleView全屏显示,

初始化代码:

private void initView() {
		viewState = ViewState.MIDDLE_VIEW;
		
		//添加底层左右操作的view
		final RelativeLayout backLayout = new RelativeLayout(getContext());
		this.addView(backLayout, LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);

		final RelativeLayout.LayoutParams leftParams = new RelativeLayout.LayoutParams(space, 
				LayoutParams.MATCH_PARENT);
		backLayout.addView(mLeftView, leftParams);
		
		final RelativeLayout.LayoutParams rightParams = new RelativeLayout.LayoutParams(space, 
				LayoutParams.MATCH_PARENT);
		rightParams.addRule(ALIGN_PARENT_RIGHT, TRUE);
		backLayout.addView(mRightView, rightParams);

		
		//添加中间的view
		final LayoutParams p = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
		this.addView(mMiddleView, p);
		mMiddleView.setBackgroundColor(Color.WHITE);
	}


然后给MiddleView设置touch事件

@Override
	public boolean onTouch(View v, MotionEvent event) {
		switch (event.getAction()) {
		case MotionEvent.ACTION_DOWN:
			touchDownX = event.getRawX();
			break;
		case MotionEvent.ACTION_MOVE:
			final float distance = event.getRawX() - touchDownX;
			touchDownX = event.getRawX();
			moveMiddleViewPosition((int) distance); 
			break;
		case MotionEvent.ACTION_UP:
			stopMiddleViewPosition();
			break;
		default:
			break;
		}
		return true;
	}

/** 手势touch时候移动 middleView. **/
	private void moveMiddleViewPosition(int distance) {
		final LayoutParams params = (LayoutParams) mMiddleView.getLayoutParams();
		distance += params.leftMargin;
		
		if (Math.abs(distance) > space) {
			return;
		}
		setMiddleViewPosition(distance);
	}

/** 停止滑动,判断应该显示那个view. **/
	private void stopMiddleViewPosition() {
		final LayoutParams params = (LayoutParams) mMiddleView.getLayoutParams();
		final int leftMargin = params.leftMargin;
		//向右边滑动
		if (leftMargin >= 0) {
			//显示leftView
			if (leftMargin > space / 2) {
				showLeftView();
			//显示middleView
			} else {
				showMiddleView();
			}
		//向左滑动
		} else {
			//显示rightView
			if (leftMargin < -space / 2) {
				showRightView();
			//显示middleView
			} else {
				showMiddleView();
			}
		}
	}

还有两个重要方法

/**
	 * 通过 ObjectAnimator改变middleView的位置.
	 * @param destPosition		middleView的目标位置
	 * @param listener			动画执行的监听事件
	 */
	private void animatorMiddleView(int destPosition, AnimatorListenerNullImpl listener) {
		final LayoutParams params = (LayoutParams) mMiddleView.getLayoutParams();
		final ObjectAnimator oa = ObjectAnimator.ofInt(this, "middleViewPosition", params.leftMargin, destPosition);
		oa.setInterpolator(new LinearInterpolator());
		oa.setDuration(Math.abs(destPosition - params.leftMargin));
		oa.start();
		oa.addListener(listener);
	}
	
	/**
	 * 这个方法供 ObjectAnimator.ofInt(this, "middleViewPosition", src, dest);使用.
	 * @param distance
	 */
	public void setMiddleViewPosition(int distance) {
		final LayoutParams params = (LayoutParams) mMiddleView.getLayoutParams();
		params.leftMargin = distance;
		params.rightMargin = -distance;
		mMiddleView.setLayoutParams(params);
		
		if (distance > 0) {
			if (mLeftView.getVisibility() == INVISIBLE) {
				mLeftView.setVisibility(VISIBLE);
			}
			if (mRightView.getVisibility() == VISIBLE) {
				mRightView.setVisibility(INVISIBLE);
			}
			/*
			mLeftView.setPivotX(0);
			
			final float alpha = 0.4f + (params.leftMargin * 0.6f / space);
			mLeftView.setAlpha(alpha);
			mLeftView.setRotationY(10 - params.leftMargin * 1.0f / space * 10f);
			*/
			final float alpha = 0.2f + (params.leftMargin * 0.8f / space);
			mLeftView.setAlpha(alpha);
			mLeftView.setTranslationX(params.leftMargin * 150f / space - 150);
		} else {
			if (mLeftView.getVisibility() == VISIBLE) {
				mLeftView.setVisibility(INVISIBLE);
			}
			if (mRightView.getVisibility() == INVISIBLE) {
				mRightView.setVisibility(VISIBLE);
			}
			final float alpha = 0.2f + (params.rightMargin * 0.8f / space);
			mRightView.setAlpha(alpha);
			mRightView.setTranslationX(150 - params.rightMargin * 150f / space);
		}
	}

写的好垃圾阿,还是不会写博客,哎,还是上传完整的事例代码,感兴趣的可以下载看下。下载地址    http://download.csdn.net/detail/xizhao88/7304625


评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值