美文网首页iOS学习笔记iOS Developer
UIScrollView+UIPageControl实现广告页B

UIScrollView+UIPageControl实现广告页B

作者: 黑羽肃霜 | 来源:发表于2016-08-03 22:50 被阅读268次

接口说明

  • 实际封装后的代码并未用到SDWebImage,仅仅传入图片即可。如果要传入网络图片,在接口外做,降低耦合性。
/**
 初始化
 
 @param modelArray 传入的数据模型,必须遵循 bannerInfo 协议,至少包含图片和链接
 @param position 指出pageControl的位置
 @param time 每张图展示的时间
 @param blk 当且仅当图片有对应url时跳转到对应网页
 */
-(void)setParamsWithModel: (NSArray<id<bannerInfo>>*) modelArray
         pageCtrlPosition:(PAGE_CTRL_POS)position
          timeForEachPage:(NSTimeInterval)time
     tapBannerCompleteBlk:(BannerBtnCallback)blk;

Github地址

自动回滚github地址

效果

说明:图片来源:抓的是奇点app的JSON包用来仿写。


效果图

控件

前提:
整个滚动的效果是在一个自定义的UITableViewCell中实现的。

  • Cell中拉入一个ScrollView填满
  • 注意,将Bounces都去掉,避免滑动过程的弹性效果
  • 去掉水平和竖直方向上的滚动提示,所以 show H/V indicator也去掉
  • 记住要勾选 paging enabled
    scrollView设置
  • Cell中再拉入一个UIPageControl,注意这个pageControl不是scrollview的子类,且拉入的顺序,否则会被盖在scrollview底下不显示:
    注意顺序
  • 控件搭配的实现原理
    UIPageControl的使用目的,主要是指示当前滑动到的页数。整个滑动效果的实现,主要是通过UIScrollViewdelegate,在滑动结束的时候改变 self.pageconrol.currentpage的值来实现的。

具体实现:

  • 通过AFNetworking+SDWebImage 申请到一组网络图片,存成一个NSArray。这里的实现过程不赘述,可参看另一篇笔记。
  • 我们要解决的问题就是当按页滚动图片时,滚动到最左/最右时,再往左/右滚动,是要回到最初/最后一张的。假设我们一共有n张图片,pagecontrol中肯定要显示n个点,但是实际我们scrollView的contentSize宽度只要3倍的宽度就好了。
    • 我们假设每张图片都作为一个按键的背景图,那么其实有如下的设定:


      示意图
    • 每一次scrollview滚动结束,会调用delegate中的函数
    -(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
    
    滚动结束后要做的事包括:
    • 根据滑动的偏移量,改变 pagecontrol的currentpage
    • 重载图片
      将上面截图中的三个UIView(其实是UIButton),removeFromSuperview,然后根据self.pagecontrol.currentpage作为下标,去传进来的model数组中找到相应的三个连号。如下图


      说明

相关文章

  • UIScrollView+UIPageControl实现广告页B

    接口说明 实际封装后的代码并未用到SDWebImage,仅仅传入图片即可。如果要传入网络图片,在接口外做,降低耦合...

  • 9.0 UIScrollView+UIPageControl实现

    需求: 启动程序后,有个介绍app新特性的界面 思路: 新特性界面,其实就多个图片组合在一起,展示出来而已! 使用...

  • 启动页+广告页实现优化

    前言 每个app中都有启动+广告这个功能逻辑,或多或少,每个公司的逻辑都不大一样,最近我优化了一版广告业+启动页面...

  • iOS 广告页的实现

    现象: 诚然、现在很多app启动后除了启动页,还会加一个广告页。今天我们就来说下广告页的实现。 分析(3部分组成)...

  • ios广告页的实现

    之前有有些过简单的广告页的实现,现在我对之前的写的进行细致的优化使它更有效地应用到我们的项目中去。 还是说一下他的...

  • iOS广告页的实现及注意点

    在大多数app启动过程中都会出现广告页,那么现在说说到底是如何实现的。 实现思路: 自定义一个广告页viewCon...

  • 使用 localStorage 实现多页面通信

    需求背景 两个页面 A、B,B 页面关闭时,通知 A 页面请求接口刷新列表页 实现 使用 storage 事件实现...

  • iOS广告页实现优化技巧

    之前做广告页的时候就一直想来总结一下几个版本优化时的思路,广告页不同于其他页面图片的原因是极其需要考虑弱网情况下的...

  • Android App 启动页广告页图片的实现

    本文为仅学习记录 参考项目链接GitHub - Bakumon/UGank: 「有干货」Gank.io 第三方客户...

  • 2018-03-21

    1,广告页 有图片缩放+轮播https://rd.kuaigames.com/?cid=chn5b1658115e17f

网友评论

    本文标题:UIScrollView+UIPageControl实现广告页B

    本文链接:https://www.haomeiwen.com/subject/rfhcsttx.html