使用 ViewDragHelper实现侧滑菜单

ViewDragHelper是一个鲜为人知的ViewGroup辅助类,它解决了android中手势处理过于复杂的问题。

其实ViewDragHelper并不是第一个用于分析手势处理的类,gesturedetector也是,但是在和拖动相关的手势分析方面gesturedetector只能说是勉为其难。

ViewDragHelper一般用在一个自定义ViewGroup的内部,我们先看下如何创建一个ViewDrawHelper:

ViewDragHelper mDragHelper = ViewDragHelper.create(this, 1.0f, new DragHelperCallback());

其中1.0f是敏感度参数参数越大越敏感。第一个参数为this,表示该类生成的对象,他是ViewDragHelper的拖动处理对象,必须为ViewGroup。

要让ViewDragHelper能够处理拖动需要将触摸事件传递给ViewDragHelper,这点和gesturedetector是一样的,也就是需要接管ViewGroup的onInterceptTouchEvent方法和onTouchEvent方法。

@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
  final int action = MotionEventCompat.getActionMasked(ev);
  if (action == MotionEvent.ACTION_CANCEL || action == MotionEvent.ACTION_UP) {
      mDragHelper.cancel();
      return false;
  }
  return mDragHelper.shouldInterceptTouchEvent(ev);
}
@Override
public boolean onTouchEvent(MotionEvent ev) {
  mDragHelper.processTouchEvent(ev);
  return true;
}

我把ViewDragHelper所有回调方法含义标注一下,具体的使用,推荐一篇文章简单学习一下:
http://blog.csdn.net/lmj623565791/article/details/46858663

初始化
val mDragHelper = ViewDragHelper.create(this, 1.0f, object : ViewDragHelper.Callback() {

            //是否捕捉视图
            override fun tryCaptureView(child: View?, pointerId: Int): Boolean {
                child ?: return false
                return false
            }

            //水平滑动坐标
            override fun clampViewPositionHorizontal(child: View?, left: Int, dx: Int): Int {
                return super.clampViewPositionHorizontal(child, left, dx)
            }

            //View拖行结束
            override fun onViewReleased(releasedChild: View?, xvel: Float, yvel: Float) {
             return super.onViewReleased(releasedChild, xvel, yvel)
            }

            //拖动坐标的变化
            override fun onViewPositionChanged(changedView: View?, left: Int, top: Int, dx: Int, dy: Int) {
                super.onViewPositionChanged(changedView, left, top, dx, dy)
            }

            //边缘拖动
            override fun onEdgeDragStarted(edgeFlags: Int, pointerId: Int) {
            }

            //边界锁,false 为unlock
            override fun onEdgeLock(edgeFlags: Int): Boolean {
                return super.onEdgeLock(edgeFlags)
            }

            //触摸ViewGroup边缘
            override fun onEdgeTouched(edgeFlags: Int, pointerId: Int) {
                super.onEdgeTouched(edgeFlags, pointerId)
            }

            //调用captureChildView确定拖动目标时,回调此方法
            override fun onViewCaptured(capturedChild: View?, activePointerId: Int) {
                super.onViewCaptured(capturedChild, activePointerId)
            }

            //拖拉状态变化
            override fun onViewDragStateChanged(state: Int) {
                super.onViewDragStateChanged(state)
            }

            //垂直滑动坐标
            override fun clampViewPositionVertical(child: View?, top: Int, dy: Int): Int {
                return super.clampViewPositionVertical(child, top, dy)
            }

            //水平拖拉范围
            override fun getViewHorizontalDragRange(child: View?): Int {
                return super.getViewHorizontalDragRange(child)
            }
        })

拖动行为的处理

处理横向的拖动:

在DragHelperCallback中实现clampViewPositionHorizontal方法, 并且返回一个适当的数值就能实现横向拖动效果,clampViewPositionHorizontal的第二个参数是指当前拖动子view应该到达的x坐标。所以按照常理这个方法原封返回第二个参数就可以了,当然为了让被拖动的view遇到边界之后就不在拖动,对返回的值可以做控制,你懂。
clampViewPositionVertical与clampViewPositionHorizontal用法相同,不同的是一个处理横向一个处理竖向。

通过DragHelperCallback的tryCaptureView方法的返回值可以决定一个parentview中哪个子view可以拖动,现在假设有两个子views (mDragView1和mDragView2) ,如下实现tryCaptureView之后,则只有mDragView1是可以拖动的。

@Override
public boolean tryCaptureView(View child, int pointerId) {
  return child == mDragView1;
}

滑动边缘:

分为滑动左边缘还是右边缘:EDGE_LEFT和EDGE_RIGHT,下面的代码设置了可以处理滑动左边缘:

mDragHelper.setEdgeTrackingEnabled(ViewDragHelper.EDGE_LEFT);

设置之后,onEdgeTouched方法会在左边缘滑动的时候被调用,这种情况下一般都是没有和子view接触的情况。

@Override
public void onEdgeTouched(int edgeFlags, int pointerId) {
    super.onEdgeTouched(edgeFlags, pointerId);
}

如果你想在边缘滑动的时候根据滑动距离移动一个子view,可以通过实现onEdgeDragStarted方法,并在onEdgeDragStarted方法中手动指定要移动的子View

@Override
public void onEdgeDragStarted(int edgeFlags, int pointerId) {
    mDragHelper.captureChildView(mDragView2, pointerId);
}

意思就是,mDragView2接下的行为mDragHelper接管了,直接在回调方法里:clampViewPositionVertical与clampViewPositionHorizontal做处理即可。

下面来看通过ViewDragHelper实现侧滑的简单逻辑:
1.重写任意一个ViewGroup,这里我使用的是RelativeLayout。
2.(假设你已经了解了ViewDragHelper)通过ViewDragHelper接管触摸事件,细节处理我会注释在代码中。

MyGroupView类

open class MyGroupView : RelativeLayout {

    private lateinit var mDragHelper: ViewDragHelper
    private lateinit var menu: View
    private lateinit var content: View
    private var showPer: Int = 80
    private var currentLeft: Int = -1
    private val parentSize = object {
        var width = 0
        var height = 0
    }
    private val menuSize = parentSize

    constructor(context: Context) : super(context) {
        init()
    }

    constructor(context: Context, attrs: AttributeSet?) : super(context, attrs) {
        init()
    }

    constructor(context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0) : super(context, attrs, defStyleAttr) {
        init()
    }

    private fun init() {
        mDragHelper = ViewDragHelper.create(this, 1.0f, object : ViewDragHelper.Callback() {

            //是否捕捉视图
            override fun tryCaptureView(child: View?, pointerId: Int): Boolean {
                child ?: return false
                return false
            }

            //水平滑动坐标
            override fun clampViewPositionHorizontal(child: View?, left: Int, dx: Int): Int {
                child ?: return super.clampViewPositionHorizontal(child, left, dx)
                //始终都是取left的值,初始值为-child.getWidth(),当向右拖动的时候left值增大,当left大于0的时候取0
                return if (left <= 0 && -menuSize.width < left) left
                else if (-menuSize.width >= left) -menuSize.width
                else 0
            }

            //View拖行结束
            override fun onViewReleased(releasedChild: View?, xvel: Float, yvel: Float) {
                releasedChild ?: return super.onViewReleased(releasedChild, xvel, yvel)
                if (Math.abs(currentLeft) > menuSize.width / 2) {
                    mDragHelper.settleCapturedViewAt(-menuSize.width, 0)
                } else {
                    mDragHelper.settleCapturedViewAt(0, 0)
                }
                postInvalidate()
            }

            //拖动坐标的变化
            override fun onViewPositionChanged(changedView: View?, left: Int, top: Int, dx: Int, dy: Int) {
                super.onViewPositionChanged(changedView, left, top, dx, dy)
                currentLeft = left
            }

            //边缘拖动
            override fun onEdgeDragStarted(edgeFlags: Int, pointerId: Int) {
                if (edgeFlags == ViewDragHelper.EDGE_LEFT)
                    mDragHelper.captureChildView(menu, pointerId)
            }

        })
        mDragHelper.setEdgeTrackingEnabled(ViewDragHelper.EDGE_LEFT)
    }


    override fun onInterceptTouchEvent(ev: MotionEvent?): Boolean {
        ev ?: return super.onInterceptTouchEvent(ev)
        return mDragHelper.shouldInterceptTouchEvent(ev)
    }

    override fun computeScroll() {
        if (mDragHelper.continueSettling(true))
            invalidate()
    }

    @SuppressLint("ClickableViewAccessibility")
    override fun onTouchEvent(event: MotionEvent?): Boolean {
        event ?: return super.onTouchEvent(event)
        mDragHelper.processTouchEvent(event)
        return true
    }

    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec)
        parentSize.width = MeasureSpec.getSize(widthMeasureSpec)
        parentSize.height = MeasureSpec.getSize(heightMeasureSpec)
        //重新设置菜单宽高,控制宽高
        menu.layoutParams.apply {
            width = parentSize.width * showPer / 100
            height = parentSize.height
            //组装侧滑视图的宽高
            menuSize.width = width
            menuSize.height = height
        }
        mDragHelper.smoothSlideViewTo(menu, -width, height)
    }

    //布局完成 xml 的解析
    override fun onFinishInflate() {
        super.onFinishInflate()
        //获取主视图View
        content = getChildAt(0)
        //获取菜单View
        menu = getChildAt(1)
    }

    public fun closeMenu() {
        mDragHelper.smoothSlideViewTo(menu, -menuSize.width, menuSize.height)
        currentLeft = -menuSize.width
    }

    public fun openMenu() {
        mDragHelper.smoothSlideViewTo(menu, 0, menuSize.height)
        currentLeft = 0
    }
}

XML视图

<?xml version="1.0" encoding="utf-8"?>
<com.example.aml.gittext.activity.view.MyGroupView 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="match_parent"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#ff0000"
        android:clickable="true">

        <TextView
            android:id="@+id/id_content_tv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="我是主视图"
            android:textSize="40sp"/>
    </RelativeLayout>

    <FrameLayout
        android:id="@+id/id_container_menu"
        android:layout_width="200dp"
        android:layout_height="match_parent">
    </FrameLayout>

</com.example.aml.gittext.activity.view.MyGroupView>

MenuFragment类

class MenuFragment : Fragment() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
    }

    override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        super.onCreateView(inflater, container, savedInstanceState)
        inflater?: return View(context)
        return inflater.inflate(R.layout.menu_fragment, container, false)
    }

}

MainActivity

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        android.support.v4.app.FragmentManager manager = getSupportFragmentManager();
        manager.findFragmentById(R.id.id_container_menu);
        manager.beginTransaction().add(R.id.id_container_menu, new MenuFragment()).commit();
    }

}

QQ20171118-214543-HD.gif

结束,代码需要优化,不建议直接使用到项目中~

源码已上传Github:https://github.com/519401502/draghelper

笔者能力有限,不足之处欢迎指出。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,377评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,390评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,967评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,344评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,441评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,492评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,497评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,274评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,732评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,008评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,184评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,837评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,520评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,156评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,407评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,056评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,074评论 2 352

推荐阅读更多精彩内容