热门标签 | 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的联动 一文。


推荐阅读
  • 深入解析Android自定义View面试题
    本文探讨了Android Launcher开发中自定义View的重要性,并通过一道经典的面试题,帮助开发者更好地理解自定义View的实现细节。文章不仅涵盖了基础知识,还提供了实际操作建议。 ... [详细]
  • 优化ListView性能
    本文深入探讨了如何通过多种技术手段优化ListView的性能,包括视图复用、ViewHolder模式、分批加载数据、图片优化及内存管理等。这些方法能够显著提升应用的响应速度和用户体验。 ... [详细]
  • 2023年京东Android面试真题解析与经验分享
    本文由一位拥有6年Android开发经验的工程师撰写,详细解析了京东面试中常见的技术问题。涵盖引用传递、Handler机制、ListView优化、多线程控制及ANR处理等核心知识点。 ... [详细]
  • Android 九宫格布局详解及实现:人人网应用示例
    本文深入探讨了人人网Android应用中独特的九宫格布局设计,解析其背后的GridView实现原理,并提供详细的代码示例。这种布局方式不仅美观大方,而且在现代Android应用中较为少见,值得开发者借鉴。 ... [详细]
  • 本文详细介绍了如何使用 Yii2 的 GridView 组件在列表页面实现数据的直接编辑功能。通过具体的代码示例和步骤,帮助开发者快速掌握这一实用技巧。 ... [详细]
  • Android 渐变圆环加载控件实现
    本文介绍了如何在 Android 中创建一个自定义的渐变圆环加载控件,该控件已在多个知名应用中使用。我们将详细探讨其工作原理和实现方法。 ... [详细]
  • 本文介绍如何通过注册表编辑器自定义和优化Windows文件右键菜单,包括删除不需要的菜单项、添加绿色版或非安装版软件以及将特定应用程序(如Sublime Text)添加到右键菜单中。 ... [详细]
  • Android LED 数字字体的应用与实现
    本文介绍了一种适用于 Android 应用的 LED 数字字体(digital font),并详细描述了其在 UI 设计中的应用场景及其实现方法。这种字体常用于视频、广告倒计时等场景,能够增强视觉效果。 ... [详细]
  • 本章将深入探讨移动 UI 设计的核心原则,帮助开发者构建简洁、高效且用户友好的界面。通过学习设计规则和用户体验优化技巧,您将能够创建出既美观又实用的移动应用。 ... [详细]
  • RecyclerView初步学习(一)
    RecyclerView初步学习(一)ReCyclerView提供了一种插件式的编程模式,除了提供ViewHolder缓存模式,还可以自定义动画,分割符,布局样式,相比于传统的ListVi ... [详细]
  • 2023 ARM嵌入式系统全国技术巡讲旨在分享ARM公司在半导体知识产权(IP)领域的最新进展。作为全球领先的IP提供商,ARM在嵌入式处理器市场占据主导地位,其产品广泛应用于90%以上的嵌入式设备中。此次巡讲将邀请来自ARM、飞思卡尔以及华清远见教育集团的行业专家,共同探讨当前嵌入式系统的前沿技术和应用。 ... [详细]
  • 深入理解C++中的KMP算法:高效字符串匹配的利器
    本文详细介绍C++中实现KMP算法的方法,探讨其在字符串匹配问题上的优势。通过对比暴力匹配(BF)算法,展示KMP算法如何利用前缀表优化匹配过程,显著提升效率。 ... [详细]
  • Python自动化处理:从Word文档提取内容并生成带水印的PDF
    本文介绍如何利用Python实现从特定网站下载Word文档,去除水印并添加自定义水印,最终将文档转换为PDF格式。该方法适用于批量处理和自动化需求。 ... [详细]
  • 本文探讨了卷积神经网络(CNN)中感受野的概念及其与锚框(anchor box)的关系。感受野定义了特征图上每个像素点对应的输入图像区域大小,而锚框则是在每个像素中心生成的多个不同尺寸和宽高比的边界框。两者在目标检测任务中起到关键作用。 ... [详细]
  • 如何高效创建和使用字体图标
    在Web和移动开发中,为什么选择字体图标?主要原因是其卓越的性能,可以显著减少HTTP请求并优化页面加载速度。本文详细介绍了从设计到应用的字体图标制作流程,并提供了专业建议。 ... [详细]
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社区 版权所有