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

来源：互联网发布：mac mini a1176配置编辑：程序博客网时间：2024/05/01 08:49

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 的移动。如图：

1. init View.

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

左菜单的ID为：swipe_left_menu
右菜单ID：swipe_right_menu
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 监听事件的处理

定义interface 和事件注册，
menu 菜单在init 的时候已经设置不可见，在 layoutContextView 的时候，判断滑动距离，如果大于0 设置菜单menu 可见，如果滑动到了菜单宽度的位置，菜单完全打开，注册监听事件。避免menu View 和SwipeMenuLayout 滑动事件冲突。
由于我们拦截了事件，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 使用

定义ListView 的Item XML 注意左右菜单和context View的ID；左右菜单根据需要定义，不需要不定义即可
在重写Adapter 的时候 getView 中设置position，重写OnMenuClickListener，设置监听事件：

    ((SwipeMenuLayout)convertView).setPosition(position);    ((SwipeMenuLayout)convertView).setOnMenuClickListener(ListViewActivity.this);

三总结

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

0 0