Android使用ViewDragHelper实现侧滑菜单
Posted 宿罪
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Android使用ViewDragHelper实现侧滑菜单相关的知识,希望对你有一定的参考价值。
前言
对于处理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处理
@Override
public boolean onTouchEvent(MotionEvent event)
// 将触摸事件交给mViewDragHelper处理
mViewDragHelper.processTouchEvent(event);
return true;
不过这里通常也会将拦截事件的方法交由ViewDragHelper来判断事件拦截,如:
/**
* 给mViewDragHelper判断是否拦截事件
* @param ev
* @return
*/
@Override
public boolean onInterceptTouchEvent(MotionEvent ev)
return mViewDragHelper.shouldInterceptTouchEvent(ev);
(3)重写computeScroll方法
@Override
public 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的引用
@Override
protected void onFinishInflate()
super.onFinishInflate();
mMenuView = getChildAt(0);
mMainView = getChildAt(1);
(4)重写onSizeChanged,得到菜单View的宽度及认为的最小滑动距离mMinLeft
/**
* 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;
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,运行测试即可得到相应的效果,当然这里还可以接着完善,在后续的文章中将会继续完善这个组件。
以上是关于Android使用ViewDragHelper实现侧滑菜单的主要内容,如果未能解决你的问题,请参考以下文章
Android开发ViewDragHelper打造不一样的recyclerview