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实现全选、置顶和拖拽功能示例
(0)

相关推荐

  • Android基于ViewDragHelper仿QQ5.0侧滑界面效果

    QQ5.0侧滑效果实现方案有很多方式,今天我们使用ViewDragHelper来实现一下. 先上效果图: ①自定义控件SlidingMenu继承FrameLayout,放在FrameLayout上面的布局一层叠着者一层,通过getChildAt()可以很方便的获取到任意一层,进而控制此布局的变化. public class SlidingMenu extends FrameLayout { private ViewDragHelper mViewDragHelper; private int m

  • Android使用ViewDragHelper实现仿QQ6.0侧滑界面(一)

    QQ是大家离不开的聊天工具,方便既实用,自从qq更新至6.0之后,侧滑由原来的划出后主面板缩小变成了左右平滑,在外观上有了很大的提升,于是我就是尝试理解下里面的各种逻辑,结合相关资料,研究研究. 知道这里面的一个主要类是ViewDragHelper,那么首先我们要先来了解一下这个ViewDragHelper类,正所谓打蛇打七寸,我们就先来看看官方文档怎么介绍的,有什么奇特的功能. 首先继承: java.lang.Object android.support.v4.widget.ViewDragH

  • Android 中通过ViewDragHelper实现ListView的Item的侧拉划出效果

    先来看看,今天要实现的自定义控件效果图: 关于ViewDragHelper的使用,大家可以先看这篇文章ViewDragHelper的使用介绍 实现该自定义控件的大体步骤如下: 1.ViewDragHelper使用的3部曲,初始化ViewDragHelper,传递触摸事件,实现ViewDragHelper.Callback抽象类. 2.需要创建2个直接的子View,分别是前景View和背景View,代表ListView每一项Item的布局的组成,如下所示: 未划出时显示的FrontView: 划出

  • Android利用RecyclerView实现全选、置顶和拖拽功能示例

    前言 今天给大家分享是如何在RecyclerView实现全选,ItemTouchHelper实现侧滑删除,拖拽功能.比较基础.关于RecyclerView的强大,就不多说了.在Android L SDK发布的新API中最有意思的就是RecyclerView 和 CardView了, 按照官方的说法, RecyclerView 一个ListView 的一个更高级更灵活的一个版本, 可以自定义的东西太多了. 效果: RecyclerView实现全选,ItemTouchHelper实现侧滑删除,拖拽功

  • Android自定义可拖拽的悬浮按钮DragFloatingActionButton

    悬浮按钮FloatingActionButton是Android 5.0系统添加的新控件,FloatingActionButton是继承至ImageView,所以FloatingActionButton拥有ImageView的所有属性.本文讲解的是一个实现了可拖拽的悬浮按钮,并为此添加了类似于qq的吸附边框的功能.在此之前,先了解下其简单的使用方式吧: 首先你得添加其依赖 compile 'com.android.support:design:25.3.1' 然后在布局文件中使用. <andro

  • Android使用ViewDragHelper实现QQ6.X最新版本侧滑界面效果实例代码

    (一).前言: 这两天QQ进行了重大更新(6.X)尤其在UI风格上面由之前的蓝色换成了白色居多了,侧滑效果也发生了一些变化,那我们今天来模仿实现一个QQ6.X版本的侧滑界面效果.今天我们还是采用神器ViewDragHelper来实现. 本次实例具体代码已经上传到下面的项目中,欢迎各位去star和fork一下. https://github.com/jiangqqlmj/DragHelper4QQ FastDev4Android框架项目地址:https://github.com/jiangqqlm

  • Android ViewDragHelper实现京东、淘宝拖拽详情功能的实现

    先上效果图,如果大家感觉不错,请参考实例代码,效果图如下所述: 要实现这个效果有三种方式: ① 手势 ② 动画 ③ ViewDragHelper 这里我使用的是ViewDragHelper类. public class ViewDragLayout extends ViewGroup { //垂直方向的滑动速度 private static final int VEL_THRESHOLD = 300; //垂直方向的滑动距离 private static final int DISTANCE_T

  • Android仿京东淘宝自动无限循环轮播控件思路详解

    在App的开发中,很多的时候都需要实现类似京东淘宝一样的自动无限轮播的广告栏,所以就自己写了一个,下面是我自定义控件的思路和过程. 一.自定义控件属性 新建自定义控件SliderLayout继承于RelativeLayout,首先要考虑的就是自定义的控件需要扩展那些属性,把这些属性列出来.在这里是要实现类似于京东淘宝的无限轮播广告栏,那么首先想到的就是轮播的时长.轮播指示器的样式等等.我在这里列举了一些并且结合到了代码中. 1.扩展属性 (1)是否开启自动轮播的功能. (2)指示器的图形样式,一

  • Android中使用TextView实现高仿京东淘宝各种倒计时效果

    今天给大家带来的是仅仅使用一个TextView实现一个高仿京东.淘宝.唯品会等各种电商APP的活动倒计时.最近公司一直加班也没来得及时间去整理,今天难得休息想把这个分享给大家,只求共同学习,以及自己后续的复习.为什么会想到使用一个TextView来实现呢?因为最近公司在做一些优化的工作,其中就有一个倒计时样式,原来开发的这个控件的同事使用了多个TextView拼接在一起的,实现的代码冗余比较大,故此项目经理就说:小宏这个就交给你来优化了,并且还要保证有一定的扩展性,当时就懵逼了.不知道从何处开始

  • Android实现的仿淘宝购物车demo示例

    本文实例讲述了Android实现的仿淘宝购物车.分享给大家供大家参考,具体如下: 夏的热情渐渐退去,秋如期而至,丰收的季节,小编继续着实习之路,走着走着,就走到了购物车,逛过淘宝或者是京东的小伙伴都知道购物车里面的宝贝可不止一件,对于爱购物的姑娘来说,购物车里面的商品恐怕是爆满,添加不进去了,以前逛淘宝的时候,小编没有想过要怎么样实现购物车,就知道在哪儿一个劲儿的逛,但是现在不一样了,小编做为一个开发者,想的就是该如何实现,捣鼓了两天的时间,用listview来实现,已经有模有样了,现在小编就来

  • Android条目拖拽删除功能实例代码

    项目中需求,要做条目条目拖拽删除效果,实际效果和QQ消息删除一样,侧滑有制定和删除. 效果图 第一步效果图 1.0自定义控件 SwipeLayout 继承FrameLayout重写里面三个构造方法,分别调用initView(). 2.0在布局中使用自定义控件 3.0在initView()方法中,创建拖拽辅辅助工具 ViewDragHelper() 该方法需要传入回调 MyCallBack() 4.0,创建MyCallBack()回调,继承ViewDragHelper.Callback 在回调中

  • Android自定义ListView实现仿QQ可拖拽列表功能

    我们大致的思路,其实是这样子的,也是我的设想,我们可以先去实现一个简单的ListView的数据,但是他的Adapter,我们可以用系统封装好的,然后传递进去一个实体类,最后自定义一个listview去操作,所以我们先把准备的工作做好,比如? list_item.xml <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.a

  • Android新特性页面之ViewPager拖拽到最后一页再拖拽打开其他Activity(三种方法)

    android新特性页面,ViewPager拖拽到最后一页再拖拽打开其他Activity.实现的方式有很多,效果比较好的就是到了最后一页再拖拽出现禁止蓝色条时再跳转activity 方式一:拿到ViewPager的边界条EdgeEffectCompat,判断是否到了边界(获取EdgeEffectCompat通过反射,方法来自网络最后边会给出原文) /** * 初始化view */ private void initView(){ pager = (ViewPager) findViewById(

  • Android开发实现绘制淘宝收益图折线效果示例

    本文实例讲述了Android开发实现绘制淘宝收益图折线效果.分享给大家供大家参考,具体如下: 实现的效果我一会贴上,我先说下原理,我们知道要实现在canvas上画线,不就是要搞一个paint嘛,然后首先肯定要设置下paint的属性,那么画文字呢,不就是Textpaint吗,对,就是这么简单,接下来怎么画,折线图主要分为X轴和y轴,x轴表示日期,y表示收益,好,说道这里,大家应该知道怎么去做了,下面直接贴代码 这个方法是,画x,y坐标系的,以及上面的日期和收益了 private void draw

  • Android实现打开手机淘宝并自动识别淘宝口令弹出商品信息功能

    Android开发实现打开手机淘宝,并自动识别淘口令,弹出商品信息,大家都遇到过被莫名其妙拉进一个微信群,然后群主开始发一些商品的链接,我们点击这个链接,会让我们复制一个口令(就像这个¥AzZK0hPyou5¥),当我们复制这个口令打开淘宝会自动弹出这个商品的信息.今天,就来和大家分享一下,这个需求是如何实现的. 1.首先我们需要后台帮助我们对接淘宝的商品接口,因为这个东西(¥AzZK0hPyou5¥)是淘宝提供的,我们要做的只是通过网络请求我们的后台,把这个口令拿到就行,至于后台是如何调用淘宝

  • Android 仿微信发动态九宫格拖拽、删除功能

    1.完美1比1 仿照微信仿微信发动态 九宫格拖拽.删除 暴力拖拽ui有点问题,不影响使用,资源文件自己找个+号 2.微信发动态拖拽bug 当选择完图片,长按图片拖拽过程中按下屏幕home键盘,再次进入这时候就不能点击输入文字,点击输入文字的时候会触发选择相册事件 3.拖拽事件用的basequickadapter implementation 'com.android.support:recyclerview-v7:28.0.0' implementation "com.github.CymCha

随机推荐