热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

新版本的zaker更换了全新的UI,让我一亮的是他第一次启动时引导界面的效果:如上图,画面里有一个白色的手机模型,模型中间有zakerapp的界面缩略图,手机模型下面是两

新版本的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的联动 一文。


推荐阅读
  • 本文详细探讨了JavaScript中的作用域链和闭包机制,解释了它们的工作原理及其在实际编程中的应用。通过具体的代码示例,帮助读者更好地理解和掌握这些概念。 ... [详细]
  • 本文介绍如何使用 Android 的 Canvas 和 View 组件创建一个简单的绘图板应用程序,支持触摸绘画和保存图片功能。 ... [详细]
  • 本文详细探讨了网站流量统计中常用的三个关键指标:页面浏览量(PV)、独立访客数(UV)和独立IP数(IP)。通过分析这些指标的定义、计算方法及其应用场景,帮助网站运营者更好地理解用户行为,优化网站内容与用户体验。 ... [详细]
  • 分享一个简化版的Silverlight链接图项目:Link Map Simplified
    本文介绍了一个使用Silverlight开发的可视化工具,主要用于展示和操作复杂的实体关系图(Graph)。该工具在犯罪调查系统中得到了广泛应用,帮助用户直观地获取和理解相关信息。 ... [详细]
  • 解决U盘安装系统后无法重启的问题
    本文详细探讨了运维新手常遇到的U盘安装系统后无法正常重启的问题,提供了从问题分析到具体解决方案的完整步骤。通过理解Boot Loader的工作原理和正确配置启动项,帮助用户顺利解决问题。 ... [详细]
  • FinOps 与 Serverless 的结合:破解云成本难题
    本文探讨了如何通过 FinOps 实践优化 Serverless 应用的成本管理,提出了首个 Serverless 函数总成本估计模型,并分享了多种有效的成本优化策略。 ... [详细]
  • 本文介绍了Android开发中Intent的基本概念及其在不同Activity之间的数据传递方式,详细展示了如何通过Intent实现Activity间的跳转和数据传输。 ... [详细]
  • 本文详细介绍超文本标记语言(HTML)的基本概念与语法结构。HTML是构建网页的核心语言,通过标记标签描述页面内容,帮助开发者创建结构化、语义化的Web页面。 ... [详细]
  • 本文详细介绍了Ionic框架的使用方法及其与Angular的集成。Ionic框架是一个强大的前端开发工具,适用于构建跨平台的移动应用程序。文章将探讨如何引入必要的CSS和JavaScript文件,并解释bundle.js中包含的核心功能,如路由等。 ... [详细]
  • 本文介绍了如何通过设置背景形状来轻松地为 Android 的 TextView 添加圆形边框。我们将详细讲解 XML 代码的配置,包括圆角、描边和填充等属性。 ... [详细]
  • 在项目部署后,Node.js 进程可能会遇到不可预见的错误并崩溃。为了及时通知开发人员进行问题排查,我们可以利用 nodemailer 插件来发送邮件提醒。本文将详细介绍如何配置和使用 nodemailer 实现这一功能。 ... [详细]
  • 自己用过的一些比较有用的css3新属性【HTML】
    web前端|html教程自己用过的一些比较用的css3新属性web前端-html教程css3刚推出不久,虽然大多数的css3属性在很多流行的浏览器中不支持,但我个人觉得还是要尽量开 ... [详细]
  • 卷积神经网络(CNN)基础理论与架构解析
    本文介绍了卷积神经网络(CNN)的基本概念、常见结构及其各层的功能。重点讨论了LeNet-5、AlexNet、ZFNet、VGGNet和ResNet等经典模型,并详细解释了输入层、卷积层、激活层、池化层和全连接层的工作原理及优化方法。 ... [详细]
  • 本文探讨了在UC浏览器中调用分享面板后,图片无法正常显示的问题,并提供了详细的解决方法和代码示例。 ... [详细]
  • C# LiNQ 查询 join连接
    C# LiNQ 查询 join连接 ... [详细]
author-avatar
Jie
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有