Android拖拽、回弹布局

最新推荐文章于 2023-02-23 19:59:24 发布
最新推荐文章于 2023-02-23 19:59:24 发布
阅读量656 收藏
点赞数
文章标签： 移动开发
原文链接：https://juejin.im/post/5cc8118de51d456e853f81c4
版权

这一次拆解的是今日头条的关注页面：点击关注的头像会弹出一个文章列表。在边界拖拽会出现关闭提示。这次同时实现了Android端和IOS端的效果。

先讲解Android端的实现吧，毕竟我是个Android开发仔呀

效果如下图：

Android端

弹出来的页面可以左右切换，每个页面是单独的列表，能上下滑动，所以这里直接用viewPager+recycelrView实现。 当viewPager不能左右滑动的时候，移动整个viewPager，出现文字提示，当滑动距离超过阈值时，文字改变。 当手指松开时，若滑动距离未到达阈值，回弹；否则结束页面。 同样，当recyclerView在顶部不能滑动时，移动recyclerView，出现提示，后续跟viewPager一致故不再赘述。

ReBoundLayout

这里的回弹我自定义了一个回弹布局，下面介绍一下回弹布局的几个重要方法： onInterceptTouchEvent()

@Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        switch (ev.getActionMasked()) {
            case MotionEvent.ACTION_DOWN:
                //记录坐标
                break;
            case MotionEvent.ACTION_MOVE:
                int difX = (int) (ev.getX() - mDownX);
                int difY = (int) (ev.getY() - mDownY);
                if (orientation == LinearLayout.HORIZONTAL) {
                        .....
                    if (水平滑动) {
                        if (!innerView.canScrollHorizontally(-1) && difX > 0) {
                            //右拉到边界
                            return true;
                        }
                        if (!innerView.canScrollHorizontally(1) && difX < 0) {
                            //左拉到边界
                            return true;
                        }
                    }
                } else {
                     ......
                    if (竖直滑动) {
                        if (!innerView.canScrollVertically(-1) && difY > 0) {
                            //下拉到边界
                            return true;
                        }
                        if (!innerView.canScrollVertically(1) && difY < 0) {
                            //上拉到边界
                            return true;
                        }
                    }
                }
                break;
            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_CANCEL:
               ......重置变量
                break;
            default:
                break;
        }
        return super.onInterceptTouchEvent(ev);
    }
复制代码

当控件方向为横向且滑动为水平滑动时，检测innerView能否在该方向上滑动；若不能，则拦截事件，交给自身处理(纵向同理)。 拦截事件后，在**onTouchEvent()**进行处理，实现移动和回弹。

@Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getActionMasked()) {
            case MotionEvent.ACTION_MOVE:
                if (orientation == LinearLayout.HORIZONTAL) {
                    int difX = (int) ((event.getX() - mDownX) / resistance);
                    boolean isRebound = false;
                    if (!innerView.canScrollHorizontally(-1) && difX > 0) {
                        //右拉到边界
                        isRebound = true;
                    } else if (!innerView.canScrollHorizontally(1) && difX < 0) {
                        //左拉到边界
                        isRebound = true;
                    }
                    if (isRebound) {
                        //移动和回调
                        return true;
                    }
                } else {
                    int difY = (int) ((event.getY() - mDownY) / resistance);
                    boolean isRebound = false;
                    if (!innerView.canScrollVertically(-1) && difY > 0) {
                        //下拉到边界
                        isRebound = true;
                    } else if (!innerView.canScrollVertically(1) && difY < 0) {
                        //上拉到边界
                        isRebound = true;
                    }
                    if (isRebound) {
                        //移动和回调
                        return true;
                    }
                }
                break;
            case MotionEvent.ACTION_CANCEL:
            case MotionEvent.ACTION_UP:
                if (orientation == LinearLayout.HORIZONTAL) {
                    int difX = (int) innerView.getTranslationX();
                    if (difX != 0) {
                        if (Math.abs(difX) <= resetDistance || isNeedReset) {
                            innerView.animate().translationX(0).setDuration(mDuration).setInterpolator(mInterpolator);
                        }
                        //回调
                    }
                } else {
                    int difY = (int) innerView.getTranslationY();
                    if (difY != 0) {
                        if (Math.abs(difY) <= resetDistance || isNeedReset) {
                            innerView.animate().translationY(0).setDuration(mDuration).setInterpolator(mInterpolator);
                        }
                        //回调
                    }
                }
                break;
            default:
                break;
        }
        return super.onTouchEvent(event);
    }
复制代码

MOVE事件 利用**setTranslationX()和setTranslationY()**改变innerView的位置，同时将滑动距离和方向通过接口回调到外面。

UP事件 判断滑动距离是否小于阈值，小于则执行回弹动画；同时回调到外面。 以上就是回弹布局的简单实现，主要是对滑动事件进行拦截处理，如果不清楚事件传递机制可以到这里查看。 布局有3个自定义属性

<declare-styleable name="ReBoundLayout">
        <attr name="reBoundOrientation" format="enum">
            <enum name="horizontal" value="0" />
            <enum name="vertical" value="1" />
        </attr>
        <attr name="resistance" format="float" />
        <attr name="reBoundDuration" format="integer" />
</declare-styleable>
复制代码

分别是：回弹方向、阻力系数、回弹时间，剩余属性可以调用**set()**方法修改。

好了，现在回弹实现了，接下来就是将文字提示加上，结束动画加上。这里有一点需要注意的是：demo中使用的是reBoundLayout+viewPager+fragment(reBoundLayout+recyclerView)的结构实现的。而文字是跟viewPager同一层级的，所以需要把fragment的回调回调到activity里(也可以getActivity()获取对应的文字控件)，详见代码。 以下是回调的伪代码：

 @Override
    public void onDistanceChange(int distance, int direction) {
        switch (direction) {
            case DIRECTION_LEFT:
                if (distance > showTipDistance) {
                    //文字改变，移动
                } else {
                    rightTip.setVisibility(View.GONE);
                }
                break;
            case DIRECTION_RIGHT:
                if (distance > showTipDistance) {
                   //文字改变，移动
                } else {
                    leftTip.setVisibility(View.GONE);
                }
                break;
            case DIRECTION_UP:
                break;
            case DIRECTION_DOWN:
                //fragment的回调会走到这里
                if (distance > showTipDistance) {
                    //文字改变，移动
                } else {
                    topTip.setVisibility(View.GONE);
                }
                break;
            default:
                break;
        }
    }

    @Override
    public void onFingerUp(int distance, int direction) {
        switch (direction) {
            case DIRECTION_LEFT:
                if (distance > mResetDistance) {
                    //结束页面
                } else {
                    //文字重置
                }
                break;
            case DIRECTION_RIGHT:
                if (distance > mResetDistance) {
                   //结束页面
                } else {
                    //文字重置
                }
                break;
            case DIRECTION_DOWN:
                if (distance > mResetDistance) {
                  //结束页面
                } else {
                    //文字重置
                }
                break;
            default:
                break;
        }
    }
复制代码

大功告成，Android端的效果比较简单，实现起来也比较容易。

IOS端效果复杂一丢丢，大家留心看。

效果如下：

当页面不能拖动时(右滑、左滑、下滑)，view的位置开始改变，并且整个页面会缩小成一个圆；当松手时距离大于阈值，view缩小为一个圆并平移到进入的那个圆位置，结束当前页面；否则回弹(demo中只给出一个圆，若需实现头条的效果，只需更改对应Point点得坐标即可)。 同样，自定义一个布局进行滑动事件的处理，至于整个页面的缩小变圆，这里通过裁剪画布的方式去实现(圆心固定在屏幕中央)，也可以通过别的方法(Xfermode)去实现同样的效果，有兴趣的朋友自行探索。

PS:如果想圆心跟随手指移动，需要增加以下计算：圆最大半径、圆可移动距离与半径变化关系

DragZoomLayout

关键变量：

  • mMinRadius 圆最小半径
  • mMaxRadius 圆最大半径
  • mRadius 当前半径
  • mTranslationX 当前X移动距离
  • mTranslationY 当前Y移动距离

事件拦截跟ReBoundLayout一致，所以不赘述，主要看看滑动事件的处理

 @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getActionMasked()) {
            case MotionEvent.ACTION_MOVE:
                int difX = (int) ((event.getX() - mDownX) / resistance);
                int difY = (int) ((event.getY() - mDownY) / resistance);
                if (orientation == LinearLayout.HORIZONTAL) {
                    boolean needDrag = false;
                    if (!innerView.canScrollHorizontally(-1) && difX > 0) {
                        //右啦到边界
                        needDrag = true;
                    } else if (!innerView.canScrollHorizontally(1) && difX < 0) {
                        //左拉到边界
                        needDrag = true;
                    }
                    if (needDrag) {
                        //半径计算
                        mTranslationX = difX;
                        mTranslationY = difY;
                        invalidate();
                        //回调
                        return true;
                    }
                } else {
                    if (!innerView.canScrollVertically(-1) && difY > 0) {
                        //下拉到边界
                        //回调
                        return true;
                    } else if (!innerView.canScrollVertically(1) && difY < 0) {
                        //上啦到边界
                        innerView.setTranslationY(difY);
                        return true;
                    }
                }
                break;
            case MotionEvent.ACTION_CANCEL:
            case MotionEvent.ACTION_UP:
                if (orientation == LinearLayout.HORIZONTAL) {
                    //水平
                    if (Math.abs(mTranslationX) >= resetDistance) {
                        //回调
                    } else {
                        //重置状态
                    }
                } else {
                    //竖直
                    if (innerView.getTranslationY() < 0) {
                        innerView.animate().setDuration(mDuration).translationY(0).setInterpolator(mInterpolator);
                    } else {
                        //回调
                    }
                }
                break;
            default:
                break;
        }
        return super.onTouchEvent(event);
    }
复制代码

这里跟ReBoundLayout有以下几点区别：

  • 通过裁剪画布的方式达到view缩小成圆的效果
  • 通过移动画布达到移动view的效果(setTranslation会触发view的重绘，同时改变x跟y，会调用2次，而修改画布大小又需要重绘，调用次数太多，因此不使用该方式)
  • 下滑跟左右滑动一样，缩小、移动的都是最外层的DragZoomLayout(这样视觉效果最好，而且能统一处理)；上滑只做移动和回弹。

PS:DragZoomLayout一定要设置背景，不然调用invalidate()会无效；上下滑动的mTranslationX、mTranslationY一直都是0(因为下滑我们已经回调给最层的DragZoomLayout)，所以在ACTION_UP、ACTION_CANCEL事件，竖直方向回调时是使用当前事件的x、y跟点击的x、y相减的值去回调。

布局绘制
 @Override
    protected void onDraw(Canvas canvas) {
        if (Math.abs(mTranslationX) > mLargeX) {
            mTranslationX = mTranslationX > 0 ? mLargeX : -mLargeX;
        }
        if (Math.abs(mTranslationY) > mLargeY) {
            mTranslationY = mTranslationY > 0 ? mLargeY : -mLargeY;
        }
        canvas.translate(mTranslationX, mTranslationY);
        mPath.reset();
        mPath.addCircle(mPoint.x, mPoint.y, mRadius, Path.Direction.CCW);
        canvas.clipPath(mPath);
        super.onDraw(canvas);
    }
复制代码

进行了一些位置和半径的限制。 布局完成，接下来处理页面间的接口回调及结束动画

动画的计算有一点点麻烦，数学不好的同学请多看几遍，还是不懂的趁着过年回高中找数学老师要回学费吧。

先来看没有移动画布的情况：
启动页面时，通过**getLocationOnScreen()**获取进入时的坐标，退出时的坐标通过最外层的dragLayout的坐标加上宽高的一半，再减去圆的最小半径得到，最后通过这2个差值进行平移。 那么有平移并且半径未到最小的情况也可以通过这种方式计算：
我们已经有一个translationX了，那可以计算出目标的translationX，然后使用ValueAnimator不断去改变它进行重绘，得到一个平移效果(translationY同理)。那这个值要怎么得到呢？上面已经说了怎么计算了，没看懂的再看一遍。看几遍还是不懂的，回去找老师要学费吧。
至于进入动画原理相同，只是反过来执行罢了，这里不再赘述，详见代码。 有更好实现方式的欢迎下方留言讨论，有bug或者疑问的也可以留言，有空会回复的。 由于篇幅关系，一些细小的地方没有提及，有兴趣的朋友可以自行查看。 最后奉上 源码;

这是年前最后一篇博客了，今年立的flag好像都没有实现，跟大佬的差距还是那么大，Bug仔仍需努力呀。

weixin_34090643
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
SmartRefreshLayout：:fire:拖动刷新，上拉加载，二级刷新，淘宝二楼，RefreshLayout，OverScroll，Android智能翻转刷新框架，支持越界回弹，越界超越，具有极强的扩展性，集成了几十种炫耀酷的Header和Footer
02-02
正所谓，SmartRefreshLayout是一个“聪明”或“智能”的拖动刷新布局，由于它的“智能”，它不只是支持所有视图，还支持多层层叠的视图结构。它继承自ViewGroup而不是FrameLayout或LinearLayout，提高了性能。也吸取...
android布局放大缩小,Android-使用展开/捏放大/缩小RelativeLayout
weixin_36313344的博客
05-26 1051
创建名为Zoomlayout的类，该类扩展了您要缩放的任何布局(在我的情况下是“相对布局”)。public class ZoomLayout extends RelativeLayout implements ScaleGestureDetector.OnScaleGestureListener {private enum Mode {NONE,DRAG,ZOOM}private static f...
android rebound平移,Android 仿 IOS 拖拽回弹之进阶 ReboundFrameLayout
weixin_42300167的博客
06-04 261
Android 仿 IOS 拖拽回弹之进阶 ReboundFrameLayout前言IOS 拖拽回弹给用户的体验不得不赞然后 Android 原生的 API 各种不支持, 于是乎出现的很多仿 IOS 拖拽回弹的 Android 控件 ReboundScrollView, 比起原生的 ScrollView, 体验上好了很多, 但是还是不尽人意: RebounScrollView 里的内容超出屏幕时,...
【Android】canScrollVertically和canScrollHorizontally
珍心
10-11 5527
学而不思则罔，思而不学则殆 【Android】canScrollVertically和canScrollHorizontally简介总结测试测试canScrollVertically测试canScrollHorizontally 简介 canScrollVertically和canScrollHorizontally是原生View中的方法提供，用来判断View能否在某个方向上滑动。 总结 测试 返回值ture 返回值false canScrollVertically(1) 能够向上滑动 不
最优雅的方式实现RecyclerView 滚动回弹及下拉刷新效果
qq_35959231的博客
10-22 3415
SatisOverScroll 前言： Android与IOS开发存在的一大差距就是惯性滚动回弹效果，效果确实比较“人性”生动，这也是众多Android开发人员争相效仿的原因，当然我也不例外。 作为一名五年经的猿早已不满足与市面上的各种开源框架，理由有： 无一例外需要更多的配置去完成惯性回弹效果 通过嵌套一个具有OverScroll 事件处理机制的Layout 通过自定RecyclerView 等对原“ScrollView”进行事件拦截、滚动动画添加等 需要此效果的地方需要修改layout布局层级
Android RecyclerView 上下/左右 禁止滑动
热门推荐
afufufufu的博客
07-09 1万+
禁止滑动:禁止竖向滑动 和 禁止横向滑动 //禁止滑动 布局管理器 LinearLayoutManager linearLayoutManager=new LinearLayoutManager(this){ //禁止竖向滑动 RecyclerView 为垂直状态（VERTICAL） @Override public boolean canScrollVertically() { .
最接近原生APP体验的高性能前端框架（电商）
03-26
原生UI 鉴于之前的很多前端框架（特别是响应式布局的框架），UI控件看起来太像网页，没有原生感觉，因此追求原生UI感觉也是我们的重要目标 MUI以iOS平台UI为基础，补充部分Android平台特有的UI控件 流畅体验 下拉...
SmartRefreshLayout::fire:下拉刷新、上拉加载、二级刷新、淘宝二楼、RefreshLayout、OverScroll，Android智能下拉刷新框架，支持越界回弹、越界拖动，具有极强的扩展性，集成了几十种炫酷的Header和 Foot
05-09
Android智能下拉刷新框架-SmartRefreshLayout | 中文 正如名字所说，SmartRefreshLayout是一个“聪明”或者“智能”的下拉刷新布局，由于它的“智能”，它不只是支持所有的View，还支持多层嵌套的视图结构。它继承...
基于SpringBoot+bootstrap的电商网站
01-16
为实现下拉刷新功能，大多H5框架都是通过DIV模拟下拉回弹动画，在低端android手机上， DIV动画经常出现卡顿现象（特别是图文列表的情况）； mui通过双webview解决这个DIV的拖动流畅度问题；拖动时，拖动的不是div，...
计算机毕业设计电商系统
04-12
2、原生UI 鉴于之前的很多前端框架（特别是响应式布局的框架），UI控件看起来太像网页，没有原生感觉，因此追求原生UI感觉也是我们的重要目标 MUI以iOS平台UI为基础，补充部分Android平台特有的UI控件。 3、流畅体验...
Android 图片双指缩放 单指拖拽 、拖到边界回弹
04-11
Android 图片双指缩放 单指拖拽 单指移动图片到边界回弹
随手指拖动的view
04-18
自定义view，这里我是继承ImageView写的，可根据自己的需求更改。自定义View中，获取了屏幕的宽高避免滑出边界，并解决滑动时会触发点击事件的冲突。
Android自定义ViewPager禁止横向滑动
a day a better
02-23 888
自定义ViewPager，复写 canScrollHorizontally 方法，禁止横向滑动。
Android 仿IOS拖动页面越界回弹效果，使用SmartRefreshLayout
杨迪龙的博客
03-23 3783
Android 仿IOS拖动页面越界回弹效果，使用SmartRefreshLayout前言效果图流程添加控件依赖初始化样式在布局中使用最后感谢 前言 如果一家公司要同时开发IOS端客户端和Android端客户端。那么设计那边肯定根据IOS的来做原型。就算不是，测试大爷测试的时候也会告诉你。两边效果不一样，你改一下… 不过，不可否认IOS端的动画效果真的好看。。。 最常见需要和iOS端统一的，不然...
android 拖拽布局,Android拖拽、回弹布局
weixin_29254029的博客
05-26 1005
这一次拆解的是今日头条的关注页面：点击关注的头像会弹出一个文章列表。在边界拖拽会出现关闭提示。这次同时实现了Android端和IOS端的效果。先讲解Android端的实现吧，毕竟我是个Android开发仔呀效果如下图：Android端弹出来的页面可以左右切换，每个页面是单独的列表，能上下滑动，所以这里直接用viewPager+recycelrView实现。当viewPager不能左右滑动的时候，移...
Android 布局回弹
yunzhonghe5786的专栏
05-12 864
布局回弹 本文摘自 https://blog.csdn.net/tyk0910/article/details/53414299 一.布局的下拉回弹实现 下拉回弹的实现本质其实就是View的滑动，目前Android中实现View的滑动可以分为三种方式：通过改变View的布局参数使得View重新布局从而实现滑动；通过scrollTo/scrollBy方法来实现View的滑动；通过动画给Vie...
Android View滚动、拉伸到顶/底部弹性回弹复位
Zhang Phil
08-07 9086
 《Android View滚动、拉伸到顶/底部弹性回弹复位》 我在上一篇文章介绍了如何实现一个Android ListView拉到顶/底部后，像橡皮筋一样弹性回弹复位（《Android ListView拉到顶/底部，像橡皮筋一样弹性回弹复位》，文章链接地址： http://blog.csdn.net/zhangphil/article/details/47311155 ）。事实上，
android 布局回弹,Android界面上拉下拉的回弹效果实例代码
weixin_39845613的博客
05-26 167
public class MyScrollView extends ScrollView {private View childView;public MyScrollView(Context context) {super(context);}public MyScrollView(Context context, AttributeSet attrs) {super(context, attr...
Android|使用BottomSheetDialog和RecyclerView实现底部弹出评论区功能
纸鱼PaperFish的博客
11-14 1932
Android中使用BottomSheetDialog和RecyclerView实现底部弹出评论区功能
android布局拖拽
最新发布
11-27
Android布局拖拽是指在Android开发中，通过拖动组件来调整组件在布局中的位置和大小。它是Android开发工具中的一个非常方便的功能，使得设计师和开发者可以轻松地进行布局设计和调整。 在Android布局拖拽中，我们...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值