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

由于图片是全屏展示且是左右滑动,大多数情况开发者会选择使用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. POJ1704 Georgia and Bob

    Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 9771   Accepted: 3220 Description Georg ...

  2. RocketMQ原理解析-Broker

    broker 1. broker的启动 brker的启动 Broker向namesrv注册 1. 获取namesrv的地址列表(是乱序的) 2. 遍历向每个namesrv注册topic的配置信息top ...

  3. Github上的Watch和 Star的区别

    Github 推出了新的 Notification 系统,更改了原有的 Watch 机制,为代码库增加了 Star 操作.Notification 将接收 Watching 代码库的动态,包括:* I ...

  4. struts-hibernate-ajax完成区县和街道级联下拉框功能

    前言:这次dao用的是hibernate,控制层和显示层用的是struts,页面用的是ajax... 啰嗦:我做这个用了很久,用了2周,难点没破解的地方,hibernate的多对一关系生成实体类中属性 ...

  5. 解决Windows版Git出现templates not found的问题

    环境: Win10 x64 Git windows客户端(下载自 https://git-scm.com/) SourceTree 1.9.6.1(使用系统安装的Git,而非SourceTree内嵌的 ...

  6. java spring mvc restful 上传文件

    spring mvc 配置文件 <bean class="com.baiyyy.yfz.core.RestfulHandlerMethodMapping" />     ...

  7. jquery1.7.2的源码分析(四)$.Deferred(2)

    jQuery.Callbacks = function( flags ) { // Convert flags from String-formatted to Object-formatted // ...

  8. Unity游戏开发中的内存管理_资料

    内存是手游的硬伤——Unity游戏Mono内存管理及泄漏http://wetest.qq.com/lab/view/135.html 深入浅出再谈Unity内存泄漏http://wetest.qq.c ...

  9. 共有31款PHP 图形/图像处理开源软件(转)

    详情点击:http://www.oschina.net/project/lang/22/php?tag=141&os=0&sort=view PHP 图像处理库 Grafika Gra ...

  10. ASP.NET MVC Filter- 登录验证 【异步刷新列表视图】

    public class TAjaxListLoginValidateAttribute : FilterAttribute, IAuthorizationFilter { public void O ...