前语

在现有的开源库中，多数侧滑删去组件仅支撑单一触点拉出菜单选项。但是，iOS版的微信音讯界面供给了一种多触点侧滑菜单的完成。为了模仿这一交互形式，采用了HorizontalScrollView来满意多触点拉出侧滑菜单的需求。下文将详细介绍该组件的完成过程和效果。

一、方针与剖析

1. 方针

效果图：

参考微信音讯界面的用户交互：

支撑多指一同拉出侧滑菜单。
点击非菜单区域，其他打开的菜单将回收。
当多个菜单一同打开时，触碰到的菜单能够随手指移动，一同其他菜单会主动回收。
当新菜单打开时，之前打开的菜单需求主动回收。
点击content的事情
点击menu事情

2. 根本完成思路

为RecyclerView的每个项目（item）增加一个HorizontalScrollView容器以完成多触点滑动功能。值得注意的是，ScrollView和RecyclerView的滑动事情不会产生抵触，因为ScrollView会阻拦接触事情而不持续向下分发。

在XML布局中，运用match_parent来设置内容布局的宽度是无效的。这是因为ScrollView会将一切项目填充在其可用长度内。因而，咱们需求在代码中动态地调整内容布局的宽度以处理这一问题。

难点首要会集在何时回收侧滑菜单，这涉及多个状况的判别。后续部分将详细阐述该组件的详细完成思路。

二、完成原理解析

本部分将结合之前的方针来逐渐剖析

1.动态设置content_layout的大小

xml部分很简略正常设置即可

<?xml version="1.0" encoding="utf-8"?>
<com.george.SlideMenuScrollView.SlideMenuScrollView
    android:id="@+id/scroll_view"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:menu_id="@+id/menu_text"
    app:content_layout_id="@+id/content_layout"
    android:scrollbars="none">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <LinearLayout
            android:id="@+id/content_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <TextView
                android:id="@+id/content_text"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:textSize="16sp"
                android:padding="16dp"
                android:text="Content" />
        </LinearLayout>
        <LinearLayout
            android:id="@+id/menu_layout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
            <TextView
                android:id="@+id/menu_text"
                android:layout_width="105dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:textSize="16sp"
                android:padding="16dp"
                android:text="@string/delete"
                android:gravity="center"
                android:background="#FF0000" />
        </LinearLayout>
    </LinearLayout>
</com.george.SlideMenuScrollView.SlideMenuScrollView>

 protected void onFinishInflate() {
        super.onFinishInflate();
        validateViewId(menuId, "SlideToDeleteScrollView_menu_id");
        menuText = findViewById(menuId);
        validateViewId(contentLayoutId, "SlideToDeleteScrollView_content_layout_id");
        contentLayout = findViewById(contentLayoutId);
		//布局加载后将content_layout的宽度设为屏幕宽度
        DisplayMetrics displayMetrics = new DisplayMetrics();
        ((Activity) getContext()).getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
        int screenWidth = displayMetrics.widthPixels;
        ViewGroup.LayoutParams layoutParams = contentLayout.getLayoutParams();
        layoutParams.width = screenWidth;
        contentLayout.setLayoutParams(layoutParams);
		//textview的默认宽度为滑动阈值
        menuText.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                mScrollThreshold = menuText.getWidth();
                menuDefaultWidth = mScrollThreshold;
                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
                    menuText.getViewTreeObserver().removeOnGlobalLayoutListener(this);
                } else {
                    menuText.getViewTreeObserver().removeGlobalOnLayoutListener(this);
                }
            }
        });

2、3、4、方针将放在一同剖析

在剖析第二个方针（点击非菜单区域，其他打开的菜单应主动回收）时，直观的处理方案是在接触的down事情中将一切打开的菜单回收。

但是，当咱们考虑到第三个方针（触碰的菜单应能随手指移动，其他菜单则需主动回收）时，仅仅依赖于down事情来处理这个动作是不足够的。咱们还需求判别用户是否正在移动当前菜单，并据此决定是否回收其他菜单。

针对第四个方针（当新菜单打开时，从前打开的菜单应主动回收），一些人可能会质疑这是否与第二个方针相同。仔细剖析后，因为支撑多个菜单一同打开，咱们需求保护一个列表（list）来追踪每个菜单的状况。决定何时将菜单参加此列表成为一个关键考虑要素。如果咱们在接触开端立刻参加列表，那么在down事情中回收菜单的逻辑就会干扰到多个菜单一同打开的操作。因而，合理的做法是仅在菜单彻底打开后将其参加列表。这样，在多个菜单一同打开但尚未彻底打开的情况下，因为列表数量为0，down事情天然不会影响这一操作。

代码如下：

@Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);
        if (isFullyOpened() && oldl < mScrollThreshold) {
            notifyMenuFullyOpened(); //彻底打开将菜单参加list
        } else if (l == 0) {
            notifyMenuClosed(); //关闭时移除
        }
    }
private boolean isFullyOpened() {
        return getScrollX() >= mScrollThreshold;
    }
@Override
    public boolean onTouchEvent(MotionEvent ev) {
        super.onTouchEvent(ev);
        int action = ev.getAction();
        switch (action & MotionEvent.ACTION_MASK) {
            case MotionEvent.ACTION_DOWN:
                initialX = ev.getX();
                initialY = ev.getY();
                isMoving = false;
                //将除当前接触的菜单悉数回收，down不能将悉数菜单回收，
                //用户有可能想移动其中一个菜单
                mOnMenuStateChangeListener.onActionDown(this);
                break;
            case MotionEvent.ACTION_MOVE:
            //这儿手动判别是否移动的原因是为了打开多个菜单时，用户移动的那个menu不能回收
                if (Math.abs(initialX - ev.getX()) > TOUCH_THRESHOLD) {
                    isMoving = true;
                }
                break;
            case MotionEvent.ACTION_UP:
                mScrollThreshold = menuText.getWidth();
                if (!isMoving) {
                	//将一切菜单回收
                    notifyAboutToOpen();
                    //这儿点击事情判别用getScrollX()，用户如果点击空白区域，菜单
                    //菜单会悉数回收，getScrollX就会为0，用户抬手后就会触发点击content的操作
                    if (getScrollX() == 0) {
                        mOnMenuStateChangeListener.onContentClick(this);
                    }
                } else {
                	//判别滑动阈值超越一半打开，这儿可自行更改也可以增加手指滑动速度判别
                    if (getScrollX() > mScrollThreshold / 2) {
                        smoothScrollTo(mScrollThreshold, 0);
                    } else if (getScrollX() <= mScrollThreshold / 2) {
                        smoothScrollTo(0, 0);
                    }
                }
                break;
            default:
                break;
        }
        return super.onTouchEvent(ev);
    }
public interface OnMenuStateChangeListener {
        /**
         * @Scenario: When the slide menu is closed.
         * @Function: Removes the closed menu from a list of open menus.
         */
        void onMenuClosed(SlideMenuScrollView view);
        /**
         * @Scenario: When the slide menu is fully opened.
         * @Function: Adds the menu to a list of open menus.
         */
        void onMenuFullyOpened(SlideMenuScrollView view);
        /**
         * @Scenario: When the slide menu is about to open.
         * @Function: Closes any already opened menus.
         */
        void onMenuAboutToOpen(SlideMenuScrollView view);
        /**
         * @Scenario: When a finger is pressed down.
         * @Function: Closes all menus except the current one.
         */
        void onActionDown(SlideMenuScrollView view);
        /**
         * @Scenario: When the slide menu is confirmed.
         * @Function: Performs actions related to confirming the menu.
         */
        void onMenuConfirm(SlideMenuScrollView view);
        /**
         * @Scenario: When the content area is clicked.
         * @Function: Performs actions related to clicking on the content area.
         */
        void onContentClick(SlideMenuScrollView view);
    }

adapter

holder.scrollView.setOnMenuStateChangeListener(new SlideMenuScrollView.OnMenuStateChangeListener() {
            @Override
            public void onMenuClosed(SlideMenuScrollView view) {
                openedMenus.remove(view);
            }
            @Override
            public void onMenuFullyOpened(SlideMenuScrollView view) {
                openedMenus.add(view);
            }
            @Override
            public void onMenuAboutToOpen(SlideMenuScrollView view) {
                for (SlideMenuScrollView openedMenu : new ArrayList<>(openedMenus)) {
                    openedMenu.scrollWithAnimation(0, 0,300);
                }
                openedMenus.clear();
            }
            @Override
            public void onActionDown(SlideMenuScrollView view) {
                for (SlideMenuScrollView openedMenu : new ArrayList<>(openedMenus)) {
                    if (openedMenu != view) {
                        openedMenu.scrollWithAnimation(0, 0,300);
                        openedMenus.remove(openedMenu);
                    }
                }
            }
            @Override
            public void onMenuConfirm(SlideMenuScrollView view) {
                data.remove(position);
                notifyDataSetChanged();
            }
            @Override
            public void onContentClick(SlideMenuScrollView view) {
                Toast.makeText(view.getContext(), "Menu confirm", Toast.LENGTH_SHORT).show();
            }
        });

5、6方针

这两个点击事情就很简略了，需求注意一下menu的touch事情后需求阻拦，不能持续向下分发事情，不然会触发scroll的down事情

//可以自行更改需求，我这儿的需求是点击删去，menu长度会增加，再次点击删去菜单
menuText.setOnTouchListener(new OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                switch (event.getAction()) {
                    case MotionEvent.ACTION_DOWN:
                        mOnMenuStateChangeListener.onActionDown(SlideMenuScrollView.this);
                        break;
                    case MotionEvent.ACTION_UP:
                        if (isMenuConfirm) {
                            mOnMenuStateChangeListener.onMenuConfirm(SlideMenuScrollView.this);
                        } else {
                            updateMenuState();
                        }
                        break;
                    default:
                        break;
                }
                return true; //阻拦事情，自己处理
            }
        });
private void updateMenuState() {
        isMenuConfirm = true;
        menuText.setText(getResources().getText(R.string.confirm_delete));
        ViewGroup.LayoutParams params = menuText.getLayoutParams();
        int newWidth = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 144, getResources().getDisplayMetrics());
        int difference = newWidth - params.width;
        params.width = newWidth;
        menuText.setLayoutParams(params);
        scrollWithAnimation(mScrollThreshold + difference, 0, 100);//移动到menu变长后的位置
    }
    private void resetMenuState() {
        ViewGroup.LayoutParams textParams = menuText.getLayoutParams();
        if (textParams.width != menuDefaultWidth) {
            isMenuConfirm = false;
            menuText.setText(getResources().getText(R.string.delete));
            textParams.width = menuDefaultWidth;
            menuText.setLayoutParams(textParams);
            mScrollThreshold = menuDefaultWidth;
        }
    }

三、demo与注意事项

demo地址:github demo地址

注意事项: xml中运用SlideMenuScrollView需求设置menu_id和content_layout_id，目前自定义view中给contentLayout设置的是线性布局，可自行更改为其他布局。