侧滑菜单——方式二（使用ViewDragHelper）

在此例子中DragViewGroup继承于LinearLayout

第一步 初始化ViewDragHelper，在构造方法中进行

//通过静态工厂方法创建
viewDragHelper=ViewDragHelper.create(this,callback);//this指parentView，在这里就是自定义ViewGroup；callback是使用ViewDragHelper的核心

第二步 拦截事件，此步骤必不可少

@Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        //事件拦截给viewDragHelper
        return viewDragHelper.shouldInterceptTouchEvent(ev);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        //将触摸事件传递给viewDragHelper，此操作必不可少
        viewDragHelper.processTouchEvent(event);
        return true;
    }

第三步 处理computScroll方法，和使用Scroller一样，因为ViewDragHelper内部就是使用了Scroller来实现的
这里一般情况下可以套用以下模板

@Override
    public void computeScroll() {
        super.computeScroll();
        if(viewDragHelper.continueSettling(true)){
            ViewCompat.postInvalidateOnAnimation(this);//刷新带有动画
        }
    }

• ViewCompat.postInvalidateOnAnimation(this)相当于使用scroller的时候必须要调用invalidate刷新页面，并且不断循环调用

第四步 也是最关键的一步，处理回调Callback,在他的内部有很多方法，我们重写可以实现很多效果

• 首先会重写tryCaptureView方法 ，此方法可以指定哪个View可以被拖动
• 重写clampViewPositionHorizontal、clampViewPositionVertical方法可以实现水平和垂直的滑动，默认返回为0,可以限制滑动区域
• 重写onViewCaptured方法可以实现手指触摸到View时的效果
• 重写onViewReleased方法可以实现手指离开屏幕时的一些功能
• 重写onViewPositionChanged方法在事件位置变化时可以实现一些动态效果
• 重写onViewDragStateChanged方法在拖拽状态变化时调用

private ViewDragHelper.Callback callback=new ViewDragHelper.Callback() {
        @Override
        public boolean tryCaptureView(View child, int pointerId) {
            return content==child;//判断是否滑动的子View是内容区域
        }

        @Override
        public int clampViewPositionHorizontal(View child, int left, int dx) {//水平滑动，left表示垂直方向上的位置，dx表示较前次的偏移量
            return left;
        }

        @Override
        public int clampViewPositionVertical(View child, int top, int dy) {//垂直滑动，top表示垂直方向上的位置，dy表示较前次的偏移量
            return super.clampViewPositionVertical(child, top, dy);//默认为0
        }

        @Override
        public void onViewReleased(View releasedChild, float xvel, float yvel) {//手指离开屏幕
            super.onViewReleased(releasedChild, xvel, yvel);
            //手指抬起后缓慢移动到指定位置
            if(content.getLeft()

在onFinishInflate方法中按顺序定义定义menu，content
在onSizeChanged方法中获取子View的宽

最终效果就能实现抽屉式的侧滑菜单

slide.gif

完整代码如下

public class DragViewGroup extends LinearLayout {
    private ViewDragHelper viewDragHelper;
    private ViewGroup menu,content;//菜单和内容
    private int mScreenWidth;
    //dp
    private int menuRightMargin;

    private boolean once;

    private ViewDragHelper.Callback callback=new ViewDragHelper.Callback() {
        @Override
        public boolean tryCaptureView(View child, int pointerId) {
            return content==child;//判断是否滑动的子View是内容区域
        }

        @Override
        public int clampViewPositionHorizontal(View child, int left, int dx) {//水平滑动
            return Math.min(Math.max(0,left),mScreenWidth-menuRightMargin);//限制滑动区域在屏幕左边距到menu右边距
        }

        @Override
        public int clampViewPositionVertical(View child, int top, int dy) {//垂直滑动
            return super.clampViewPositionVertical(child, top, dy);//默认为0
        }

        @Override
        public void onViewReleased(View releasedChild, float xvel, float yvel) {//手指离开屏幕
            super.onViewReleased(releasedChild, xvel, yvel);
            //手指抬起后缓慢移动到指定位置
            if(content.getLeft()

menu

activity_main

自定义属性

继续进阶，为侧滑菜单增加动画效果

只需要在callback内部重写onViewPositionChanged方法
代码如下

@Override
        public void onViewPositionChanged(View changedView, int left, int top, int dx, int dy) {
            float scale = left * 1f / menu.getWidth();//0 ~ 1
            float contentScale = 1 - scale * 0.2f;//1 ~ 0.8
            float menuScale = 0.7f + scale * 0.3f;//0.7 ~ 1
            float menuAlpha = 0.6f + scale * 0.4f;//0.6 ~ 1
            float menuTransX = 0.3f - 0.3f * scale;//0.3 ~ 0

            //content
            ViewHelper.setPivotX(content, 0);
            ViewHelper.setPivotY(content, content.getHeight() / 2);
            ViewHelper.setScaleX(content, contentScale);
            ViewHelper.setScaleY(content, contentScale);
            //menu
            ViewHelper.setTranslationX(menu, -menuTransX * menu.getWidth());
            ViewHelper.setAlpha(menu, menuAlpha);
            ViewHelper.setScaleX(menu, menuScale);
            ViewHelper.setScaleY(menu, menuScale);
        }

效果如下

slideanim.gif