在发布版本的时候,大多数软件会在第一次使用新版本时候弹出视图用几张图片给用户做一个新版本特性介绍,最简单如下图新浪的版本特性介绍

由于图片是全屏展示且是左右滑动,大多数情况开发者会选择使用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的图片轮播的更多相关文章

  1. python中逐行读取文件的最佳方式_Drupal_新浪博客

    python中逐行读取文件的最佳方式_Drupal_新浪博客 python中逐行读取文件的最佳方式    (2010-08-18 15:59:28)    转载▼    标签:    python   ...

  2. 极简的js点击组图切换效果

    程序员进行前端开发时,时常要用到点击切换组图的动画效果,网上确实有很多此类插件,但是都很麻烦,乌糟糟无数代码,有那个看的时间,自己都能把功能写完了.在这里我提供一段极简的js点击组图切换效果代码,包含 ...

  3. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  4. android listview的HeadView左右切换图片(仿新浪,网易,百度等切换图片)

    首先我们还是看一些示例:(网易,新浪,百度) 显示效果都不错,可是手感就不一样了,百度最棒,网易还行,新浪就操作很不好,这里我说的是滑动切换图片.自己可以测试一下.不得不说牛叉的公司确实有哦牛叉的道理 ...

  5. 【转】Android android listview的HeadView左右切换图片(仿新浪,网易,百度等切换图片)

    首先我们还是看一些示例:(网易,新浪,百度)      下面我简单的介绍下实现方法:其实就是listview addHeaderView.只不过这个view是一个可以切换图片的view,至于这个vie ...

  6. UWP 创建动画的极简方式 — LottieUWP

    提到 UWP 中创建动画,第一个想到的大多都是 StoryBoard.因为 UWP 和 WPF 的界面都是基于 XAML 语言的,所以实现 StoryBoard 会非常方便. 来看一个简单的 Stor ...

  7. HTML5 极简的JS函数

    页面初始化 mui框架将很多功能配置都集中在mui.init方法中,要使用某项功能,只需要在mui.init方法中完成对应参数配置即可,目前支持在mui.init方法中配置的功能包括:创建子页面.关闭 ...

  8. Snabbt.js – 极简的 JavaScript 动画库

    Snabbt.js 是一个简约的 JavaScript 动画库.它会平移,旋转,缩放,倾斜和调整你的元素.通过矩阵乘法运算,变换等可以任何你想要的方式进行组合.最终的结果通过 CSS3 变换矩阵设置. ...

  9. spring boot MySQL极简封装

    摒弃繁琐配置,采用极简方式,源码简单,调用丰富,无污染,易携带,工作量减半,java操作mysql居家旅行升职加薪登上人生巅峰迎娶白富美必备object! 项目地址:https://gitee.com ...

随机推荐

  1. 一个将 footer 保持在底部的最好方法

    原文: Quick Tip: The Best Way To Make Sticky Footers 当你在布局网页时,有可能会遇到类似下面的这种情况 导致这一问题的原因是页面内容太少,无法将内容区域 ...

  2. synergy 使用记录

    synergy 是一个多台电脑之间,共享鼠标.键盘的开源工具,做的很赞.目前,这个工具对 Windows.Linux.MacOS 都有很好的支持. 手上 arm 板安装的是 debian 系统,所以, ...

  3. 20145204&20145212信息安全系统实验二

    20145204&20145212信息安全系统实验二 链接

  4. 学习篇:TypeCodes的2015年博客升级记

    原文: https://typecodes.com/mix/2015updateblog.html 2015年博客升级记 作者:vfhky | 时间:2015-05-23 17:25 | 分类:mix ...

  5. ubuntu 14.04 修改网络配置

    修改IP地址: vi /etc/network/interfaces

  6. java.lang.NoClassDefFoundError: Lorg/slf4j/Logger;

    如果你出现类似如下错误 1. Install tomcat7 in my home directory and set up `CATALINA_HOME` environment variable ...

  7. tomcat启动的了,但是加载项目失败

    解决方法: 1.tomcat启动是好的,也有可能找不到tomcat的dll,所以,检查一下myeclipse所使用的tomcat的解压目录是不是有空格,有空格的话,重新解压到一个新目录,千万不要有空格 ...

  8. Input输入框输入银行卡号自动空格

    input输入框是表格中用都最多的,像输入手机,密码,银行卡号的,很多对于输入银行卡号是没有处理的,比如这样~~ 看起来是不是一团乱麻,, 眼睛瞬间一片漆黑~  如果是这样,会不会好很多呢~~ 其实逻 ...

  9. CSS常用技术总结!~~

    //放大屏幕,背景图不变 background: url(x.png) no-repeat 0 0; background-image: -webkit-image-set(url(logo_db.p ...

  10. opencart邮件模板

    在opencart中,几乎所有的版权信息都写在language里,我们找到catalog/language/your language/mail/order.php这个语言文件,找到 $_['text ...