仿zaker最新版本引导界面的视图联动效果(修改viewpager实现)

gy774474 9年前

新版本的zaker更换了全新的UI,让我一亮的是他第一次启动时引导界面的效果:

如上图,画面里有一个白色的手机模型,模型中间有zaker app的界面缩略图,手机模型下面是两行文字。按照常用的做法,滑动将会翻页,但是和其他应用不同的事,zaker这个界面的翻页手机模型一直是固定的,随着屏幕滑动的只有手机模型中的缩略图以及下面的两行文字。

手机模型中的图像会随着屏幕滑动而滑动,而且当整个界面翻过一页时,手机中的画面也刚好翻过一页。总之,不管怎么滑动外面文字和手机内部的画面是同步的。

这是如何实现的呢,琢磨了很久,终于摸索出一点道道来(稍微有点经验的都应该联想到viewpager吧)。

先说说我的实现思路。

1.首先你得要有一个这样的ViewPager:当自己滑动的时候,能让与自己关联的viewpager也跟着动,且是同步的,这是关键所在,也是最困难的地方。

2.然后你还得有一个屏蔽触摸事件的布局控件,很简单,自定义一个就是。为什么需要这玩意儿呢,后面再说。

3.最后你还得要一个像zaker那样的手机框框,这个框作为手机内部视图的背景。别得意没那么简单,这个背景必须是精心制作的.9图片才行,不然背景放上去根本不能达到上面的效果。.9图片不仅能解决拉伸的问题,还能指定内容区域,这是我们使用.9的原因。

上面的材料准备好之后,就开始想如何使用它们了。

上述材料1中的viewpager似乎已经能满足我们的需求了,其实不是,外面的viewpager带动手机里面的viewpager滑动,那么外面的这个必须是满屏幕的,称之为TouchViewPager吧,由他来处理所有的触摸事件,手机内部的viewpager仅仅是跟着做运动,所以得屏蔽手机内部接受触摸的事件,于是需要材料2。TouchViewPager是满屏幕的那么他的整个背景应该是透明,这样才不会遮住手机中的viewpager。

如何实现一个能联动的ViewPager呢(准确的说是两个一起)?这需要自定义ViewPager,是继承ViewPager吗?也许可以但是很难,继承意味着不能更改私有方法,于是根据网上有人通过完全重写整个ViewPager得到垂直滑动ViewPager的先例,我觉得重写整个ViewPager得到自己的联动pager也是可能的。

将Supportv 4中的ViewPager和PagerAdapter都拷贝出来放在自己的项目中,使用的时候就不要import Supportv 4中的了。

直接放到项目中后你会看到这个ViewPager有好多错误,肯定的,因为原本依赖的一些东西不见了,其实很多都是可以不要的,发挥你的想象力删除该删的代码,直到没有错误为止(其中将原本import的Supportv 4中的PagerAdapter改为刚刚拷贝过来的这个),如果你不想自己搞本文末尾的demo中会有一个已经剔除干净的ViewPager。

具体实现请看 如何实现两个ViewPager的联动 一文。