用极简方式实现新浪新版本特性展示效果--view的图片轮播
在发布版本的时候,大多数软件会在第一次使用新版本时候弹出视图用几张图片给用户做一个新版本特性介绍,最简单如下图新浪的版本特性介绍

由于图片是全屏展示且是左右滑动,大多数情况开发者会选择使用scroll或者collection等视图来搭建,它们的共同点是需要设置数据源和代理。对于新特性展示而言,往往只需要用展示三五张图片,而且因为业务逻辑不同,还需要通过方法监听用户划到了哪一张图片来判断是否添加跳过或者进入app等按钮。这一业务处理对于app本身没有太大价值而且经常被用户自主跳过。浪费大量代码在上面有些得不偿失。因此想尝试着用简单点的方式来解决新特性等类似的图片展示。最终结果如下图:

其业务逻辑是一样的,通过监听用户手势刷新展示的图片,当然新浪用的是滑动手势,为了测试方便这里demo采用的是点击,点击图片右边跳到下一张,左边则跳到上一张。首先来看一下效果实现的原理。从表面上来看,无非就是界面的刷新,因此,其实现起来十分容易,以collectionview为例,是通过对其cell内容的设置,来改变展示内容。那么在imageview中,可以借鉴同样的原理。直接改变imageview的图片内容来展示特性。唯一不同的是,我们可以直接获取到collectionview上面的cell编号,根据编号处理内容。而imageview没有这个属性。因此我们只需要增加一个变量决定imageview显示内容,就能轻易解决这个问题。无需实现一大堆的协议代理以及监听方法。下面直接通过代码解析其具体实现过程。代码基于swift2.2. 和oc版本一起 源码自取(https://github.com/huafushengweirui/view。。十分简单,可以自己敲一下)swift版本无法循环,oc可以。不同点在于对第一张图片和最后一张的点击处理。

整个实现过程十分简单,首先新建一个继承自UIview的子类,重写drawrect方法。设置一个变量与与需要展示的图片相关联,demo里是直接使用数字做为图片名(方法不可取,仅作示范)。为新建的分类添加点击手势,在手势里处理业务逻辑。判断用户是点击左边还是右边,来决定变量的增大或者减小从而更改视图上的内容。然后重绘视图。swift支持属性监听。因此重绘处理直接交于变量管理。在oc当中,则需要教给touchbegan方法处理。除了demo里面实现的图片切换,我们也不必通过方法监听cell滑动到了哪一个,而是可以直接通过变量来判断是否需要添加按钮让用户跳过介绍或者进入app。
这算是一个偷懒的点子,与常用信息展示视图处理比起来,这个方法无疑简单很多。当然,反复重绘是很消耗性能的事情。在新特性这一类仅仅需要展示几张图片且属于一次性的业务,其影响可以忽略不计。但对于其他数据较为复杂的展示,大多不可取此方法。
用极简方式实现新浪新版本特性展示效果--view的图片轮播的更多相关文章
- python中逐行读取文件的最佳方式_Drupal_新浪博客
python中逐行读取文件的最佳方式_Drupal_新浪博客 python中逐行读取文件的最佳方式 (2010-08-18 15:59:28) 转载▼ 标签: python ...
- 极简的js点击组图切换效果
程序员进行前端开发时,时常要用到点击切换组图的动画效果,网上确实有很多此类插件,但是都很麻烦,乌糟糟无数代码,有那个看的时间,自己都能把功能写完了.在这里我提供一段极简的js点击组图切换效果代码,包含 ...
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...
- android listview的HeadView左右切换图片(仿新浪,网易,百度等切换图片)
首先我们还是看一些示例:(网易,新浪,百度) 显示效果都不错,可是手感就不一样了,百度最棒,网易还行,新浪就操作很不好,这里我说的是滑动切换图片.自己可以测试一下.不得不说牛叉的公司确实有哦牛叉的道理 ...
- 【转】Android android listview的HeadView左右切换图片(仿新浪,网易,百度等切换图片)
首先我们还是看一些示例:(网易,新浪,百度) 下面我简单的介绍下实现方法:其实就是listview addHeaderView.只不过这个view是一个可以切换图片的view,至于这个vie ...
- UWP 创建动画的极简方式 — LottieUWP
提到 UWP 中创建动画,第一个想到的大多都是 StoryBoard.因为 UWP 和 WPF 的界面都是基于 XAML 语言的,所以实现 StoryBoard 会非常方便. 来看一个简单的 Stor ...
- HTML5 极简的JS函数
页面初始化 mui框架将很多功能配置都集中在mui.init方法中,要使用某项功能,只需要在mui.init方法中完成对应参数配置即可,目前支持在mui.init方法中配置的功能包括:创建子页面.关闭 ...
- Snabbt.js – 极简的 JavaScript 动画库
Snabbt.js 是一个简约的 JavaScript 动画库.它会平移,旋转,缩放,倾斜和调整你的元素.通过矩阵乘法运算,变换等可以任何你想要的方式进行组合.最终的结果通过 CSS3 变换矩阵设置. ...
- spring boot MySQL极简封装
摒弃繁琐配置,采用极简方式,源码简单,调用丰富,无污染,易携带,工作量减半,java操作mysql居家旅行升职加薪登上人生巅峰迎娶白富美必备object! 项目地址:https://gitee.com ...
随机推荐
- 测试ajax发送数据时在控制台看不到请求信息
都是因为我把alert(xmlhttp);alert(url);打印测试数据放到了xmlhttp.open("GET",url,true);之前,导致后面的发送请求不执行了!
- github拉取和推送
登入github 创建一个开源项目 然后打开安装好的git 首先进入一个指定的文件夹 例如: 1)E:\>cd miaov/testGit 回车 进入E盘的testGit文件夹 2)E:\mia ...
- C# TCP socket发送大数据包时,接收端和发送端数据不一致 服务端接收Receive不完全
简单的c# TCP通讯(TcpListener) C# 的TCP Socket (同步方式) C# 的TCP Socket (异步方式) C# 的tcp Socket设置自定义超时时间 C# TCP ...
- 手动安装Oracle的Maven依赖
由于Oracle授权问题,Maven3不提供Oracle JDBC driver,为了在Maven项目中应用Oracle JDBC driver,必须手动添加到本地仓库. 环境:win7 + Orac ...
- python标准模块(time、datetime及hashlib模块)
一.time,datetime模块 时间相关的操作 import time time.sleep(5) # ==> 停顿多少秒 print(time.time()) # ==> 返回时间戳 ...
- webservice 测试窗体只能用于来自本地计算机的请求
Question: WebService部署成站点之后,如果在本地测试webservice可以运行,在远程却显示“测试窗体只能用于来自本地计算机的请求”或者"The test form is ...
- unixLike命令拾遗
针对在日常工作过程中,发现的学习的漏洞和忘记的知识,进行拾遗. 编辑命令 一.vim操作 1.进入编辑模式 在光标移到将要编辑处,点击i,进入编辑模式 2.退出编辑模式 按esc或者crtl+c退出编 ...
- Xcode 快捷键、常用技巧
关于iOS开发中的技能快捷键 经常使用鼠标太TM的D疼了,快捷键能大大地提高我们的开发速度,使我们的手指尽情的在键盘上飞舞,优美的代码,哈哈哈,那些常规的复制.粘贴.剪切请自行度娘或者Google一下 ...
- jQuery学习之prop和attr的区别示例介绍
1..prop( propertyName ) 获取匹配集合中第一个元素的Property的值 2. .prop( propertyName, value ) .prop( map ) .prop( ...
- 分页查询和分页缓存查询,List<Map<String, Object>>遍历和Map遍历
分页查询 String sql = "返回所有符合条件记录的待分页SQL语句"; int start = (page - 1) * limit + 1; int end = pag ...