沒(méi)有找到自己想要的效果的側(cè)滑菜單定页，花了些時(shí)間研究了一下能完成項(xiàng)目需求就行了迅耘。效果如下：
因?yàn)檫壿嫳容^簡(jiǎn)單，總代碼量500行左右冤馏，所以各種各樣的定制都通過(guò)修改源碼能實(shí)現(xiàn)日麸，而且不需要繼承特定的Adapter，使用方式和普通的RecyclerView沒(méi)有區(qū)別逮光。
一. 實(shí)現(xiàn)一個(gè)側(cè)滑菜單
這里我使用DragHelper實(shí)現(xiàn)代箭，支持左劃和右劃菜單，并且可以同時(shí)存在兩個(gè)菜單涕刚。
通過(guò)判斷xml中的layout_gravity屬性決定菜單是左劃還是右劃嗡综。
注釋應(yīng)該寫的都比較清楚， 部分邏輯參考了代碼家的SwipeLayout
package com.aitsuki.swipe;
import android.content.Context;
import android.graphics.Rect;
import android.support.v4.view.GravityCompat;
import android.support.v4.view.ViewCompat;
import android.support.v4.widget.ViewDragHelper;
import android.util.AttributeSet;
import android.util.Log;
import android.view.Gravity;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewConfiguration;
import android.view.ViewGroup;
import android.widget.FrameLayout;
import java.util.LinkedHashMap;
/**
* Created by AItsuki on 2017/2/23.
* 1. 最多同時(shí)設(shè)置兩個(gè)菜單
* 2. 菜單必須設(shè)置layoutGravity屬性. start left end right
*/
public class SwipeItemLayout extends FrameLayout {
public static final String TAG = "SwipeItemLayout";
private ViewDragHelper mDragHelper;
private int mTouchSlop;
private int mVelocity;
private float mDownX;
private float mDownY;
private boolean mIsDragged;
private boolean mSwipeEnable = true;
/**
* 通過(guò)判斷手勢(shì)進(jìn)行賦值 {@link #checkCanDragged(MotionEvent)}
*/
private View mCurrentMenu;
/**
* 某些情況下杜漠，不能通過(guò)mIsOpen判斷當(dāng)前菜單是否開(kāi)啟或是關(guān)閉极景。
* 因?yàn)樵谡{(diào)用 {@link #open()} 或者 {@link #close()} 的時(shí)候，mIsOpen的值已經(jīng)被改變驾茴，但是
* 此時(shí)ContentView還沒(méi)有到達(dá)應(yīng)該的位置盼樟。亦或者ContentView已經(jīng)到拖拽達(dá)指定位置，但是此時(shí)并沒(méi)有
* 松開(kāi)手指沟涨，mIsOpen并不會(huì)重新賦值恤批。
*/
private boolean mIsOpen;
/**
* Menu的集合，以{@link android.view.Gravity#LEFT}和{@link android.view.Gravity#LEFT}作為key裹赴，
* 菜單View作為value保存喜庞。
*/
private LinkedHashMap<Integer, View> mMenus = new LinkedHashMap<>();
public SwipeItemLayout(Context context) {
this(context, null);
}
public SwipeItemLayout(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public SwipeItemLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
mTouchSlop = ViewConfiguration.get(context).getScaledTouchSlop();
mVelocity = ViewConfiguration.get(context).getScaledMinimumFlingVelocity();
mDragHelper = ViewDragHelper.create(this, new DragCallBack());
}
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
updateMenu();
}
@Override
public boolean dispatchTouchEvent(MotionEvent ev) {
if (ev.getAction() == MotionEvent.ACTION_DOWN) {
// 關(guān)閉菜單過(guò)程中禁止接收down事件
if (isCloseAnimating()) {
return false;
}
// 菜單打開(kāi)的時(shí)候，按下Content關(guān)閉菜單
if (mIsOpen && isTouchContent(((int) ev.getX()), ((int) ev.getY()))) {
close();
return false;
}
}
return super.dispatchTouchEvent(ev);
}
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
if (!mSwipeEnable) {
return false;
}
int action = ev.getAction();
switch (action) {
case MotionEvent.ACTION_DOWN:
mIsDragged = false;
mDownX = ev.getX();
mDownY = ev.getY();
break;
case MotionEvent.ACTION_MOVE:
checkCanDragged(ev);
break;
case MotionEvent.ACTION_CANCEL:
case MotionEvent.ACTION_UP:
if (mIsDragged) {
mDragHelper.processTouchEvent(ev);
mIsDragged = false;
}
break;
default:
if (mIsDragged) {
mDragHelper.processTouchEvent(ev);
}
break;
}
return mIsDragged || super.onInterceptTouchEvent(ev);
}
@Override
public boolean onTouchEvent(MotionEvent ev) {
if (!mSwipeEnable) {
return super.onTouchEvent(ev);
}
int action = ev.getAction();
switch (action) {
case MotionEvent.ACTION_DOWN:
mIsDragged = false;
mDownX = ev.getX();
mDownY = ev.getY();
break;
case MotionEvent.ACTION_MOVE:
boolean beforeCheckDrag = mIsDragged;
checkCanDragged(ev);
if (mIsDragged) {
mDragHelper.processTouchEvent(ev);
}
// 開(kāi)始拖動(dòng)后棋返，發(fā)送一個(gè)cancel事件用來(lái)取消點(diǎn)擊效果
if (!beforeCheckDrag && mIsDragged) {
MotionEvent obtain = MotionEvent.obtain(ev);
obtain.setAction(MotionEvent.ACTION_CANCEL);
super.onTouchEvent(obtain);
}
break;
case MotionEvent.ACTION_CANCEL:
case MotionEvent.ACTION_UP:
if (mIsDragged || mIsOpen) {
mDragHelper.processTouchEvent(ev);
// 拖拽后手指抬起延都，或者已經(jīng)開(kāi)啟菜單，不應(yīng)該響應(yīng)到點(diǎn)擊事件
ev.setAction(MotionEvent.ACTION_CANCEL);
mIsDragged = false;
}
break;
}
return mIsDragged || super.onTouchEvent(ev);
}
/**
* 判斷是否可以拖拽View
*/
private void checkCanDragged(MotionEvent ev) {
if (mIsDragged) {
return;
}
float dx = ev.getX() - mDownX;
float dy = ev.getY() - mDownY;
boolean isRightDrag = dx > mTouchSlop && dx > Math.abs(dy);
boolean isLeftDrag = dx < -mTouchSlop && Math.abs(dx) > Math.abs(dy);
if (mIsOpen) {
// 開(kāi)啟狀態(tài)下睛竣，點(diǎn)擊在content上就捕獲事件晰房，點(diǎn)擊在菜單上則判斷touchSlop
int downX = (int) mDownX;
int downY = (int) mDownY;
if (isTouchContent(downX, downY)) {
mIsDragged = true;
} else if (isTouchMenu(downX, downY)) {
mIsDragged = (isLeftMenu() && isLeftDrag) || (isRightMenu() && isRightDrag);
}
} else {
// 關(guān)閉狀態(tài)，獲取當(dāng)前即將要開(kāi)啟的菜單射沟。
if (isRightDrag) {
mCurrentMenu = mMenus.get(Gravity.LEFT);
mIsDragged = mCurrentMenu != null;
} else if (isLeftDrag) {
mCurrentMenu = mMenus.get(Gravity.RIGHT);
mIsDragged = mCurrentMenu != null;
}
}
if (mIsDragged) {
// 開(kāi)始拖動(dòng)后殊者，分發(fā)down事件給DragHelper，并且發(fā)送一個(gè)cancel取消點(diǎn)擊事件
MotionEvent obtain = MotionEvent.obtain(ev);
obtain.setAction(MotionEvent.ACTION_DOWN);
mDragHelper.processTouchEvent(obtain);
if (getParent() != null) {
// 解決和父控件的滑動(dòng)沖突验夯。
getParent().requestDisallowInterceptTouchEvent(true);
}
}
}
// 最后一個(gè)是內(nèi)容猖吴，倒數(shù)第1第2個(gè)設(shè)置了layout_gravity = right or left的是菜單，其余的忽略
@Override
public void addView(View child, int index, ViewGroup.LayoutParams params) {
super.addView(child, index, params);
LayoutParams lp = (LayoutParams) child.getLayoutParams();
int gravity = GravityCompat.getAbsoluteGravity(lp.gravity, ViewCompat.getLayoutDirection(child));
switch (gravity) {
case Gravity.RIGHT:
mMenus.put(Gravity.RIGHT, child);
break;
case Gravity.LEFT:
mMenus.put(Gravity.LEFT, child);
break;
}
}
/**
* 獲取ContentView挥转，最上層顯示的View即為ContentView
*/
public View getContentView() {
return getChildAt(getChildCount() - 1);
}
/**
* 判斷down是否點(diǎn)擊在Content上
*/
public boolean isTouchContent(int x, int y) {
View contentView = getContentView();
if (contentView == null) {
return false;
}
Rect rect = new Rect();
contentView.getHitRect(rect);
return rect.contains(x, y);
}
private boolean isLeftMenu() {
return mCurrentMenu != null && mCurrentMenu == mMenus.get(Gravity.LEFT);
}
private boolean isRightMenu() {
return mCurrentMenu != null && mCurrentMenu == mMenus.get(Gravity.RIGHT);
}
public boolean isTouchMenu(int x, int y) {
if (mCurrentMenu == null) {
return false;
}
Rect rect = new Rect();
mCurrentMenu.getHitRect(rect);
return rect.contains(x, y);
}
/**
* 關(guān)閉菜單
*/
public void close() {
if (mCurrentMenu == null) {
mIsOpen = false;
return;
}
mDragHelper.smoothSlideViewTo(getContentView(), getPaddingLeft(), getPaddingTop());
mIsOpen = false;
invalidate();
}
/**
* 開(kāi)啟菜單
*/
public void open() {
if (mCurrentMenu == null) {
mIsOpen = false;
return;
}
if (isLeftMenu()) {
mDragHelper.smoothSlideViewTo(getContentView(), mCurrentMenu.getWidth(), getPaddingTop());
} else if (isRightMenu()) {
mDragHelper.smoothSlideViewTo(getContentView(), -mCurrentMenu.getWidth(), getPaddingTop());
}
mIsOpen = true;
invalidate();
}
/**
* 菜單是否開(kāi)始拖動(dòng)
*/
public boolean isOpen() {
return mIsOpen;
}
/**
* 是否正在做開(kāi)啟動(dòng)畫(huà)
*/
private boolean isOpenAnimating() {
if (mCurrentMenu != null) {
int contentLeft = getContentView().getLeft();
int menuWidth = mCurrentMenu.getWidth();
if (mIsOpen && ((isLeftMenu() && contentLeft < menuWidth)
|| (isRightMenu() && -contentLeft < menuWidth))) {
return true;
}
}
return false;
}
/**
* 是否正在做關(guān)閉動(dòng)畫(huà)
*/
private boolean isCloseAnimating() {
if (mCurrentMenu != null) {
int contentLeft = getContentView().getLeft();
if (!mIsOpen && ((isLeftMenu() && contentLeft > 0) || (isRightMenu() && contentLeft < 0))) {
return true;
}
}
return false;
}
/**
* 當(dāng)菜單被ContentView遮住的時(shí)候海蔽，要設(shè)置菜單為Invisible共屈，防止已隱藏的菜單接收到點(diǎn)擊事件。
*/
private void updateMenu() {
View contentView = getContentView();
if (contentView != null) {
int contentLeft = contentView.getLeft();
if (contentLeft == 0) {
for (View view : mMenus.values()) {
if (view.getVisibility() != INVISIBLE) {
view.setVisibility(INVISIBLE);
}
}
} else {
if (mCurrentMenu != null && mCurrentMenu.getVisibility() != VISIBLE) {
mCurrentMenu.setVisibility(VISIBLE);
}
}
}
}
@Override
public void computeScroll() {
super.computeScroll();
if (mDragHelper.continueSettling(true)) {
ViewCompat.postInvalidateOnAnimation(this);
}
}
private class DragCallBack extends ViewDragHelper.Callback {
@Override
public boolean tryCaptureView(View child, int pointerId) {
// menu和content都可以抓取党窜，因?yàn)樵趍enu的寬度為MatchParent的時(shí)候拗引，是無(wú)法點(diǎn)擊到content的
return child == getContentView() || mMenus.containsValue(child);
}
@Override
public int clampViewPositionHorizontal(View child, int left, int dx) {
// 如果child是內(nèi)容， 那么可以左劃或右劃幌衣，開(kāi)啟或關(guān)閉菜單
if (child == getContentView()) {
if (isRightMenu()) {
return left > 0 ? 0 : left < -mCurrentMenu.getWidth() ?
-mCurrentMenu.getWidth() : left;
} else if (isLeftMenu()) {
return left > mCurrentMenu.getWidth() ? mCurrentMenu.getWidth() : left < 0 ?
0 : left;
}
}
// 如果抓取到的child是菜單矾削，那么不移動(dòng)child，而是移動(dòng)contentView
else if (isRightMenu()) {
View contentView = getContentView();
int newLeft = contentView.getLeft() + dx;
if (newLeft > 0) {
newLeft = 0;
} else if (newLeft < -child.getWidth()) {
newLeft = -child.getWidth();
}
contentView.layout(newLeft, contentView.getTop(), newLeft + contentView.getWidth(),
contentView.getBottom());
return child.getLeft();
} else if (isLeftMenu()) {
View contentView = getContentView();
int newLeft = contentView.getLeft() + dx;
if (newLeft < 0) {
newLeft = 0;
} else if (newLeft > child.getWidth()) {
newLeft = child.getWidth();
}
contentView.layout(newLeft, contentView.getTop(), newLeft + contentView.getWidth(),
contentView.getBottom());
return child.getLeft();
}
return 0;
}
@Override
public void onViewPositionChanged(View changedView, int left, int top, int dx, int dy) {
super.onViewPositionChanged(changedView, left, top, dx, dy);
updateMenu();
}
@Override
public void onViewReleased(View releasedChild, float xvel, float yvel) {
Log.e(TAG, "onViewReleased: " + xvel + " ,releasedChild = " + releasedChild);
if (isLeftMenu()) {
if (xvel > mVelocity) {
open();
} else if (xvel < -mVelocity) {
close();
} else {
if (getContentView().getLeft() > mCurrentMenu.getWidth() / 3 * 2) {
open();
} else {
close();
}
}
} else if (isRightMenu()) {
if (xvel < -mVelocity) {
open();
} else if (xvel > mVelocity) {
close();
} else {
if (getContentView().getLeft() < -mCurrentMenu.getWidth() / 3 * 2) {
open();
} else {
close();
}
}
}
}
}
}
xml中的用法如下泼掠，需要通過(guò)layout_gravity指定左右菜單怔软，最頂層的標(biāo)簽則是Content。
<?xml version="1.0" encoding="utf-8"?>
<com.aitsuki.swipe.SwipeItemLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/swipe_layout"
android:layout_width="match_parent"
android:layout_height="@dimen/swipe_item_height">
<TextView
android:id="@+id/left_menu"
android:layout_width="@dimen/swipe_item_menu_width"
android:layout_height="match_parent"
android:layout_gravity="left"
android:background="@color/red500"
android:gravity="center"
android:text="left"
android:textColor="@color/white"/>
<TextView
android:id="@+id/right_menu"
android:layout_width="@dimen/swipe_item_menu_width"
android:layout_height="match_parent"
android:layout_gravity="right"
android:background="@color/blue500"
android:gravity="center"
android:text="right"
android:textColor="@color/white"/>
<include layout="@layout/swipe_content"/>
</com.aitsuki.swipe.SwipeItemLayout>
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="@dimen/swipe_item_height"
android:background="?android:colorBackground"
android:foreground="?listChoiceBackgroundIndicator">
<TextView
android:id="@+id/tv_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textColor="@color/primaryText"
tools:text="Content"/>
</FrameLayout>
這樣择镇，一個(gè)體驗(yàn)還不錯(cuò)的側(cè)滑菜單就設(shè)計(jì)好了。
當(dāng)然你也可以直接使用代碼家的AndroidSwipeLayout
二括改、自定義RecylcerView管理SwipeItemLayout交互體驗(yàn)
交互方式我參考了IOS系統(tǒng)的message列表腻豌，和QQ的好友列表。
只有短短的100行代碼嘱能，注釋也不較多吝梅，應(yīng)該看得明白。
package com.aitsuki.swipe;
import android.content.Context;
import android.graphics.Rect;
import android.support.annotation.Nullable;
import android.support.v7.widget.RecyclerView;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
/**
* Created by AItsuki on 2017/2/23.
* 仿IOS message列表惹骂，QQ好友列表的交互體驗(yàn)
* 當(dāng)有菜單打開(kāi)的時(shí)候苏携，只要不是點(diǎn)擊在菜單上，關(guān)閉該菜單对粪。
* 只能同時(shí)打開(kāi)一個(gè)菜單右冻，防止多點(diǎn)觸控打開(kāi)菜單
*/
public class SwipeMenuRecyclerView extends RecyclerView {
public SwipeMenuRecyclerView(Context context) {
super(context);
}
public SwipeMenuRecyclerView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
}
public SwipeMenuRecyclerView(Context context, @Nullable AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
@Override
public boolean dispatchTouchEvent(MotionEvent ev) {
int action = ev.getActionMasked();
// 手指按下的時(shí)候，如果有開(kāi)啟的菜單著拭，只要手指不是落在該Item上纱扭，則關(guān)閉菜單, 并且不分發(fā)事件。
if (action == MotionEvent.ACTION_DOWN) {
int x = (int) ev.getX();
int y = (int) ev.getY();
View openItem = findOpenItem();
if (openItem != null && openItem != getTouchItem(x, y)) {
SwipeItemLayout swipeItemLayout = findSwipeItemLayout(openItem);
if (swipeItemLayout != null) {
swipeItemLayout.close();
return false;
}
}
} else if (action == MotionEvent.ACTION_POINTER_DOWN) {
// FIXME: 2017/3/22 不知道怎么解決多點(diǎn)觸控導(dǎo)致可以同時(shí)打開(kāi)多個(gè)菜單的bug儡遮，先暫時(shí)禁止多點(diǎn)觸控
return false;
}
return super.dispatchTouchEvent(ev);
}
/**
* 獲取按下位置的Item
*/
@Nullable
private View getTouchItem(int x, int y) {
Rect frame = new Rect();
for (int i = 0; i < getChildCount(); i++) {
View child = getChildAt(i);
if (child.getVisibility() == VISIBLE) {
child.getHitRect(frame);
if (frame.contains(x, y)) {
return child;
}
}
}
return null;
}
/**
* 找到當(dāng)前屏幕中開(kāi)啟的的Item
*/
@Nullable
private View findOpenItem() {
int childCount = getChildCount();
for (int i = 0; i < childCount; i++) {
SwipeItemLayout swipeItemLayout = findSwipeItemLayout(getChildAt(i));
if (swipeItemLayout != null && swipeItemLayout.isOpen()) {
return getChildAt(i);
}
}
return null;
}
/**
* 獲取該View
*/
@Nullable
private SwipeItemLayout findSwipeItemLayout(View view) {
if (view instanceof SwipeItemLayout) {
return (SwipeItemLayout) view;
} else if (view instanceof ViewGroup) {
ViewGroup group = (ViewGroup) view;
int count = group.getChildCount();
for (int i = 0; i < count; i++) {
SwipeItemLayout swipeLayout = findSwipeItemLayout(group.getChildAt(i));
if (swipeLayout != null) {
return swipeLayout;
}
}
}
return null;
}
}
三乳蛾、GIF上演示的Demo
不需要實(shí)現(xiàn)或繼承特定的Adapter，使用方式和普通RecyclerView沒(méi)有區(qū)別鄙币。
這個(gè)項(xiàng)目我可能會(huì)慢慢完善下去肃叶，但是這篇文章不會(huì)跟著更新了，畢竟只是一種實(shí)現(xiàn)思路十嘿，具體的還得看github上的因惭。
GitHub：SwipeMenuRecyclerView
