正文

这交互炸了：爱范儿是如何让详情页缩小为横向列表的

三精-大精wing  三精-大精wing  2022-08-17  696

关键词：

写在前面：
写这段话的时候，已经是夜里3点了。别问我为什么这么拼，一切为了与你分享干货!!!! 不要太感动，擦擦眼泪继续往下看。

本开源库链接 ExpandableViewpager

一直想写《交互炸了》第二篇，但是好像没什么好的交互。就在昨晚11点，小马同学提出 爱范儿 里面的交互挺炸的。我一下，果然很赞。于是连夜写代码，封装成库，再撸文章。只为在周一早7:00能献给爱技术的你。。

《交互炸了》或许是一系列高端特效教程，文中会介绍一些比较炫酷的特效以及实现的思路。特效实现本身也许不会有太大的难度。难点在于实现的思路。一旦思路被打开，特效将很简单实现。先来看看今天要实现的效果：

技术分享

乍一看，哇塞很炫酷。到底怎么实现的，根本没有思路。。其实很简单，当然为了方便，我已经把他封装成一个库。链接如下：https://github.com/githubwing/ExpandableViewpager

先来看看库如何使用:

在gradle添加依赖，

allprojects {
        repositories {
            ...
            maven { url ‘https://jitpack.io‘ }
        }
    }

    dependencies {
            compile ‘com.github.githubwing:ExpandableViewpager:1.0.0‘
    }

其次将ExpandableViewpager添加到布局。

ExpandViewPager提供了Viewpager常用方法以外。还有几个额外的方法：

//设置背景布局
 mViewpager.setBackgroundView(int resId);

//设置展开关闭监听器
mViewpager.setOnStateChangedListener(OnStateChangedListener listener);

//展开以及缩小
mViewpager.expand();
mViewpager.collaps();

只需要在代码中进行这几样设置就可以实现如图效果了！怎么样！很方便吧~

如何实现

个人感觉特效跟变魔术差不多。反正都是障眼法，只要摸清了套路，想要实现或者改进也都不是什么难事了。这里把我自己摸索的套路告诉大家。

首先，在交互炸了第一篇，有朋友说共享元素可以实现，并且贴给我了几个项目。我在这里想说一下，共享元素是不可以的。因为共享元素不能全程触摸完成由状态一到状态二的转变。

再说说第二篇里的效果，其实跟第一篇很像，只不过是没了手势处理。那他是怎么实现的呢？嘿嘿，原理特别简单，我都不好意思写了。。这就好比魔术，没揭穿前高深莫测，揭穿之后就好像智商被侮辱。。其实只要摸清套路，这些都不难。废话不说了直接看怎么实现的：

整体界面其实是一个background view + 一个Viewpager。这个Viewpager 展开就是正常情况。如果变小，其实就是把Viewpager缩放了~~ 只要clipChildren一下，再Scale一下就可以了。。就是这么简单。。我都不好意思写了。。。核心的代码如下：

   collapsVa.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {

                float percent = (Float) valueAnimator.getAnimatedValue();
                mViewpager.setScaleX(percent);
                mViewpager.setScaleY(percent);
                mViewpager.setY((1 - percent) / 2 * mViewpager.getHeight());
            }
        });

改变一下scale 然后改变一下Y的高度。。没了。。

如果你觉得还不错，请star一下，这是对我的最好鼓励~~

https://github.com/githubwing/ExpandableViewpager

欢迎加入我的Android讨论群：425983695

这交互炸了:一分钟让你拥有微信拖拽透明返回photoview(代码片段)

...微信公众号：鸿洋（hongyangAndroid）原创首发《交互炸了》或许是一系列高端特效教程，文中会介绍一些比较炫酷的特效,以及实现的思路。特效实现本身也许不会有太大的难度。难点在于实现的思路。一旦思路被打... 查看详情

如何在 SwiftUI 中从一个详情页跳转到另一个详情页并返回列表页？

】如何在SwiftUI中从一个详情页跳转到另一个详情页并返回列表页？【英文标题】：HowtojumpfromonedetailpagetoanotherandreturntothelistpageinSwiftUI?【发布时间】：2021-02-0815:04:53【问题描述】：当我使用“下一篇文章”按钮跳转到索引为3的文... 查看详情

如何让一个视图支持纵向和横向

】如何让一个视图支持纵向和横向【英文标题】：Howtohaveoneviewsupportportraitandlandscape【发布时间】：2011-07-2914:58:16【问题描述】：我的应用中有一个视图，上面有很多文字。重要的是，这篇文章要保持在“一行”中。问题是有时... 查看详情

在线预约小程序搭建教程8-教师详情页

...要解决几个问题：教师的主键怎么传入详情页详情页如何接收页面传过来的参数如何根据主键过滤数据如何将教师的信息显示到页面上页面传参首先需要解决页面传参的问题，一般从列表页跳转到详情页，需要定义跳... 查看详情

这交互炸了:闪屏页是像云一样消失的

《交互炸了》或许是一系列高端特效教程，文中会介绍一些比较炫酷的特效,以及实现的思路。特效实现本身也许不会有太大的难度。难点在于实现的思路。一旦思路被打开，特效将很简单实现。效果项目地址:https://github.com/github... 查看详情

如何修复 iPhone 横向放大/缩小图像的大小？ [关闭]

】如何修复iPhone横向放大/缩小图像的大小？[关闭]【英文标题】：howtofixthesizeofthezoomin/outimageiniphonelandscape?[closed]【发布时间】：2011-08-1806:10:23【问题描述】：请为我提供如何使用给定的图像修复下一页上图像的大小输入/输出的... 查看详情

这交互炸了:闪屏页是像云一样消失的(代码片段)

《交互炸了》或许是一系列高端特效教程，文中会介绍一些比较炫酷的特效,以及实现的思路。特效实现本身也许不会有太大的难度。难点在于实现的思路。一旦思路被打开，特效将很简单实现。效果项目地址:https://github.... 查看详情

swiftui之深入解析如何创建列表展示页和导航跳转详情页(代码片段)

...视图的创建，请参考我的博客：SwiftUI之深入解析如何创建和组合视图。本文将分析如何创建一个可以展示任何地标信息的视图，并动态生成一个可滚动列表，用户可以点击列表项去查看地标的详细信息；优化... 查看详情

vue缓存组件或页面实用技巧-keepalive销毁

假设在一个列表中，用户滑动几页点击了详情，此时若再回到列表页，页面状态都已经刷新，用户又需要再进行滑动，这显然是不合理的。在PC端我们有很多天然优势可以处理这类问题，比如使用分页器让列表不要过长，比如打... 查看详情

如何让div模块随着页面固定和不固定随意切换(代码片段)

最近做公司官网，左边文章列表，右边文章详情，要求左边文章列表随着页面向上滚动到某个位置时，固定在页面顶部，当滚动到footer出现时，div模块随页面滚动而不再固定在顶部。思路：1，给外层的div设置position:relative;2，判... 查看详情

elementui源码解析--pagination篇(副：列表页进入详情页再返回后，如何保持当前页码正确)

之所以看Pagination源码，由于一个问题：需求：从列表页进入详情页后再返回，需求方希望保持在当前的页码而不是重新定位到第一页问题：按照elementui文档设置current-page后请求的数据正常，但pagination的页码显示却不正确，不管c... 查看详情

如何将 MPDF 生成的第一页设置为横向

】如何将MPDF生成的第一页设置为横向【英文标题】：HowtosetfirstpagegeneratedbyMPDFaslandscape【发布时间】：2019-10-1019:59:51【问题描述】：假设你知道如何在PHP中使用MPDF库，下面是我实例化类对象的代码：....$marginFooter=10;$orientation=\'lan... 查看详情

如何使用 iTextSharp 为横向生成的页面添加页脚到 PDF 文档

】如何使用iTextSharp为横向生成的页面添加页脚到PDF文档【英文标题】：howtoaddpagefootertoPDFdocumentusingiTextSharpforpagesgeneratedinlandscape【发布时间】：2017-07-2116:40:35【问题描述】：在我的ASP.netMVC应用程序中，我使用iTextSharp和XSLT作为模... 查看详情

[django]详情页列表页(代码片段)

详情页列表页列表页展示titile--这个模型的部分字段详情页展示这个模型的所有字段我想看下related_name这个从主表取子表数据取数据--官网投票例子https://docs.djangoproject.com/en/2.1/intro/tutorial02/polls/models.pyfromdjango.dbimportmodelsclassQuestio... 查看详情

poi组件怎样使生成的word文档横向排版

...根本就是没有规律，横向与纵向的页面掺杂在一起。那么如何才能让一个Word文档中同时存在横向和纵向两种方向的页面呢？能不能随心所欲地调整页面方向呢？细心的读者可能会发现，当选择菜单命令“文件”|“页面设置”，... 查看详情

放大和缩小 d3 地图时如何查询数据集？

...时间】：2016-06-1809:39:00【问题描述】：如何为d3地图添加交互性？我想添加功能以在您放大和缩小d3地图时查询我的数据集。是否有回调或其他东西可以让我做到这一点？2.1我还希望缩放后显示的新数据的过渡相当无缝。【问题... 查看详情

爬虫代码实现五：解析所有分页url并优化解析实现类

...页，而点击进入某个电视剧，则称为电视剧详情页。那么如何获取所有分页以及对应的详情页呢，通过下面的分页得到。因此，首先，我们将StartDSJCount中的url从详情页改为列表页，由于这里我们想获取列表页对应的所... 查看详情

mui+hbuilder之列表页到详情页面（四）

参考技术A常见的列表页面跳转至某个详情页面的操作。基于vue.js列表页：listview.html:详情页：detail.html 查看详情