Android - ViewDragHelper实现京东、淘宝拖拽详情

前言

这个内容是很早就好的,不知道后来怎么忘记发出来了,这不过年这几天没事给翻出来,就给放出来了。

好了,老规矩先上效果图。

要实现这个效果有三种方式: ① 手势 ② 动画 ③ ViewDragHelper 这里我使用的是ViewDragHelper类.

public class ViewDragLayout extends ViewGroup {
    //垂直方向的滑动速度
    private static final int VEL_THRESHOLD = 300;
    //垂直方向的滑动距离
    private static final int DISTANCE_THRESHOLD = 300;
    //上面可见的View
    private View mTopView;
    //下面详情View
    private View mBottomView;
    //ViewDragHelper实例
    private ViewDragHelper mViewDragHelper;
    private GestureDetectorCompat mGestureDetectorCompat;
    private int mFirstHeight;

    public ViewDragLayout(Context context) {
        super(context);
        init();
    }

    public ViewDragLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public ViewDragLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    public ViewDragLayout(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        init();
    }

    private void init() {
        mViewDragHelper = ViewDragHelper.create(this, 1.0f, new DragHelperCallback());
        mGestureDetectorCompat = new GestureDetectorCompat(getContext(), new YScrollDetector());
    }

    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        mTopView = getChildAt(0);
        mBottomView = getChildAt(1); 
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {

        if (mTopView.getTop() == 0) {
            mTopView.layout(l, 0, r, b-t );
            mBottomView.layout(l, 0, r, b-t );
            mFirstHeight = mTopView.getMeasuredHeight();
            mBottomView.offsetTopAndBottom(mFirstHeight);
        }else{     
            mTopView.layout(l, mTopView.getTop(), r, mTopView.getBottom());
            mBottomView.layout(l, mBottomView.getTop(), r, mBottomView.getBottom());
        }
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        measureChildren(widthMeasureSpec,heightMeasureSpec);
        int maxWidth = MeasureSpec.getSize(widthMeasureSpec);
        int maxHeight = MeasureSpec.getSize(heightMeasureSpec);
        setMeasuredDimension(resolveSizeAndState(maxWidth, widthMeasureSpec, 0),
                resolveSizeAndState(maxHeight, heightMeasureSpec, 0));
    }

    private class DragHelperCallback extends ViewDragHelper.Callback {

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

        /**
         * @param child
         * @param top
         * @param dy
         * @return
         */
        @Override
        public int clampViewPositionVertical(View child, int top, int dy) {
            
            int finalTop=top;
            if (child == mTopView) {
                if (top > 0) {
                    finalTop=0;
                }
            }else if(child==mBottomView){             
                if(top<0){
                    finalTop=0;
                }
            }
            return finalTop;
        }

        @Override
        public void onViewPositionChanged(View changedView, int left, int top, int dx, int dy) {

            if (changedView == mTopView) {
                mBottomView.offsetTopAndBottom(dy);
            }else if (changedView==mBottomView){
                mTopView.offsetTopAndBottom(dy);
            }
            ViewCompat.postInvalidateOnAnimation(ViewDragLayout.this);
        }

        /**
         *
         * @param releasedChild
         * @param xvel 水平方向的速度(向右为正)
         * @param yvel 竖直方向的速度(向下为正)
         */
        @Override
        public void onViewReleased(View releasedChild, float xvel, float yvel) {
            animTopOrBottom(releasedChild, yvel);
        }

    }
    //动画实现滚动
    private void animTopOrBottom(View releasedChild, float yvel) {
        int finalTop=0;
        if (releasedChild == mTopView) {
            if (yvel < -VEL_THRESHOLD || (releasedChild.getTop() < -DISTANCE_THRESHOLD)) {
                finalTop=-mFirstHeight;
            }
        } else if (releasedChild == mBottomView) {
            if (yvel > VEL_THRESHOLD || (releasedChild.getTop() > DISTANCE_THRESHOLD)) {
                finalTop=mFirstHeight;
            }
        }

        if (mViewDragHelper.smoothSlideViewTo(releasedChild, 0, finalTop)) {
            ViewCompat.postInvalidateOnAnimation(this);
        }
    }



    @Override
    public void computeScroll() {
        if (mViewDragHelper.continueSettling(true)) {
            ViewCompat.postInvalidateOnAnimation(this);
        }
    }
   //是否拦截手势操作
    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {

        if (mTopView.getTop() < 0 && mTopView.getBottom() > 0) {
            return false;
        }

        boolean isCanTouch = mGestureDetectorCompat.onTouchEvent(ev);
        boolean shouldIntercept = mViewDragHelper.shouldInterceptTouchEvent(ev);

        if (ev.getActionMasked() == MotionEvent.ACTION_DOWN) {
            mViewDragHelper.processTouchEvent(ev);
        }
        return isCanTouch&&shouldIntercept;
    }
    //将touch事件交给ViewDragHelper处理
    @Override
    public boolean onTouchEvent(MotionEvent event) {
         mViewDragHelper.processTouchEvent(event);
        return true;
    }
    //垂直方向上才滚动
    private class YScrollDetector extends GestureDetector.SimpleOnGestureListener {
        @Override
        public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
            return Math.abs(distanceY) > Math.abs(distanceX);
        }
    }
}

使用ViewDragLayout

<gesture.com.cn.widget.ViewDragLayout
        android:id="@+id/view_drag_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >

        <FrameLayout
            android:id="@+id/top_fragment_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            />

        <FrameLayout
            android:id="@+id/bottom_fragment_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

</gesture.com.cn.widget.ViewDragLayout>

bottom_fragment_view中使用了ScrollView,但是原生是不行的,所以这里我又将ScrollView重写了一下

这里主要是处理dispatchTouchEvent(MotionEvent ev)方法,判断将touch事件交给自己处理还是交给父View处理

public class CustomScrollView extends ScrollView { 
    //滚动临界值
    private int mTouchSlop;
    //获取初始X坐标
    private float mRawX;
    //获取初始Y坐标
    private float mRawY;
    //是否向上滑动
    private boolean mCanScrollUp;
    //是否向下滑动
    private boolean mCanScrollDown;

    public CustomScrollView(Context context) {
        super(context);
        init();
    }

    public CustomScrollView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public CustomScrollView(Context context, @Nullable AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }

    private void init() {
        ViewConfiguration configuration = ViewConfiguration.get(getContext());
        mTouchSlop = configuration.getScaledTouchSlop();
    }

    @Override
    public boolean dispatchTouchEvent(MotionEvent ev) {
        switch (ev.getActionMasked()) {
            case MotionEvent.ACTION_DOWN:
                mRawX = ev.getRawX();
                mRawY = ev.getRawY();
                mCanScrollUp = canScrollingUp();
                mCanScrollDown = canScrollingDown();
                //表示子View要自己消费这次事件,告诉父View不拦截这次的事件。
                getParent().requestDisallowInterceptTouchEvent(true);
                break;
            case MotionEvent.ACTION_MOVE:
                float xDis = Math.abs(mRawX - ev.getRawX());
                float yDis = Math.abs(mRawY - ev.getRawY());

                if (yDis > xDis && yDis > mTouchSlop) {
                     
                    if (mRawY < ev.getRawY() && mCanScrollUp) {
                        //表示子View不消费这次事件,告诉父View拦截这次的事件。
                        getParent().requestDisallowInterceptTouchEvent(false);
                        return false;
                    }

                    if (mRawY > ev.getRawY() && mCanScrollDown) {
                        //表示子View不消费这次事件,告诉父View拦截这次的事件。
                        getParent().requestDisallowInterceptTouchEvent(false);
                        return false;
                    }
                }

                break;
        }

        return super.dispatchTouchEvent(ev);
    }

    /**
     * 手指向下滑动(内容向上滑动)
     * @return
     */
    private boolean canScrollingUp() {

        if (ViewCompat.canScrollVertically(this, -1)) {
            return false;
        } else {
            return true;
        }
    }

    /**
     * 手指向上滑动(内容向下滑动)
     * @return
     */
    private boolean canScrollingDown() {

        if (ViewCompat.canScrollVertically(this, 1)) {
            return false;
        } else {
            return true;
        }
    }
}

好了,具体拖拽代码就是这些了,界面我用的两个Fragment,相信大家也看出来了。里面大家换成自己的业务UI就可以了。

顺便祝大家

新年快乐!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android小菜鸡

巧妙运用补间动画,自定义广告轮播CarouselView 2.0

  这是前一篇文章绘制的CarouselView的升级版,有兴趣的同学,可以去关注一下笔者前一篇文章。自定义广告图片轮播View——CarouselView

1252
来自专栏开发之途

Android 仿360悬浮球与加速球

5348
来自专栏开发之途

Android 仿微信底部渐变Tab

2143
来自专栏Jack的Android之旅

模仿企鹅FM播放主页面滑动动态改变各视图的大小

国庆的一个任务就是把自己之前写的代码搬到博客。这次给各位带来的是通过滑动来动态改变各个View的大小进而达到企鹅FM播放页面的滑动效果(仅仅是滑动效果),老规矩...

1042
来自专栏项勇

笔记25 | 通过自定义VIEW实现一个圆盘转动UI

2067
来自专栏移动开发

SwipeCardView有点类似于stackview的控件

业余时间写了一个类似stackview的控件,可以循环抽取.还不是很完善,算是给有需要的朋友提供个基本思路吧.有更好的建议请告知.

1382
来自专栏Android开发指南

5.触摸事件、侧滑菜单

3066
来自专栏肖蕾的博客

使用这个,自定义AlertDialog在你手里都不是问题

2107
来自专栏Android点滴积累

获取View的截图-将View转换为Bitmap对象

开发中,有时候需要获取View的截图来做动画来达到动画流程的目的 原理:将View的内容画到一个Bitmap画布上,然后取出 下面封装了一个从View生成Bit...

2099
来自专栏Android相关

Android遇到的一些小问题

UE希望调整文本行间距,原来只记得有lineSpacing的属性,而且只能调整行间距的倍数。

882

扫码关注云+社区

领取腾讯云代金券