接口说明
- 实际封装后的代码并未用到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地址
效果
说明:图片来源:抓的是奇点app的JSON包用来仿写。
控件
前提:
整个滚动的效果是在一个自定义的UITableViewCell
中实现的。
- Cell中拉入一个
ScrollView
填满
- 注意,将Bounces都去掉,避免滑动过程的弹性效果
- 去掉水平和竖直方向上的滚动提示,所以 show H/V indicator也去掉
- 记住要勾选
paging enabled
- 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数组中找到相应的三个连号。如下图
-