效果
SwipeMenuLayout.gif
项目地址
SwipeMenuLayout
自定义属性
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="SwipeMenuLayout">
<!-- 是否左滑 -->
<attr name="sml_left_swipe" format="boolean" />
<!-- 侧滑是否可用 -->
<attr name="sml_swipe_enable" format="boolean" />
</declare-styleable>
</resources>
代码实现
public class SwipeMenuLayout extends FrameLayout {
/**
* 内容区域View
*/
private View vContentView;
/**
* 菜单区域View
*/
private View vMenuView;
/**
* 拽托帮助类
*/
private ViewDragHelper mViewDragHelper;
/**
* 菜单状态改变监听
*/
private OnMenuStateChangeListener mMenuStateChangeListener;
/**
* 触摸按下时的X坐标
*/
private float mDownX;
/**
* 触摸按下时的Y坐标
*/
private float mDownY;
/**
* 是否左滑打开菜单
*/
private boolean isLeftSwipe;
/**
* 侧滑功能是否可用，默认开
*/
private boolean isSwipeEnable = true;
public SwipeMenuLayout(Context context) {
this(context, null);
}
public SwipeMenuLayout(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public SwipeMenuLayout(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context, attrs, defStyleAttr);
}
private void init(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
mViewDragHelper = ViewDragHelper.create(this, 0.5f, new ViewDragHelperCallBack());
initAttr(context, attrs, defStyleAttr);
}
private void initAttr(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.SwipeMenuLayout, defStyleAttr, 0);
//是否左滑打开菜单
isLeftSwipe = typedArray.getBoolean(R.styleable.SwipeMenuLayout_sml_left_swipe, true);
//侧滑是否可用
isSwipeEnable = typedArray.getBoolean(R.styleable.SwipeMenuLayout_sml_swipe_enable, true);
typedArray.recycle();
}
private class ViewDragHelperCallBack extends ViewDragHelper.Callback {
/**
* 开始拽托时的X坐标
*/
private int mDownX;
/**
* 开始拽托时的Y坐标
*/
private int mDownY;
@Override
public boolean tryCaptureView(@NonNull View child, int pointerId) {
//内容区域可以拽托
return child == vContentView;
}
@Override
public void onViewCaptured(@NonNull View capturedChild, int activePointerId) {
super.onViewCaptured(capturedChild, activePointerId);
mDownX = capturedChild.getLeft();
mDownY = capturedChild.getTop();
}
@Override
public int getViewHorizontalDragRange(@NonNull View child) {
//水平方向的拖拽范围
return vMenuView.getWidth();
}
@Override
public int clampViewPositionHorizontal(@NonNull View child, int left, int dx) {
//菜单区域的宽度
int menuViewWidth = vMenuView.getWidth();
if (isLeftSwipe) {
//不能向左滑动出界限
if (left > 0) {
return 0;
} else if (left < -menuViewWidth) {
//向右滑动，不能超过可滑动的距离
return -menuViewWidth;
} else {
//在上面指定范围内，可滑动
return left;
}
} else {
if (left < 0) {
//向左滑动，不能滑动出左侧屏幕
return 0;
} else if (left > menuViewWidth) {
//向右滑动，不能超过菜单宽度
return menuViewWidth;
} else {
//其他范围可滑动
return left;
}
}
}
@Override
public void onViewPositionChanged(@NonNull View changedView, int left, int top, int dx, int dy) {
super.onViewPositionChanged(changedView, left, top, dx, dy);
//拽托内容布局，让菜单布局跟着移动
int newLeft = vMenuView.getLeft() + dx;
int right = newLeft + vMenuView.getWidth();
vMenuView.layout(newLeft, top, right, getBottom());
}
@Override
public void onViewDragStateChanged(int state) {
super.onViewDragStateChanged(state);
boolean isMenuOpen;
boolean isMenuClose;
int menuViewLeft = vMenuView.getLeft();
int menuViewWidth = vMenuView.getWidth();
int openMenuLeft;
int closeMenuLeft;
if (isLeftSwipe) {
//打开时，菜单的左边位置
openMenuLeft = getRight() - menuViewWidth;
//关闭时，菜单的左边位置
closeMenuLeft = getRight();
} else {
openMenuLeft = 0;
closeMenuLeft = -menuViewWidth;
}
isMenuOpen = menuViewLeft == openMenuLeft;
isMenuClose = menuViewLeft == closeMenuLeft;
//处理开、关菜单回调
if (state == ViewDragHelper.STATE_IDLE) {
//菜单开
if (isMenuOpen) {
onMenuOpenFinish();
} else if (isMenuClose) {
//菜单关
onMenuCloseFinish();
}
}
}
@Override
public int clampViewPositionVertical(@NonNull View child, int top, int dy) {
//拽托子View纵向滑动时回调，锁定顶部padding距离即可，不能不复写，否则少了顶部的padding，位置就偏去上面了
return 0;
}
@Override
public void onViewReleased(@NonNull View releasedChild, float xvel, float yvel) {
super.onViewReleased(releasedChild, xvel, yvel);
int contentViewWidth = vContentView.getWidth();
//手指释放时回调
final int currentLeft = releasedChild.getLeft();
final int currentTop = releasedChild.getTop();
//计算移动距离
int distanceX = currentLeft - mDownX;
int distanceY = currentTop - mDownY;
//松手回弹，如果右边剩余的距离大于Menu的一半，则滚动到最后边，否则滚动回最左边
float halfMenuWidth = vMenuView.getWidth() / 2f;
//判断是否是左右滑，上下滑不需要动
if (Math.abs(distanceX) >= Math.abs(distanceY)) {
if (isLeftSwipe) {
//打开时的宽度，内容区域宽度减去一个菜单区域的宽度
float fullOpenWidth = contentViewWidth - halfMenuWidth;
//判断方向，向左滑动到打开，打开菜单
if (releasedChild.getRight() < fullOpenWidth) {
smoothOpenMenu();
} else {
//其他情况，关闭菜单
smoothClose();
}
} else {
//左滑，菜单露出超过一半，那么打开
if (vMenuView.getRight() > halfMenuWidth) {
smoothOpenMenu();
} else {
//没有露出一半，那么关闭
smoothClose();
}
}
}
}
}
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
//布局内容区域，和父View一样大小
vContentView.layout(left, top, right, bottom);
//布局菜单区域，内容在左，菜单在内容区域的右边
if (isLeftSwipe) {
vMenuView.layout(right, top, right + vMenuView.getMeasuredWidth(), bottom);
} else {
//内容在右，菜单在内容区域的左边
vMenuView.layout(left - vMenuView.getMeasuredWidth(), top, left, bottom);
}
}
@Override
protected void onFinishInflate() {
super.onFinishInflate();
int childCount = getChildCount();
if (childCount > 2 || childCount <= 0) {
throw new RuntimeException("子View必须只有2个，内容布局和菜单布局");
}
vContentView = getChildAt(0);
vMenuView = getChildAt(1);
}
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
if (!isSwipeEnable) {
return super.onInterceptTouchEvent(ev);
}
//将onInterceptTouchEvent委托给ViewDragHelper
return mViewDragHelper.shouldInterceptTouchEvent(ev);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
if (!isSwipeEnable) {
return super.onTouchEvent(event);
}
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
mDownX = event.getX();
mDownY = event.getY();
break;
case MotionEvent.ACTION_MOVE:
float moveX = event.getX();
float moveY = event.getY();
//横向滑动距离
float distanceX = Math.abs(moveX - mDownX);
//纵向滑动距离
float distanceY = Math.abs(moveY - mDownY);
//横向滑动得多，让外层不拦截事件
if (distanceX > distanceY) {
requestDisallowInterceptTouchEvent(true);
}
break;
default:
break;
}
//将onTouchEvent委托给ViewDragHelper
mViewDragHelper.processTouchEvent(event);
return true;
}
@Override
public void computeScroll() {
super.computeScroll();
//判断是否移动到头了，未到头则继续
if (mViewDragHelper != null) {
if (mViewDragHelper.continueSettling(true)) {
invalidate();
}
}
}
/**
* 向左移动，打开菜单
*/
public void smoothOpenMenu() {
int finalLeft;
//左滑，内容向左移动一个菜单布局的宽度
if (isLeftSwipe) {
finalLeft = -vMenuView.getWidth();
} else {
//右滑，内容向右移动一个菜单布局的宽度
finalLeft = vMenuView.getWidth();
}
mViewDragHelper.smoothSlideViewTo(vContentView, finalLeft, vContentView.getTop());
ViewCompat.postInvalidateOnAnimation(this);
}
/**
* 向右移动，关闭菜单
*/
public void smoothClose() {
mViewDragHelper.smoothSlideViewTo(vContentView, 0, vContentView.getTop());
ViewCompat.postInvalidateOnAnimation(this);
}
/**
* 当菜单打开完成时调用
*/
private void onMenuOpenFinish() {
if (mMenuStateChangeListener != null) {
mMenuStateChangeListener.onOpenMenu();
}
}
/**
* 当菜单关闭完成时调用
*/
private void onMenuCloseFinish() {
if (mMenuStateChangeListener != null) {
mMenuStateChangeListener.onCloseMenu();
}
}
public interface OnMenuStateChangeListener {
/**
* 当打开菜单时回调
*/
void onOpenMenu();
/**
* 当关闭菜单时回调
*/
void onCloseMenu();
}
/**
* 添加菜单状态改变监听
*
* @param listener 监听器
*/
public void addOnMenuStateChangeListener(OnMenuStateChangeListener listener) {
this.mMenuStateChangeListener = listener;
}
/**
* 设置侧滑功能是否可用
*/
public void setSwipeEnable(boolean swipeEnable) {
isSwipeEnable = swipeEnable;
}
/**
* 侧滑功能是否可用
*/
public boolean isSwipeEnable() {
return isSwipeEnable;
}
}
使用
<?xml version="1.0" encoding="utf-8"?>
<com.zh.android.swipemenulayoutsample.SwipeMenuLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/swipe_menu_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:sml_left_swipe="true"
app:sml_swipe_enable="true">
<!-- 内容View -->
<TextView
android:id="@+id/content_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="左滑动进入懒人模式"
android:textColor="@android:color/black"
android:textSize="18sp" />
<!-- 菜单View -->
<com.zh.android.swipemenulayoutsample.lazymode.LazyModeEntryView
android:id="@+id/lazy_mode_entry_view"
android:layout_width="wrap_content"
android:layout_height="match_parent" />
</com.zh.android.swipemenulayoutsample.SwipeMenuLayout>
final SwipeMenuLayout swipeMenuLayout = findViewById(R.id.swipe_menu_layout);
//设置侧滑是否可用
swipeMenuLayout.setSwipeEnable(true);
//设置侧滑状态变化监听
swipeMenuLayout.addOnMenuStateChangeListener(new SwipeMenuLayout.OnMenuStateChangeListener() {
@Override
public void onOpenMenu() {
//侧滑打开
swipeMenuLayout.smoothClose();
startActivity(new Intent(MainActivity.this, LazyModeActivity.class));
}
@Override
public void onCloseMenu() {
//侧滑关闭
}
});
网友评论