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就可以了。

以上所述是小编给大家介绍的Android ViewDragHelper实现京东、淘宝拖拽详情功能的实现，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的!

您可能感兴趣的文章:

• Android 中通过ViewDragHelper实现ListView的Item的侧拉划出效果
• Android基于ViewDragHelper仿QQ5.0侧滑界面效果
• Android使用ViewDragHelper实现仿QQ6.0侧滑界面(一)
• Android使用ViewDragHelper实现QQ6.X最新版本侧滑界面效果实例代码
• Android自定义可拖拽的悬浮按钮DragFloatingActionButton
• Android利用RecyclerView实现全选、置顶和拖拽功能示例