作为一个资深(自认为)iOS程序猿,会经常用到轮播图,但是总是感觉自己实现要比直接用别人的要方便一点,并且有一些需求需要深度定制,于是想着自己封装一个可以定制化的轮播图库JCyclePictureView。
1、核心代码

通过更改数据源来给用户一个假象,图片在无限滚动(其实一共只有3个 cell),默认显示第一个,右滑 index + 1, 左滑 index - 1,然后修改数据源,异步回到第一个cell(注意不能有动画)

2、可定制 cell


本质为UICollectionView 的cellForItemAt 代理,需自己实现赋值逻辑

3、滚动方向

支持 上下左右 四种滚动方式

实际为 UICollectionView 用动画滚动到 第0个 cell 还是第2个 cell

4、PageControl
为实现可支持图片的PageControl,写了一个继承UIPageControl 的 JPageControl

红框内为核心代码,原理其实很简单,在每一个 显示的点上面添加一张图片,然后根据 currentPage 属性修改图片

目前对齐方式支持 left、center、right,通过修改 frame 确定位置
5、其它需求

pictures 可以之后设置 pictures支持本地、网络图片同时加载

设置标题时 PageControl 自动右对齐

index 从0 开始

小于0.5秒不自动播放(如果不想自动播放可以 设为 0)

设置图片的ContentMode
6、用法


如果使用过程中出现问题,可随时 mr_banma@126.com 邮件联系。
ps:如果喜欢,记得 Star 一下,谢谢支持
网友评论