Android仿今日头条图片滑动退出效果

最新推荐文章于 2021-05-30 23:24:16 发布

原创

最新推荐文章于 2021-05-30 23:24:16 发布 · 置顶 · 3.7k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#android #切换效果 #仿头条 #图片滑动退出

本文介绍一种仿今日头条图片滑动退出效果的实现方法，通过优化图片缩放、透明度变换及滑动动画，增强用户体验。核心在于Android事件分发机制的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

资源下载（2C币）

逛优快云的时候，看到几篇写仿今日头条图片滑动退出效果的文章，闲着无聊便想着也给自己项目加上，实现的思路有很多种，本着就近原则选了一篇与自己思路相近的文章结合自己的实践总结一下。

下载原文的Demo用了一下，发现了几点可以优化的地方：

1、图片缩放上不太好使，放大缩小的同时就给你滑出去了

2、没有暴露接口给用户实现更多的透明度变换效果，比如我不仅想要背景透明度在手指移动的时候发生变化，还有文字或者其他内容也跟着发生透明度变化

3、去掉了一些多余代码

实现效果

在上滑或者下滑时，随着手指的移动，图片区域跟随移动，并且activity的背景和页码逐渐变的透明
上下滑动距离不超过设定的临界值时，会有回弹效果。
上下滑动超过设置的临界值时，放开手指，页面滑动退出消失
图片可以正常放大缩小，页面不跟随手指上下滑动
页面切换淡入淡出效果

实现原理

实现思路有很多种，这种实现思路对我当前项目改动最小，只是在原来的页面上嵌套了一个中间层，在这个中间层上做手脚，根据Android的事件分发机制，在中间层判断当前手指的移动距离和方向选择是否拦截事件交由自己处理，实现上下滑动退出的效果，并且不影响图片正常的放大缩小和切换。

中间层容器实现过程

重写onInterceptTouchEvent()

这个方法是本次效果实现的核心，用于处理不同的手势操作，处理的好则各种手势不发生冲突。这里返回ture意味着判断当前操作为要退出页面，需要将事件拦截交由自己处理，开始跟随手指的移动发生滑动动画。返回false则不对事件进行拦截，交由下面控件处理，比如切换图片、放大缩小。

上面提到的原Demo中对于图片放大缩小的同时页面发送滑动退出的情况，在这里我加了一个多点触控的判断，当触摸屏幕的点大于一个时认为是对图片进行放缩或者切换，所以直接返回false。当触摸点只有一个时，判断手指在X、Y轴移动的距离更多的是上下滑动还是左右滑动，认定上下滑动时拦截事件进入自己的onTouchEvent()处理动画，左右滑动则不拦截，交由viewPager进行图片切换。

@Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        //判断几指操作，大于1时认为在对图片进行放大缩小操作，不拦截事件
        //交由下面控件处理
        if (ev.getPointerCount() > 1) {
            return false;
        } else {
            final int y = (int) ev.getRawY();
            final int x = (int) ev.getRawX();
            switch (ev.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    previousX = x;
                    previousY = y;
                    break;