用极简方式实现新浪新版本特性展示效果--view的图片轮播

时间:2022-02-20 14:38:25

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

用极简方式实现新浪新版本特性展示效果--view的图片轮播

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

用极简方式实现新浪新版本特性展示效果--view的图片轮播

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

用极简方式实现新浪新版本特性展示效果--view的图片轮播

整个实现过程十分简单,首先新建一个继承自UIview的子类,重写drawrect方法。设置一个变量与与需要展示的图片相关联,demo里是直接使用数字做为图片名(方法不可取,仅作示范)。为新建的分类添加点击手势,在手势里处理业务逻辑。判断用户是点击左边还是右边,来决定变量的增大或者减小从而更改视图上的内容。然后重绘视图。swift支持属性监听。因此重绘处理直接交于变量管理。在oc当中,则需要教给touchbegan方法处理。除了demo里面实现的图片切换,我们也不必通过方法监听cell滑动到了哪一个,而是可以直接通过变量来判断是否需要添加按钮让用户跳过介绍或者进入app。

这算是一个偷懒的点子,与常用信息展示视图处理比起来,这个方法无疑简单很多。当然,反复重绘是很消耗性能的事情。在新特性这一类仅仅需要展示几张图片且属于一次性的业务,其影响可以忽略不计。但对于其他数据较为复杂的展示,大多不可取此方法。