如人饮水,冷暖自知

iOS 性能优化—「循环利用 & 无限轮播」

引导


SourceCodeToolsClassWechatPublic-Codeidea

在「时间 & 知识 」有限内,总结的文章难免有「未全、不足 」的地方,还望各位好友指出,可留言指正或是补充,以提高文章质量@白开水ln原著;

循环利用


【需求】:如上图 或者是新闻类的滚动条,标题可以点击切换界面控制器,界面可以滑动查看同时切换对应标题;常用做法是,滚动条用 UIScrollView 子控件采用 UIButton,内容视图采用 tableView

实现方案一:

内容视图可滑动,采用 UITableView + 2个tableView
tableView 只支持上下滑动,但是 也能办到左右滑动 [transform];

【注解】:
因为我们知道 tableView 的循环利用不用我们写,tableView 自带循环利用功能,我们只要往 cell 上面 加 tableView 就可以了,现在 tableView 的数据源 设置为 cell 就可以了,数据源不一定 非得是控制器,只不过一般是控制器;只要 这个 cell 遵守 数据源DataSource和实现数据源方法,就可以为tableView提供数据;

实现方案二:

内容视图可滑动,采用 UIScrollView + 2个tableView
那现在循环利用就需要我们自己做了,对比collectionView 少了cell,但是 需要在 scrollViewDidScroll: 监听 scrollView 的滑动,其实循环利用 这里在监听滑动方法里,改变tableView的 x;

实现方案三:

内容视图可滑动,采用 UICollectionView + 2个tableView
collectionView 支持上下滑动,也支持左右滑动 ;
collectionView 自带循环利用,我们要做的就是 循环利用View,更换数据;

案例


以方案三 UICollectionView为例;

【引子】

  • 如果加上网络请求(结合上图)。【政治板块】正在处于下拉刷新,这时服务器请求还没有回来,用户滑动【体育板块】,政治View循环利用过来,这时我们要做的
    • 1.干脆点 直接取消上次的请求;用户再次滑到【政治板块】重新下拉发送请求
    • 2.请求继续,取消头部刷新控件状态(政治和体育 同时请求数据互补干扰,只是界面会有干扰,我们改变界面上的显示就可以;1> 如果政治数据请求下来可以暂存,用户再次滑到【政治板块】数据赋值上去 2> 如果政治数据没有请求下来,用户再次滑到【政治板块】还是显示下拉刷新状态);

正反无限轮播(3张)


正反无限轮播

  • 手动滚动:只创建三张图片: leftImageViewcenterImageViewrightImageView,定义中间显示页码为 centerPage ,设置初始self.centerPage = 0;,而左右图片页码都以 centerPage 表示,通过 scrollViewDidEndDecelerating: 方法判断contentOffsest.xscrollView.frame.size.width 比较,使改变 self.centerPage的值,然后对应页码滚动取数组中的图片,始终显示中间一张
  • 定时器滚动: 将定时器添加到 RunloopNSRunLoopCommonModes下,触发方法中设置setContentOffset: animated:YES 方法动画结束时调用 scrollViewDidEndScrollingAnimation:(仅当animated设置为YES时才调用),这个方法下 self.centerPage++;OK了

监听图片点击

当图片被点击的时候,我们往往需要执行某些操作,因此需要监听图片的点击,思路如下:

  • 1.定义一个block属性暴露给外界void(^LNBlock)(NSInteger index)
  • 2.设置centerImageViewuserInteractionEnabledYES
  • 3.给scrollView添加一个点击的手势
  • 4.在手势方法里调用block,并传入图片索引

正反无限轮播(2张)

大致原理:
最底层是一个UIView,上面有一个UIScrollView以及UIPageControlscrollView上有两个UIImageViewimageView宽高 = scrollview宽高 = view宽高;

假设轮播控件的宽度为x高度为y,我们设置scrollviewcontentSize.width3x,并让scrollview的水平偏移量为x,既显示最中间内容。

具体细节请移步这里阅读:
轮播两个ImageView实现 http://www.jianshu.com/p/ef03ec7f23b2

44.gif

Reading


  • 如果在阅读过程中遇到 error || new ideas,希望你能 issue 我,我会及时补充谢谢。

  • 不管谁的博客上面写的 (也包括自己),阅读的你要敢于去验证;如人饮水,冷暖自知;(共勉)。

  • 喜欢可 赞赏 or Star一波;点击左上角关注 或 微众『Codeidea』,在 Demo 更新时收到邮件通知,便捷你的阅读。

🖋 Plain boiled water ln : 本文结束    感谢阅读 ^_^. Need coffee?
👁 At this time suggest 1 minute eye exercises

本文标题:iOS 性能优化—「循环利用 & 无限轮播」

文章作者:白开水ln

原始链接:http://plainboiledwaterln.cn/iOSNET/Optimize.html

版权声明: 署名-非商业性使用-禁止演绎 4.0 国际 『微众圈:Codeidea』本博客文章除特别声明外均为原创,如需转载请务必保留原链接(可点击进入的链接)和作者出处,谢谢合作!

「喜欢就留言or赞赏」but「支持不要超过你早餐费的 0.5」 ^_^.