UIScrollView+UIPageControl实现广告页Banner滚动效果

接口说明

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

/**
 初始化
 
 @param modelArray 传入的数据模型，必须遵循 bannerInfo 协议，至少包含图片和链接
 @param position 指出pageControl的位置
 @param time 每张图展示的时间
 @param blk 当且仅当图片有对应url时跳转到对应网页
 */
-(void)setParamsWithModel: (NSArray>*) 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的使用目的，主要是指示当前滑动到的页数。整个滑动效果的实现，主要是通过UIScrollView的delegate，在滑动结束的时候改变 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数组中找到相应的三个连号。如下图

    
    
    

    说明