Android 左右侧滑组件

最新推荐文章于 2021-05-28 11:35:57 发布
最新推荐文章于 2021-05-28 11:35:57 发布 · 195 阅读 · 0
文章标签：

#移动开发 #ui

本文介绍了一种在Android上开发左右侧滑组件的方法，详细解释了如何使用Scroller实现横滑，以及Android事件传递机制等内容。该组件可以根据用户的手势进行左右侧视图的切换。

在android上开发一个左右侧滑的组件，需要先了解以下知识

Android中View绘制流程以及invalidate()等相关方法分析

使用Scroller实现横滑

android事件传递机制

先上图，看看demo

左边view显示：


右边view显示


源码如下

package com.wan.ui.view;

import android.content.Context;
import android.util.AttributeSet;
import android.util.Log;
import android.util.TypedValue;
import android.view.MotionEvent;
import android.view.VelocityTracker;
import android.view.View;
import android.view.ViewConfiguration;
import android.view.ViewGroup;
import android.widget.Scroller;

public class FlipperLayout extends ViewGroup {
	private final String TAG = "FlipperLayout";

	private final int LEFT_WIDTH = 54;
	private Scroller mScroller;
	private VelocityTracker mVelocityTracker;
	private int mWidth;

	public static final int SCREEN_STATE_CLOSE = 0;
	public static final int SCREEN_STATE_LEFT_OPEN = 1;
	public static final int SCREEN_STATE_RIGHT_OPEN = 2;

	public static final int SCREEN_STATE_LEFT_CLOSE = 3;
	public static final int SCREEN_STATE_RIGHT_CLOSE = 4;

	public static final int TOUCH_STATE_RESTART = 0;
	public static final int TOUCH_STATE_SCROLLING = 1;

	public static final int SCROLL_STATE_NO_ALLOW = 0;
	public static final int SCROLL_STATE_ALLOW = 1;

	// 页面移动的状态
	private int mScreenState = SCREEN_STATE_CLOSE;
	
	//标记Scroller 是否正在滚动
	private int mTouchState = TOUCH_STATE_RESTART;

	// 是否允许横滑，这个参数很重要，如果mScrollState ==SCROLL_STATE_NO_ALLOW 则横滑的事件不成立，取消
	private int mScrollState = SCROLL_STATE_NO_ALLOW;
	
	// 即将触发的事件
	private int mWillState = SCREEN_STATE_CLOSE;
	
	//滚动的速度
	private int mVelocityValue = 0;

	//是否产生点击事件，在lelfView或者rightView出现的时候，mOnClick或许=true
	private boolean mOnClick = false;

	private View mLeftView, mRightView, mMasterView;
	
	private float mLastMotionX, mLastMotionY;
	
	// 触发横滑的临界值
	private int mTouchSlop;

	public FlipperLayout(Context context) {
		super(context);
		initData(context);
	}

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

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

	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		super.onMeasure(widthMeasureSpec, heightMeasureSpec);
		int width = MeasureSpec.getSize(widthMeasureSpec);
		int height = MeasureSpec.getSize(heightMeasureSpec);
		setMeasuredDimension(width, height);

		for (int i = 0, j = getChildCount(); i < j; i++) {
			getChildAt(i).measure(widthMeasureSpec, heightMeasureSpec);
		}


	}

	public void setLeftView(View leftView, LayoutParams params) {
		if (mLeftView == null) {
			this.mLeftView = leftView;
			addView(mLeftView, 0, params);
		}
	}

	public void setRightView(View rightView, LayoutParams params) {
		if (mRightView == null) {
			this.mRightView = rightView;
			addView(mRightView, 1, params);
		}
	}

	public void setMasterView(View masterView, LayoutParams params) {
		if (mMasterView == null) {
			this.mMasterView = masterView;
			addView(mMasterView, 2, params);
		}
	}

	private void initData(Context context) {
		mScroller = new Scroller(context);
		mWidth = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, LEFT_WIDTH, getResources().getDisplayMetrics());
		mTouchSlop = ViewConfiguration.get(getContext()).getScaledEdgeSlop();
	}

	@Override
	protected void onLayout(boolean changed, int l, int t, int r, int b) {
		mLeftView.layout(0, 0, mLeftView.getMeasuredWidth(), mLeftView.getMeasuredHeight());
		mMasterView.layout(0, 0, mMasterView.getMeasuredWidth(), mMasterView.getMeasuredHeight());
		mRightView.layout(0, 0, mRightView.getMeasuredWidth(), mRightView.getMeasuredHeight());
	}

	@Override
	public void computeScroll() {
		super.computeScroll();
		if (mScroller.computeScrollOffset()) {
			mMasterView.scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
			postInvalidate();
		}
	}
	
	// 分发事件
	@Override
	public boolean dispatchTouchEvent(MotionEvent ev) {
		obtainVelocityTracker(ev);
		switch (ev.getAction()) {
		case MotionEvent.ACTION_DOWN:
			mTouchState = mScroller.isFinished() ? TOUCH_STATE_RESTART : TOUCH_STATE_SCROLLING;
			if (mTouchState == TOUCH_STATE_RESTART) {
				int x = (int) ev.getX();
				int screenWidth = getWidth();
				mScrollState = SCROLL_STATE_NO_ALLOW;

				// to close left  当lelfView 可见，且x > screenWidth - mWidth ,则有可能触发关闭lelfView
				if (mScreenState == SCREEN_STATE_LEFT_OPEN && x >= screenWidth - mWidth) {
					mScrollState = SCROLL_STATE_ALLOW;
					mOnClick = true;
				}
				// to close right 当rightView可见，且x <= mWidth ,则有可能触发关闭rightView
				if (mScreenState == SCREEN_STATE_RIGHT_OPEN && x <= mWidth) {
					mScrollState = SCROLL_STATE_ALLOW;
					mOnClick = true;
				}
			} else
				return false;
			break;
		case MotionEvent.ACTION_MOVE:
			// to close left
			if (mScrollState == SCROLL_STATE_ALLOW && getWidth() - (int) ev.getX() < mWidth && mScreenState == SCREEN_STATE_LEFT_OPEN) {
				mWillState = SCREEN_STATE_LEFT_CLOSE;
				return true;
			}
			// to close right
			if (mScrollState == SCROLL_STATE_ALLOW && ev.getX() < mWidth && mScreenState == SCREEN_STATE_RIGHT_OPEN) {
				mWillState = SCREEN_STATE_RIGHT_CLOSE;
				return true;
			}

			break;

		case MotionEvent.ACTION_CANCEL:
		case MotionEvent.ACTION_UP:
			releaseVelocityTracker();
			break;

		default:
			break;
		}
		return super.dispatchTouchEvent(ev);
	}

	@Override
	public boolean onInterceptTouchEvent(MotionEvent ev) {
		final float x = ev.getX();
		final float y = ev.getY();
		obtainVelocityTracker(ev);
		switch (ev.getAction()) {
		case MotionEvent.ACTION_DOWN:
			mLastMotionX = x;
			mLastMotionY = y;
			mTouchState = mScroller.isFinished() ? TOUCH_STATE_RESTART : TOUCH_STATE_SCROLLING;
			if (mTouchState == TOUCH_STATE_SCROLLING) {
				return false;
			}
			break;
		case MotionEvent.ACTION_MOVE:
			final float dx = x - mLastMotionX;
			if (mScrollState == SCROLL_STATE_NO_ALLOW) {
				final float xDiff = Math.abs(dx);
				final float yDiff = Math.abs(y - mLastMotionY);
				mLastMotionX = x;
				mLastMotionY = y;
				if (xDiff > mTouchSlop && xDiff > yDiff) { // 当横向移动的距离大于竖向移动的距离，并且xDiff>mTouchSlop(移动的边缘数据)，则可能触发横滑
					if (mScrollState == SCROLL_STATE_NO_ALLOW)
						if (mScreenState == SCREEN_STATE_CLOSE) {
							mScrollState = SCROLL_STATE_ALLOW;
							Log.i(TAG, "scroll state allow");
							return false;
						}
				}
			}
			
// 判断横滑的方向，通过移动方向来设置leftView 和rightView的显示
			mOnClick = false;
			mVelocityTracker.computeCurrentVelocity(1000, ViewConfiguration.getMaximumFlingVelocity());
			if (mScrollState == SCROLL_STATE_ALLOW && Math.abs(mVelocityTracker.getXVelocity()) > 200) {
				Log.i(TAG, "scroll state allow 2");
				if (dx > 0 && mScreenState == SCREEN_STATE_CLOSE) { // 向右移，即将打开leftView
					if (mRightView.getVisibility() == View.VISIBLE)
						mRightView.setVisibility(View.INVISIBLE);
					if (mLeftView.getVisibility() == View.INVISIBLE)
						mLeftView.setVisibility(View.VISIBLE);

					mWillState = SCREEN_STATE_LEFT_OPEN;
				} else if (dx < 0 && mScreenState == SCREEN_STATE_CLOSE) { // 向左移，即将打开rightView
					if (mLeftView.getVisibility() == View.VISIBLE)
						mLeftView.setVisibility(View.INVISIBLE);
					if (mRightView.getVisibility() == View.INVISIBLE)
						mRightView.setVisibility(View.VISIBLE);
					mWillState = SCREEN_STATE_RIGHT_OPEN;
				}

				return true;
			}
			break;
		case MotionEvent.ACTION_CANCEL:
		case MotionEvent.ACTION_UP:
			releaseVelocityTracker();
			break;
		default:
			break;
		}

		return super.onInterceptTouchEvent(ev);
	}

	@Override
	public boolean onTouchEvent(MotionEvent ev) {
		final float x = ev.getX();
		obtainVelocityTracker(ev);
		switch (ev.getAction()) {
		case MotionEvent.ACTION_DOWN:
			mLastMotionX = x;
			mTouchState = mScroller.isFinished() ? TOUCH_STATE_RESTART : TOUCH_STATE_SCROLLING;
			if (mTouchState == TOUCH_STATE_SCROLLING) {
				return false;
			}

			break;
		case MotionEvent.ACTION_MOVE:
			if (!mOnClick) {
				final float deltaX = x - mLastMotionX;
				mVelocityTracker.computeCurrentVelocity(1000, ViewConfiguration.getMaximumFlingVelocity());
				mVelocityValue = (int) mVelocityTracker.getXVelocity();
				mMasterView.scrollBy(-(int) deltaX, 0); //通过这句话，让View跟着手指移动
				mLastMotionX = x;
			}
			break;
		case MotionEvent.ACTION_CANCEL:
		case MotionEvent.ACTION_UP:
	// ACTION_UP 和ACTION_CANCEL 的时候，通过之前mWillState的值和mScrollState，处理最后view的滚动效果。
			if (mOnClick) {
				if (mScreenState == SCREEN_STATE_LEFT_OPEN)
					closeLeftView();
				else if (mScreenState == SCREEN_STATE_RIGHT_OPEN)
					closeRightView();
				mOnClick = false;
				releaseVelocityTracker();
				return super.onTouchEvent(ev);
			}
			if (mScrollState == SCROLL_STATE_ALLOW) {
				if (mWillState == SCREEN_STATE_LEFT_OPEN && mScreenState == SCREEN_STATE_CLOSE) {
					if (mVelocityValue > 2000)
						openLeftView(200);
					else if (ev.getX() > getWidth() / 2)
						openLeftView();
					else
						closeLeftView();
				} else if (mWillState == SCREEN_STATE_RIGHT_OPEN && mScreenState == SCREEN_STATE_CLOSE) {
					if (mVelocityValue < -2000)
						openRightView(200);
					else if (ev.getX() < getWidth() / 2)
						openRightView();
					else
						closeRightView();
				} else if (mWillState == SCREEN_STATE_LEFT_CLOSE && mScreenState == SCREEN_STATE_LEFT_OPEN) {
					if (mVelocityValue < -2000)
						closeLeftView(200);
					else if (ev.getX() < getWidth() / 2)
						closeLeftView();
					else
						openLeftView();
				} else if (mWillState == SCREEN_STATE_RIGHT_CLOSE && mScreenState == SCREEN_STATE_RIGHT_OPEN) {
					if (mVelocityValue > 2000)
						closeRightView(200);
					else if (ev.getX() > getWidth() / 2)
						closeRightView();
					else
						openRightView();
				} else {
					Log.i(TAG, "up other ");
					if (mMasterView.getScrollX() < 0)
						closeLeftView();
					else
						closeRightView();
				}
			}
			releaseVelocityTracker();
			break;
		default:
			break;
		}

		return super.onTouchEvent(ev);
	}

	private void obtainVelocityTracker(MotionEvent event) {
		if (mVelocityTracker == null) {
			mVelocityTracker = VelocityTracker.obtain();
		}
		mVelocityTracker.addMovement(event);
	}

	private void releaseVelocityTracker() {
		if (mVelocityTracker != null) {
			mVelocityTracker.recycle();
			mVelocityTracker = null;
		}
	}

	private void openLeftView(int duration) {
		mLeftView.setVisibility(View.VISIBLE);
		mRightView.setVisibility(View.INVISIBLE);
		mTouchState = mScroller.isFinished() ? TOUCH_STATE_RESTART : TOUCH_STATE_SCROLLING;
		if (mTouchState == TOUCH_STATE_RESTART) {
			mScreenState = SCREEN_STATE_LEFT_OPEN;
			Log.i(TAG, "open left view");
			mScroller.startScroll(mMasterView.getScrollX(), 0, -(getWidth() - mWidth - Math.abs(mMasterView.getScrollX())), 0, duration);
			invalidate();
		}
	}

	public void openLeftView() {
		openLeftView(800);
	}

	private void closeLeftView(int duration) {
		Log.i(TAG, "close left view");
		mScreenState = SCREEN_STATE_CLOSE;
		mScroller.startScroll(mMasterView.getScrollX(), 0, -mMasterView.getScrollX(), 0, duration);
		invalidate();
	}

	public void closeLeftView() {
		closeLeftView(800);
	}

	public void openRightView(int duration) {
		mLeftView.setVisibility(View.INVISIBLE);
		mRightView.setVisibility(View.VISIBLE);
		mTouchState = mScroller.isFinished() ? TOUCH_STATE_RESTART : TOUCH_STATE_SCROLLING;
		if (mTouchState == TOUCH_STATE_RESTART) {
			Log.i(TAG, "open right view");
			mScreenState = SCREEN_STATE_RIGHT_OPEN;
			mScroller.startScroll(mMasterView.getScrollX(), 0, (getWidth() - mMasterView.getScrollX() - mWidth), 0, duration);
			invalidate();
		}
	}

	public void openRightView() {
		openRightView(800);
	}

	public void closeRightView(int duration) {
		Log.i(TAG, "close right view");
		mScreenState = SCREEN_STATE_CLOSE;
		mScroller.startScroll(mMasterView.getScrollX(), 0, -mMasterView.getScrollX(), 0, duration);
		invalidate();
	}

	public void closeRightView() {
		closeRightView(800);
	}

	public int getLeftWidth() {
		return mWidth;
	}
}

源码的demo地址如下：Android 左右侧滑组件




iteye_12332
关注
android 左右侧滑菜单（点击+左右滑动）
05-20
主要实现左右滑动菜单效果，他可以点击主界面上的按钮来显示左右菜单，也可以通过左右滑动来显示，希望可以帮到你哦！！
Android 左右侧滑示例
11-07
Android 左右侧滑示例。可以自已设置侧滑的效果，我在这里实现是左右都可以。侧滑出来的界面可以启动activity，或者加载view。侧滑效果是用了碎片规则来处理的。我博客网址： http://blog.youkuaiyun.com/qq_16064871。我写了很多博客都是有源码的，请多多关注。
android左右两个滑动组件,Android: 仿Launcher Workspace左右滑动控件
weixin_39859128的博客
05-25 469
packagecom.mylauncher;importAndroid.app.WallpaperManager;importandroid.content.Context;importandroid.content.res.TypedArray;importandroid.graphics.Canvas;importandroid.graphics.Rect;importandro...
Android-屏幕左右侧滑（二）
时代新人的博客
09-28 2203
第二种方式我们介绍的是使用Android源生控件android.support.v4.widget.DrawerLayout来实现屏幕的左侧滑和右侧滑（其中包括点击侧滑和手动滑动侧滑），还可以用代码来控制打开和关闭手动侧滑: 先付上两张效果图供参考，如下： 首页 左侧滑 右侧滑 下面附上实现的完整代码： 布局文件activity_sliding.xml &lt;?xml...
Android自定义左右侧滑组件实现方案
标题“Android 左右侧滑组件”明确指出该资源聚焦于一种特定的UI交互模式——通过左右滑动手势来切换或展示内容区域，这种设计广泛应用于主流移动应用中，如网易新闻、豌豆荚、人人网等产品均采用了类似的侧滑菜单...
android实现左右侧滑菜单效果
08-29
首先，我们要知道在Android中实现侧滑菜单通常使用`DrawerLayout`组件。`DrawerLayout`是Android SDK中的一个容器视图，它允许开发者添加一个或两个“抽屉”（通常是侧滑菜单），这些抽屉可以在主内容视图的左侧或...
Android开源组件SlidingMenu侧滑菜单使用介绍
09-03
【Android 开源组件 SlidingMenu 侧滑菜单】 在 Android 应用开发中，侧滑菜单已经成为许多应用程序的标准设计元素，它提供了优雅的方式来展示二级导航或者更多功能。SlidingMenu 是一个流行的开源组件，用于实现...
android 侧滑组件,利用ViewPager+Fragment+slidingmenu侧滑组件实现的小demo
weixin_31028871的博客
05-27 202
最近折腾了很久，经过三番五次的推倒重来，总算是弄出了一个效果比较满意的侧滑demo。把主要的实现流程mark下来，方便日后翻阅，实现的效果图(手动录制的，不流畅)：本文引用地址：http://www.eepw.com.cn/article/201809/388650.htm从图上可以看到，demo上面有三个按钮和一个包含3个Fragment页面的ViewPager，另外左侧滑能拉出一个左页面。刚开...
android 左右侧滑抽屉菜单demo
06-08
基于android自带的侧滑控件，很简单很实用，可左右展开
Android组件banner实现左右滑屏效果
01-20
什么是banner组件？在许多Android应用上，比如客户端、百度美拍、应用宝等上面，都有一个可以手动滑动的小广告条，这就是banner，实际应用中的banner，其信息（图片和点击行为）是后台可配置的，是需要通过网络从后台拉取的。网上有许多手动滑屏的例子，但是一般只是个demo，无法在实际中使用，因为其一般没有考虑如下几类问题：图片缓存、OOM问题、是否可灵活配置、是否预留外部接口以及是否封装良好。没有良好的封装，手动滑屏加在代码中，会使得代码变得很烂很脆弱。 1.原理 参见下图。整个组件是一个FrameLayout，里面有两个view，第一个是LinearLayout，承载了4
一个控件搞定Android item侧滑删除菜单
08-24
【Android自定义ViewGroup】不一样的轮子，巧用类变量解决冲突，像IOS那样简单的使用侧滑删除，一个控件搞定Android item侧滑删除菜单。
android 仿iphone左右滑块开关
01-23
android 仿iphone左右滑块开关，这个是网上找的别的一个组件提取而来，不同于简单的自定义控件，里面是应用了theme来设置一些属性，这也符合更高级的设计理念。放在这里是以免遗忘。有需求的就随便下载吧！
Android 左右侧滑菜单的实现
WY1605058341的博客
10-17 548
在activity_main布局文件中代码： xml version="1.0" encoding="utf-8"?> xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http:
android的左右侧滑菜单实现
热门推荐
小崔的博客
09-24 1万+
最近看了很多app应用都采用的是左右侧滑，比如网易新闻、凡客等这里也试着写一下侧滑首先看一下效果 然后给出xml布局代码<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:
android左右滑动页面控件,Android自定义组合控件：UIScrollLayout（支持界面滑动及左右菜单滑动）...
weixin_34900026的博客
05-28 971
【实例简介】流畅的界面左右滑动，两种类型显示，通过设置view_type来完成。【实例截图】【核心代码】UIScrollLayout└── UIScrollLayout├── AndroidManifest.xml├── gen│ └── com│ └── chris│ └── apps│ └── uiscroll│ ...
Android 侧滑，左滑，右滑
dy12011023的专栏
04-24 1743
我也不说废话了，和上一个左滑差不多一样，我就贴一下主要代码， 有什么问题请留言哈， import android.content.Context; import android.util.AttributeSet; import android.util.DisplayMetrics; import android.view.MotionEvent; import android.view.V
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值