Android进阶之自定义View实战(五)ViewDragHelper范例

引言

在上篇博客Android进阶之自定义View实战(四)ViewDragHelper入门中，我们学习了ViewDragHelper的常用方法，它帮助我们处理的View的触摸事件的分发与拦截，我们仅仅只需实现它的Callback接口的几个方法就可以方便的实现诸如边界检测、惯性滚动、View联动之类的逻辑。这篇博客就通过仿YouTubeLayout来熟悉它的用法:

YouTubeLayout实现

本节内容主要来自http://flavienlaurent.com/blog/2013/08/28/each-navigation-drawer-hides-a-viewdraghelper/,
效果图:

布局文件:

原文还是在拦截和消费事件上做了大量处理，个人认为没有必要，ViewDragHelper的精髓就是已经帮你处理好了手势检测和惯性滚动...下面是我简化后的代码:
成员变量:

    private ViewDragHelper mDragHelper;
    private View mHeaderView;//头部View，唯一需要被捕获的View
    private View mDescView;

    private int mDragRange;//滚动范围:总高度-header的高度
    private int mTop;//滚动过程中的当期top位置,用于View重绘
    private float mDragOffset;//拖动距离百分比,用于判断松手行为

构造方法及成员变量初始化:

public YouTubeLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        mDragHelper = ViewDragHelper.create(this, 1f, new DragHelperCallback());
    }

    public YouTubeLayout(Context context) {
        this(context, null);
    }

    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        mHeaderView = findViewById(R.id.viewHeader);
        mDescView = findViewById(R.id.viewDesc);
        //点击事件测试
        mDescView.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getContext(), "mDescView", Toast.LENGTH_SHORT).show();
            }
        });

        mHeaderView.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getContext(), "mHeaderView", Toast.LENGTH_SHORT).show();
            }
        });
    }

DragHelperCallback接口:

private class DragHelperCallback extends ViewDragHelper.Callback{

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

        //捕获的view位置移动时，View的变化处理
        @Override
        public void onViewPositionChanged(View changedView, int left, int top, int dx, int dy) {
            mTop = top;
            mDragOffset = (float)top/mDragRange;//滑动percent
            mHeaderView.setPivotX(mHeaderView.getWidth());//右下角锚点缩放
            mHeaderView.setPivotY(mHeaderView.getHeight());
            mHeaderView.setScaleX(1 - mDragOffset / 2);
            mHeaderView.setScaleY(1 - mDragOffset / 2);
            mDescView.setAlpha(1 - mDragOffset);
            requestLayout();
            Log.e("TAG", "onViewPositionChanged");
        }

        @Override
        public void onViewReleased(View releasedChild, float xvel, float yvel) {
            int top = getPaddingTop();
            if (yvel > 0 || (yvel == 0 && mDragOffset > 0.5f)) {//向下沉底条件:速度向下，或者滚动比例超过一半
                top += mDragRange;//目标位置
            }
            mDragHelper.settleCapturedViewAt(releasedChild.getLeft(), top);//设定滚动目标
            invalidate();//开启惯性滑动
            Log.e("TAG", "onViewReleased");
        }

        @Override
        public int getViewVerticalDragRange(View child) {//使子View的点击事件生效
            return mDragRange;
        }

        @Override
        public int clampViewPositionVertical(View child, int top, int dy) {
            final int topBound = getPaddingTop();
            final int bottomBound = getHeight() - mHeaderView.getHeight() - mHeaderView.getPaddingBottom();

            final int newTop = Math.min(Math.max(top, topBound), bottomBound);
            return newTop;
        }

    }

说明:

1. onViewPositionChanged方法实现在HeaderView滚动过程中View的缩放与透明度变化，mTop参数确定了两个子View的垂直布局位置,更新完需要调用requestLayout重布局;
2. clampViewPositionVertical确定垂直滚动边界, getViewVerticalDragRange是子View可以获取到点击事件
3. onViewReleased根据滚动位置和手势速度来指定HeaderView回滚还是滚动到底部。
   既然是个ViewGroup,避免不了onMeasure和onLayout方法:

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        measureChildren(widthMeasureSpec, heightMeasureSpec);//测量子布局
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        mDragRange = getHeight() - mHeaderView.getHeight();

        mHeaderView.layout(
                0,
                mTop,
                r,
                mTop + mHeaderView.getMeasuredHeight());

        mDescView.layout(
                0,
                mTop + mHeaderView.getMeasuredHeight(),
                r,
                mTop  + b);
    }

onMeasure方法里只加了句measureChildren方法，目的是计算子View的宽高,然后onLayout方法中才能拿到测量后的宽高。
手势处理和惯性滚动:

@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;
    }

   //惯性滚动
    @Override
    public void computeScroll() {
        if(mDragHelper.continueSettling(true)){
            invalidate();
        }
    }

短短代码150多行就可以实现相对复杂的交互，真真是谁用谁知道!代码传送门:GayHub地址