ListView 侧滑菜单的实现 -- 大道至简的SwipeMenuLayout

SwipeMenuLayout

View for listView item

一 介绍

 ListView 通常用来展示多个个体,比如QQ 微信中的联系人列表。一个比较常见的功能是侧滑删除。这个功能属于比较常见的一个菜单,网络上也有很多实现。

1 scroller 方式。

最常见的一个实现是ListView 的Item View 为一个LinerLayout, 菜单在LinerLayout的最右端超出屏幕的位置,当手指滑动的时候,通过scrollTo 的方法在ListView 中控制Item View 的滑动,使菜单滑动出来。但是在IOS 上菜单是隐藏在Item View 的下面,层叠式的,当滑动的时候不是拉出来的方式,而是显示出来。

2.NineOldAndroids

在属性动画没有加入android的远古时代,github 上有一个NineOldAndroids项目,有人通过这个实现一个和IOS接近,其原理是FrameLayout, context 为显示的内容,menu嵌套在context下面,属性动画的方式移动context。

3.SwipeMenuListView

在github 上有一个 https://github.com/baoyongzhang/SwipeMenuListView 实现效果和1 类似,但是View 移动采用layout 方式,我修改了下 https://github.com/louiewh/SwipeMenuListView   实现效果和IOS 一样。但是总觉这几种方式都不太完美,要么效果打了折扣,要么代码量太大,方式复杂,通常需要重写ListView 和Adapter。

二 原理

 下面一个SwipeMenuLayout 大概不到300行的代码,完美实现ListView 的侧滑菜单。原理是继承FrameLayout, 作为ListView 的Item View 。在View中层叠两层,上层context View 为要显示的内容,下面menu View 为菜单。重写SwipeMenuLayout的OnTouchEvent ,在OnTouchEvent 中控制context 的移动。如图:
ListView 侧滑菜单的实现 -- 大道至简的SwipeMenuLayout_第1张图片
image

1. init View.

定义ListView 的Item View,如果使用左菜单:

  1. 左菜单的ID为:swipe_left_menu
  2. 右菜单ID:swipe_right_menu
  3. context 菜单ID:swipe_context

这个是默认ID,这样在SwipeMenuLayout会自动找到菜单View ID :

    public SwipeMenuLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        initAttrs(attrs);
        initUI();
    }

    private void initUI() {
        mScroller = ScrollerCompat.create(getContext());

        ViewConfiguration config = ViewConfiguration.get(getContext());
        mTouchSlop = config.getScaledTouchSlop();

        mLeftMenuViewId  = getContext().getResources().getIdentifier(LEFTMENUVIEW, "id", getContext().getPackageName());
        mRightMenuViewId = getContext().getResources().getIdentifier(RIGHTMENUVIEW, "id", getContext().getPackageName());
        mContextViewId   = getContext().getResources().getIdentifier(CONTEXTVIEW, "id", getContext().getPackageName());

        if (mLeftMenuViewId == 0 || mRightMenuViewId == 0 || mContextViewId == 0) {
            throw new RuntimeException(String.format("initUI Exception" ));
        }
    }

重写 onMeasure方法, 在onMeasure 方法中调用findViewByID, 为什么在onMeasure 而不是在构造函数中,因为在构造函数中View 的子View还没有初始化,findViewByID 为空。需要强调的是菜单View 在init 的时候设置为不可以见,这样在开始滑动的时候,菜单View不会干扰SwipeMenuLayout的滑动事件

    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        initView();
        menuViewHide();
    }
  
     public void initView() {

        if(mLeftMenuView == null && mLeftMenuViewId != View.NO_ID) {
            mLeftMenuView = this.findViewById(mLeftMenuViewId);
        }

        if(mRightMenuView == null && mRightMenuViewId != View.NO_ID) {
            mRightMenuView = this.findViewById(mRightMenuViewId);
        }

        if(mContextView == null && mContextViewId != View.NO_ID)
            mContextView = this.findViewById(mContextViewId);

        this.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                if(mOnMenuClickListener != null) {
                    mOnMenuClickListener.onItemClick(v, mPosition);
                }
            }
        });

    }            

2 处理滑动事件

重写onTouchEvent 在down 事件中return true,拦截事件分发,在move 事件中判断滑动距离是否大于阀值,大于阀值,设置菜单View 可见,移动context View,在UP 事件中处理动画,根据滑动的距离和方向,开始对应的动画。

1. cancle 事件的处理, ListView 的 OnInteruptTouchEvent 会判断View 的Y轴滑动距离,如果大于一定的距离,拦截事件,响应ListView 的上下滑动。按照android 的标准处理,cancle 按照up 事件处理。

2. ListView 和 SwipeMenuLayout 的事件冲突,如果SwipeMenuLayout 进入侧滑后,上下滑动距离过大,ListView 会拦截事件,所以一旦进入侧滑模式,要禁止ListView 拦截事件.调用getParent().requestDisallowInterceptTouchEvent(true);
    public boolean onTouchEvent(MotionEvent event) {
        switch(event.getAction()){
            case MotionEvent.ACTION_DOWN:
                mDownX = event.getX();

                if(mLeftMenuView != null)
                    mLeftMargin = mLeftMenuView.getWidth();

                if(mRightMenuView != null)
                    mRightMargin = mRightMenuView.getWidth();

                if(mSlideView != null && this != mSlideView && mSlideView.isMenuOpen()) {
                    mSlideView.closeMenu();
                    event.setAction(MotionEvent.ACTION_CANCEL);
                }
                
                Log.d(TAG, "Event ACTION_DOWN mMenuShow:" + mMenuShow);
                super.onTouchEvent(event);
                return true;
            case MotionEvent.ACTION_MOVE:
                int dx = (int) (event.getX() - mDownX);
                if(Math.abs(dx) < mTouchSlop)
                    break;

                if(!mMenuShow ) {
                    menuViewShow(dx);
                    getParent().requestDisallowInterceptTouchEvent(true);
                    mSlideView = this;
                }

                if(dx > 0 && mLeftMenuView == null) break;
                if(dx < 0 && mRightMenuView == null) break;


                if(dx > 0 && dx > mLeftMargin) {
                    dx = mLeftMargin;
                } else if (dx < 0 && dx < -mRightMargin) {
                    dx = -mRightMargin;
                }

                layoutContextView(dx);

                if(mMenuShow)
                    event.setAction(MotionEvent.ACTION_CANCEL);

                return super.onTouchEvent(event);
            case MotionEvent.ACTION_CANCEL:
                Log.d(TAG, "Event ACTION_CANCEL mMenuShow:" + mMenuShow);
            case MotionEvent.ACTION_UP:
                int dis = mContextView.getLeft();
                /**
                 *  dis > 0, move to right, dis < mLeftMargin/2, close menu, dis < mLeftMargin open menu.
                 *  dis < 0, move to left, dis > -mRightMargin/2, close menu, dis > -mRightMargin, open menu
                 */
                if(dis > 0 && mLeftMenuView != null) {
                    if(dis < mLeftMargin/2) {
                        mScroller.startScroll(dis, 0, -dis, 0, mScrollTime);
                    } else if(dis < mLeftMargin) {
                        mScroller.startScroll(dis, 0, mLeftMargin-dis, 0, mScrollTime);
                    }

                    postInvalidate();
                } else if(dis < 0 && mRightMenuView != null) {
                    if(dis > -mRightMargin/2) {
                        mScroller.startScroll(dis, 0, -dis, 0, mScrollTime);  //close
                    } else if(dis > -mRightMargin) {
                        mScroller.startScroll(dis, 0, -mRightMargin-dis, 0, mScrollTime);
                    }

                    postInvalidate();
                }

                mDownX = 0;
                Log.d(TAG, "Event ACTION_UP mMenuShow:" + mMenuShow);
                if(mMenuShow)
                    event.setAction(MotionEvent.ACTION_CANCEL);
                return super.onTouchEvent(event);
            default:
                return super.onTouchEvent(event);
        }

        return super.onTouchEvent(event);
    }

3 contextView 的移动和动画

contextView 的移动方式采用layout 方法移动:

    private void layoutContextView(int dx) {
        if(mContextView != null)
            mContextView.layout(dx, 0, mContextView.getMeasuredWidth()+dx,     mContextView.getMeasuredHeight());

        if(!mResterListener && (dx == mLeftMargin || dx == -mRightMargin)) {
            Log.d(TAG, "registerListener dx:" + dx);
            registerListener(dx);
        } else if (mResterListener && (dx ==0 || (dx > 0 && dx != mLeftMargin ) || (dx < 0 && dx != -mRightMargin))) {
            Log.d(TAG, "unregisterListener dx:" + dx);
            unregisterListener(dx);
        }
    }

当滑动到一半的时候手里离开,这是菜单要关闭或者打开,动画采用Scroller 的方式,在UP 事件中调用mScroller.startScroll, 重写computerScroll

    public void computeScroll() {
        super.computeScroll();

        if(mScroller.computeScrollOffset()) {
            layoutContextView(mScroller.getCurrX());
            postInvalidate();
        }
    }

4 监听事件的处理

  1. 定义interface 和 事件注册,
  2. menu 菜单在init 的时候已经设置不可见,在 layoutContextView 的时候,判断滑动距离,如果大于0 设置菜单menu 可见,如果滑动到了菜单宽度的位置,菜单完全打开,注册监听事件。避免menu View 和SwipeMenuLayout 滑动事件冲突。
  3. 由于我们拦截了事件,ListView 的 OnItemClick 无法响应,因此需要我们单独写一个Listener,处理整个SwipeMenuLayout 的点击事件响应。把这个事件响应放到整个SwipeMenuLayout,在initView() 函数中设置了OnClickListener,所以在 OnTouchEvent 中每个事件都调用了 super.OnTouchEvent()。但是这样处理的话响应滑动的同时也响应了OnClickListener, 需要处理滑动和OnClickListener 的事件冲突,CANCAL 事件来了,一旦我们进入了滑动模式,在MOVE 事件中发送CANCAL事件给super,OnClickListener就无法响应。
    public interface OnMenuClickListener {

        void onMenuClick(View v, int position);

        void onItemClick(View v, int position);
    }
    
    private void  registerListener(int dis) {
        if(mLeftMenuView != null && dis == mLeftMargin) {
            mLeftMenuView.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    if (mOnMenuClickListener != null)
                        mOnMenuClickListener.onMenuClick(v, mPosition);
                }
            });
        }

        if(mRightMenuView != null && dis == -mRightMargin) {
            mRightMenuView.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    if (mOnMenuClickListener != null)
                        mOnMenuClickListener.onMenuClick(v, mPosition);
                }
            });
        }

        mResterListener = true;
    }

    private void unregisterListener(int dis) {
        if(mLeftMenuView != null && dis > 0) {
            mLeftMenuView.setOnClickListener(null);
        }

        if(mRightMenuView != null && dis < 0) {
            mRightMenuView.setOnClickListener(null);
        }

        mResterListener = false;
    }

5 使用

  1. 定义ListView 的Item XML 注意左右菜单 和context View的ID;左右菜单根据需要定义,不需要不定义即可
  2. 在重写Adapter 的时候 getView 中设置position, 重写OnMenuClickListener,设置监听事件:
    ((SwipeMenuLayout)convertView).setPosition(position);
    ((SwipeMenuLayout)convertView).setOnMenuClickListener(ListViewActivity.this);

三 总结

不需要重写ListView 和 Adapter,菜单可以用XML定义好即可,是不是很简单。
传送门:github

你可能感兴趣的