Android使用ViewDragHelper实现侧滑菜单（一）

来源：互联网发布：知乎复制编辑：程序博客网时间：2024/05/24 05:56

前言

对于处理View的滑动，除了Android实现滑动的几种方式写到的四种外，Android v4包中还提供了一个ViewDragHelper类来帮助我们更加方便地处理滑动事件，ViewDragHelper使得View与View之间的滑动交互更加简单方便。不过在学习ViewDragHelper处理滑动事件前需要掌握View的事件处理机制，可以参考：Android事件的分发与拦截机制。

ViewDragHelper的使用

（1）创建ViewDragHelper

首先需要创建ViewDragHelper（通常在View的构造方法中），ViewDragHelper提供了一个创建它的静态方法，代码如下：

mViewDragHelper = ViewDragHelper.create(this,mCallback);

创建ViewDragHelper需要提供一个回调接口Callback，代码如下：

private ViewDragHelper.Callback mCallback = new ViewDragHelper.Callback(){    /**     * 通过比较child来判断何时监听触摸事件     * @param child     * @param pointerId     * @return     */    @Override    public boolean tryCaptureView(View child, int pointerId) {        return false;    }};

（2）重写onTouchEvent方法，将触摸事件交给ViewDragHelper处理

@Overridepublic boolean onTouchEvent(MotionEvent event) {    // 将触摸事件交给mViewDragHelper处理    mViewDragHelper.processTouchEvent(event);    return true;}

不过这里通常也会将拦截事件的方法交由ViewDragHelper来判断事件拦截，如：

/** * 给mViewDragHelper判断是否拦截事件 * @param ev * @return */@Overridepublic boolean onInterceptTouchEvent(MotionEvent ev) {    return mViewDragHelper.shouldInterceptTouchEvent(ev);}

（3）重写computeScroll方法

@Overridepublic void computeScroll() {    if(mViewDragHelper.continueSettling(true)){        ViewCompat.postInvalidateOnAnimation(this);    }}

由于ViewDragHelper需要实现的是平滑，类似Scroller，也需要重写computeScroll方法，上面方法代码为模板代码。

完成以上三步骤后就可以使用ViewDragHelper处理平滑滑动了，下面将使用ViewDragHelper实现一个侧滑菜单

ViewDragHelper实现侧滑菜单

先贴上效果图：

这里写图片描述

（1）首先需要自定义一个ViewGroup，这里继承FrameLayout并在构造方法中初始化ViewDragHelper，代码如下：

public SidePullLayout(@NonNull Context context) {    this(context,null);}public SidePullLayout(@NonNull Context context, @Nullable AttributeSet attrs) {    this(context, attrs,0);}public SidePullLayout(@NonNull Context context, @Nullable AttributeSet attrs, @AttrRes int defStyleAttr) {    super(context, attrs, defStyleAttr);    init();}private void init() {    mViewDragHelper = ViewDragHelper.create(this,mCallback);}

（2）创建Callback，需要重写多个方法完成相应的功能

private ViewDragHelper.Callback mCallback = new ViewDragHelper.Callback() {    @Override    public void onViewDragStateChanged(int state) {        super.onViewDragStateChanged(state);        if(mDrawerListener != null){            mDrawerListener.onDrawerStateChanged(state);        }    }    /**     * 判断什么时候开始检测触摸事件     * @param child     * @param pointerId     * @return     */    @Override    public boolean tryCaptureView(View child, int pointerId) {        // 当触摸的View是MainView时开始检测        return mMainView == child;    }    @Override    public void onViewPositionChanged(View changedView, int left, int top, int dx, int dy) {        super.onViewPositionChanged(changedView, left, top, dx, dy);        if(mDrawerListener !=null) {            float alpha;            if(left>mMinLeft){                alpha = 0.6f;            }else{                alpha = (mMinLeft-left)*1.0f/mMinLeft;                if(alpha < 0.6f){                    alpha = 0.6f;                }            }            mDrawerListener.onDrawerSlide(changedView,alpha);        }    }    /**     * 拖拽结束后回调     * @param releasedChild     * @param xvel     * @param yvel     */    @Override    public void onViewReleased(View releasedChild, float xvel, float yvel) {        super.onViewReleased(releasedChild, xvel, yvel);        // 当手指抬起时，我们让菜单慢慢滑动到合适位置（平滑）        if(mMainView.getLeft() < mMinLeft){            // 关闭菜单            mViewDragHelper.smoothSlideViewTo(mMainView,0,0);            ViewCompat.postInvalidateOnAnimation(SidePullLayout.this);            if(mDrawerListener != null){                mDrawerListener.onDrawerClosed(releasedChild);            }        }else{            // 打开菜单            mViewDragHelper.smoothSlideViewTo(mMainView, mMinLeft, mMinLeft /2);            ViewCompat.postInvalidateOnAnimation(SidePullLayout.this);            if(mDrawerListener != null){                mDrawerListener.onDrawerOpened(releasedChild);            }        }    }    /**     * 水平滑动回调方法     * @param child     * @param left     * @param dx     * @return     */    @Override    public int clampViewPositionHorizontal(View child, int left, int dx) {        if(left <0){            mLeft = 0;            return 0;        }        mLeft = left;        return left;    }    /**     * 垂直滑动回调方法     * @param child     * @param top     * @param dy     * @return     */    @Override    public int clampViewPositionVertical(View child, int top, int dy) {        if(top <0 && mLeft <0 || top > mLeft){            return 0;        }else {            return mLeft / 2;        }    }};

说明：

tryCaptureView方法判断什么时候监听触摸事件，这里表示当触摸的View为内容View的时候开始监听；
clampViewPositionHorizontal方法用来处理水平滑动，这里屏蔽（返回值为0）了left为负的情况，也就是从右往左滑，并记录了left的值；
clampViewPositionVertical方法处理垂直滑动，当滑动为从下往上滑动（top为负）时并且从右往左时或者垂直滑动幅度大于水平滑动幅度时返回0屏蔽垂直滑动，否则将垂直滑动的距离设置为水平滑动值的一半。
onViewReleased方法表示当拖拽的View被释放的时候，也就是手指离开屏幕时回调，这里当水平滑动的距离小于菜单打开时最小距离时回弹，否则滑动到最小距离打开菜单。并回调相应接口事件方法。
onViewPositionChanged表示View的位置改变时回调，可以在这里计算透明度的改变（根据自己的需要）并回调接口事件。
onViewDragStateChanged当拖拽状态改变时回调，可以在这里回调接口事件。

相应的接口为：

public interface DrawerListener{    void onDrawerSlide(View drawerView, float alpha);    void onDrawerOpened(View drawerView);    void onDrawerClosed(View drawerView);    void onDrawerStateChanged(int newState);}

（3）重写onFinishInflate，拿到MenuView和MainView的引用

@Overrideprotected void onFinishInflate() {    super.onFinishInflate();    mMenuView = getChildAt(0);    mMainView = getChildAt(1);}

（4）重写onSizeChanged，得到菜单View的宽度及认为的最小滑动距离mMinLeft

/** * View尺寸发送改变时回调 * @param w * @param h * @param oldw * @param oldh */@Overrideprotected void onSizeChanged(int w, int h, int oldw, int oldh) {    super.onSizeChanged(w, h, oldw, oldh);    mWidth = mMenuView.getMeasuredWidth();    mMinLeft = mWidth/2;}

ok，SidePullLayout的完整代码如下：

package com.lt.demo.touchintercept;import android.content.Context;import android.support.annotation.AttrRes;import android.support.annotation.NonNull;import android.support.annotation.Nullable;import android.support.v4.view.ViewCompat;import android.support.v4.widget.ViewDragHelper;import android.util.AttributeSet;import android.view.MotionEvent;import android.view.View;import android.widget.FrameLayout;/** * Created by luotong on 2017/9/14. */public class SidePullLayout extends FrameLayout {    private static final String TAG = "SidePullLayout";    private ViewDragHelper mViewDragHelper;    private View mMenuView;    private View mMainView;    private int mLeft; // 主View的左边框距离，随拖拽而改变    private int mWidth; // 菜单View的宽度    private DrawerListener mDrawerListener;    private int mMinLeft; // 当菜单打开时，主View最小的左边距离    public void setDrawerListener(DrawerListener mDrawerListener) {        this.mDrawerListener = mDrawerListener;    }    public SidePullLayout(@NonNull Context context) {        this(context,null);    }    public SidePullLayout(@NonNull Context context, @Nullable AttributeSet attrs) {        this(context, attrs,0);    }    public SidePullLayout(@NonNull Context context, @Nullable AttributeSet attrs, @AttrRes int defStyleAttr) {        super(context, attrs, defStyleAttr);        init();    }    private void init() {        mViewDragHelper = ViewDragHelper.create(this,mCallback);    }    private ViewDragHelper.Callback mCallback = new ViewDragHelper.Callback() {        @Override        public void onViewDragStateChanged(int state) {            super.onViewDragStateChanged(state);            if(mDrawerListener != null){                mDrawerListener.onDrawerStateChanged(state);            }        }        /**         * 判断什么时候开始检测触摸事件         * @param child         * @param pointerId         * @return         */        @Override        public boolean tryCaptureView(View child, int pointerId) {            // 当触摸的View是MainView时开始检测            return mMainView == child;        }        @Override        public void onViewPositionChanged(View changedView, int left, int top, int dx, int dy) {            super.onViewPositionChanged(changedView, left, top, dx, dy);            if(mDrawerListener !=null) {                float alpha;                if(left>mMinLeft){                    alpha = 0.6f;                }else{                    alpha = (mMinLeft-left)*1.0f/mMinLeft;                    if(alpha < 0.6f){                        alpha = 0.6f;                    }                }                mDrawerListener.onDrawerSlide(changedView,alpha);            }        }        /**         * 拖拽结束后回调         * @param releasedChild         * @param xvel         * @param yvel         */        @Override        public void onViewReleased(View releasedChild, float xvel, float yvel) {            super.onViewReleased(releasedChild, xvel, yvel);            // 当手指抬起时，我们让菜单慢慢滑动到合适位置（平滑）            if(mMainView.getLeft() < mMinLeft){                // 关闭菜单                mViewDragHelper.smoothSlideViewTo(mMainView,0,0);                ViewCompat.postInvalidateOnAnimation(SidePullLayout.this);                if(mDrawerListener != null){                    mDrawerListener.onDrawerClosed(releasedChild);                }            }else{                // 打开菜单                mViewDragHelper.smoothSlideViewTo(mMainView, mMinLeft, mMinLeft /2);                ViewCompat.postInvalidateOnAnimation(SidePullLayout.this);                if(mDrawerListener != null){                    mDrawerListener.onDrawerOpened(releasedChild);                }            }        }        /**         * 水平滑动回调方法         * @param child         * @param left         * @param dx         * @return         */        @Override        public int clampViewPositionHorizontal(View child, int left, int dx) {            if(left <0){                mLeft = 0;                return 0;            }            mLeft = left;            return left;        }        /**         * 垂直滑动回调方法         * @param child         * @param top         * @param dy         * @return         */        @Override        public int clampViewPositionVertical(View child, int top, int dy) {            if(top <0 && mLeft <0 || top > mLeft){                return 0;            }else {                return mLeft / 2;            }        }    };    /**     * 给mViewDragHelper判断是否拦截事件     * @param ev     * @return     */    @Override    public boolean onInterceptTouchEvent(MotionEvent ev) {        return true;    }    @Override    public boolean onTouchEvent(MotionEvent event) {        // 将触摸事件交给mViewDragHelper处理        mViewDragHelper.processTouchEvent(event);        return true;    }    /**     * View尺寸发送改变时回调     * @param w     * @param h     * @param oldw     * @param oldh     */    @Override    protected void onSizeChanged(int w, int h, int oldw, int oldh) {        super.onSizeChanged(w, h, oldw, oldh);        mWidth = mMenuView.getMeasuredWidth();        mMinLeft = mWidth/2;    }    @Override    protected void onFinishInflate() {        super.onFinishInflate();        mMenuView = getChildAt(0);        mMainView = getChildAt(1);    }    @Override    public void computeScroll() {        if(mViewDragHelper.continueSettling(true)){            ViewCompat.postInvalidateOnAnimation(this);        }    }    public interface DrawerListener{        void onDrawerSlide(View drawerView, float alpha);        void onDrawerOpened(View drawerView);        void onDrawerClosed(View drawerView);        void onDrawerStateChanged(int newState);    }}

这里将onInterceptTouchEvent返回值设为true，直接让当前View来拦截触摸事件。

下面编写测代码，布局文件如下：

<?xml version="1.0" encoding="utf-8"?><LinearLayout    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"    android:layout_height="match_parent" tools:context="com.lt.demo.touchintercept.MainActivity">    <com.lt.demo.touchintercept.SidePullLayout        android:id="@+id/sidePullLayout"        android:layout_width="match_parent"        android:layout_height="match_parent">        <FrameLayout            android:layout_width="match_parent"            android:background="@mipmap/bg_menu"            android:layout_height="match_parent">            <ListView                android:id="@+id/listView"                android:layout_gravity="center_vertical"                android:layout_width="match_parent"                android:layout_height="wrap_content">            </ListView>        </FrameLayout>        <FrameLayout            android:layout_width="match_parent"            android:background="@mipmap/main"            android:layout_height="match_parent">        </FrameLayout>    </com.lt.demo.touchintercept.SidePullLayout></LinearLayout>

MainActivity.java

package com.lt.demo.touchintercept;import android.support.v4.widget.DrawerLayout;import android.support.v4.widget.ViewDragHelper;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.util.Log;import android.view.View;import android.widget.ArrayAdapter;import android.widget.ListView;public class MainActivity extends AppCompatActivity implements SidePullLayout.DrawerListener {    private static final String TAG = "MainActivity";    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        SidePullLayout sidePullLayout = (SidePullLayout) findViewById(R.id.sidePullLayout);        sidePullLayout.setDrawerListener(this);        ListView listView = (ListView) findViewById(R.id.listView);        listView.setAdapter(new ArrayAdapter<String>(this,android.R.layout.simple_expandable_list_item_1,new String[]{"新闻中心","应用更新","个人中心","设置"}));    }    @Override    public void onDrawerSlide(View drawerView, float alpha) {        Log.d(TAG,"onDrawerSlide alpha="+alpha);        drawerView.setAlpha(alpha);    }    @Override    public void onDrawerOpened(View drawerView) {        Log.d(TAG,"onDrawerOpened()");    }    @Override    public void onDrawerClosed(View drawerView) {        Log.d(TAG,"onDrawerClosed()");    }    @Override    public void onDrawerStateChanged(int newState) {        Log.d(TAG,"onDrawerStateChanged() newState="+newState);    }}

Ok，运行测试即可得到相应的效果，当然这里还可以接着完善，在后续的文章中将会继续完善这个组件。

阅读全文

0 0