介绍
这是一个图片及文字自动轮播的控件,由于本人是个的小菜鸟,所以这个第三方库都是看别人的,主体代码是参考SDCycleScrollView,图片滚轮样式是参考这篇博客UICollectionView自定义布局,文字水平滚动是参考LMJHorizontalScrollText,自定义的UICollectionViewLayout是跟HJCarouselDemo学习的,本人现阶段能力有限,代码比较混乱,累赘,看不惯的兄弟可以使用上面的SDCycleScrollView
控件整体是由一个UICollectionView组成,由于是自定义的UICollectionViewLayout,所以形成了各种滚动的样式,而文字的滚动除了无样式的是滚动的是整个cell,其他只是在第0个cell定时修改文字label的x或y来改变文字的位置,以达到文字好像在滚动的效果
安装
使用CocoaPods安装
pod 'LVCycleScrollView'
手动安装
直接拉取代码,把LVCycleScrollView
文件夹拉到项目工程即可
用法
将头文件导入到您希望使用该控件的任何类中
#import "LVCycleScrollView.h"
滚动类型
- LVImageScroll:图片或者图片+底部文字只有水平滚动才显示底部文字
- LVOnlyTextScroll:仅文字
滚动方向
- 水平滚动
- 竖直滚动
唯一初始化方法
/**
* 初始化
*
* @param frame view的frame,可先随便传,addsubView后面可用Masonry进行约束
* @param itemSize collectionView里面cell的大小
* @param scrollType 滚动类型,包括图片,文字
* @param scrollDirection 滚动方式,包括水平,竖直滚动
* @return 返回
*/
- (instancetype)initWithFrame:(CGRect)frame
itemSize:(CGSize)itemSize
scrollType:(LVScrollType)scrollType
scrollDirection:(UICollectionViewScrollDirection)scrollDirection;
图片轮播
LVCycleScrollView *view = [[LVCycleScrollView alloc] initWithFrame:CGRectMake(0, navBarHeight, self.view.frame.size.width, 200)
itemSize:CGSizeMake(self.view.frame.size.width, 200)
scrollType:LVImageScroll
scrollDirection:UICollectionViewScrollDirectionHorizontal];
view.imagesArray = @[@"1",@"2",@"3",@"4"];
[self.view addSubview:view];
这里图片数组可以传网络路径,本地图片名字,NSURL类型,UIImage类型
图片+底部文字
LVCycleScrollView *view = [[LVCycleScrollView alloc] initWithFrame:CGRectMake(0, navBarHeight + 200 + 10, self.view.frame.size.width, 200)
itemSize:CGSizeMake(self.view.frame.size.width, 200)
scrollType:LVImageScroll
scrollDirection:UICollectionViewScrollDirectionHorizontal];
view.imagesArray = @[@"1",@"2",@"3",@"4"];
view.titlesArray = @[@"多喜欢阿离一点,可以吗?",@"吟诵十四行诗,作为仲夏之梦的开场",@"见过我家那只可爱的宠物吗?它的名字叫大白",@"想要欣赏妾身的舞姿吗?"];
view.pageControlAliment = LVPageControlRight;
[self.view addSubview:view];
文字轮播
LVCycleScrollView *view = [[LVCycleScrollView alloc] initWithFrame:CGRectMake(0, navBarHeight + 10, self.view.frame.size.width, 40)
itemSize:CGSizeMake(self.view.frame.size.width, 40)
scrollType:LVOnlyTextScroll
scrollDirection:UICollectionViewScrollDirectionHorizontal];
view.titlesArray = @[@"多喜欢阿离一点,可以吗?",@"吟诵十四行诗,作为仲夏之梦的开场",@"见过我家那只可爱的宠物吗?它的名字叫大白",@"想要欣赏妾身的舞姿吗?"];
view.textBackgroundColor = [UIColor colorWithRed:64/255.f green:151/255.f blue:255/255.f alpha:0.5];
[self.view addSubview:view];
属性
/// 代理
@property (nonatomic, weak) id<LVCycleScrollViewDelegate> delegate;
/// block方式监听点击
@property (nonatomic, copy) void (^clickItemOperationBlock)(NSInteger currentIndex);
/// block方式监听滚动
@property (nonatomic, copy) void (^itemDidScrollOperationBlock)(NSInteger currentIndex);
/// 图片数组
@property (nonatomic, strong) NSArray *imagesArray;
/// 文字数组,如果是图片+底部文字,文字数组数量为一则是全部图片底部文字都是第一个元素,不为一数量必须与图片数组数量保持一致,否则抛出异常
@property (nonatomic, strong) NSArray *titlesArray;
/// 是否自动滚动,默认Yes
@property (nonatomic,assign) BOOL autoScroll;
/// 是否无限循环,默认NO,只适用于图片滚动和无样式的文字滚动,有样式的文字滚动默认无限循环
@property (nonatomic,assign) BOOL infiniteLoop;
/// 图片滚动,点击cell是否滑动到该cell,默认NO
@property (nonatomic,assign) BOOL isTouchScrollToIndex;
/// 图片及无样式的纯文字滚动时间,由于是使用系统私有属性contentOffsetAnimationDuration设置的,不保证以后会不会crash或者会被苹果商店拒绝,若以后使用崩溃则不用或需要更新库,[UIView animateWithDuration:1.2 delay:0.02 options:UIViewAnimationCurveLinear animations:^{ [colorPaletteScrollView setContentOffset: offset ];}completion:^(BOOL finished){ NSLog(@"animate");} ];,由于单元格重用,滑动的时候,前面的cell在划入最左边会突然消失留白
@property (nonatomic, assign) CGFloat scrollTime;
/// 图片及无样式的纯文字滚动间隔时间,不包含滚动的时间,默认2s
@property (nonatomic, assign) CGFloat autoScrollTimeInterval;
/// 有样式的纯文字滚动的速度,每多少秒移动一个像素,竖直滚动默认0.1,水平滚动默认0.02
@property (nonatomic, assign) CGFloat speed;
/// 手动拖拽是否最多滑动一页,默认NO
@property (nonatomic, assign) BOOL isScrollOnePage;
/// cell的圆角
@property (nonatomic, assign) CGFloat cellCornerRadius;
/// 两个cell的间隔,适用除图片滚动样式7外的图片滚动和无样式的文字滚动,图片样式7可以用属性radius,anglePerItem来改变两个cell的间隔
@property (nonatomic, assign) CGFloat space;
/// collectionView展示cell的数量,以最中间的cell开始和其两边的cell的数量加起来的数量,由于两边对称,所以数量为单数,如果设置为4,则展示3个,中间一个cell和两边各一个,数量必须为大于0,默认5
@property (nonatomic, assign) NSInteger visibleCount;
图片滚动样式
- LVImageScrollNone:普通,无滚动特效
- LVImageScrollCardOne:样式1,随滑动缩放的特效,控件中间的cell宽高度不变,两侧的cell缩放,默认两个cell间缩放比80%,以cell的中心进行缩放,可通过属性zoomScale改变缩放比
- LVImageScrollCardTwo:样式2,随滑动缩放的特效,控件中间的cell宽高度不变,中间两侧的cell缩放,默认两个cell间缩放比80%,水平滚动缩小高度,竖直滚动缩小宽度,不过每个cell的间隔相同,默认为0,可通过space属性修改间隔,zoomScale改变缩放比
- LVImageScrollCardThird:样式3,随滑动缩放的特效,控件中间的cell宽高度不变,两侧的cell的宽高都一样,水平滚动缩小高度,竖直滚动缩小宽度,可通过space属性修改间隔,zoomScale改变缩放比
- LVImageScrollCardFour:样式4,随滑动缩放的特效,控件中间的cell宽高度不变,两侧的cell的宽高都一样,水平滚动缩小高度,竖直滚动缩小宽度,和样式3不同的是底部或左边对齐控件中间的cell,即控件中间两侧cell的center和控件中间的cell的center不一样,美团选电影票的页面和这个类似,可通过space属性修改间隔,zoomScale改变缩放比
- LVImageScrollCardFive:样式5,随滑动旋转的特效,以cell为中心旋转,控件中间的cell角度不变,默认两个cell之间旋转度数为M_PI_4,也就是45°,可通过space属性修改间隔,rotationAngle改变旋转角度,rotationAngle正负值会影响角度
- LVImageScrollCardSix:样式6,三维特效,随滑动图片绕x轴旋转特效,默认旋转的度数M_PI_4,也就是45°,可通过space属性修改间隔,rotationAngle改变旋转角度,rotationAngle正负值会影响角度
- LVImageScrollCardSeven:样式7,轮盘旋转,随滑动绕控件外外的某点旋转,这个点就是瞄点,位置为anchorPoint,cell的center到这个点的连线是半径,默认500,可通过radius属性修改,半径的夹角是angle,默认M_PI/12,也就是45°
图片滚动样式效果展示
水平效果 | 竖直效果 | 样式 |
---|---|---|
无样式 | ||
样式1 | ||
添加30像素的间隙 | 样式2 | |
样式3 | ||
样式4 | ||
原始 添加间隔,调整view的高度 | 样式5 | |
样式6 | ||
样式7 |
图片属性
/// 占位图,用于网络未加载到图片时
@property (nonatomic, strong) UIImage *placeholderImage;
/// 缩放比,样式1,2,3,4中的缩放比例调节,默认是0.8
@property (nonatomic, assign) CGFloat zoomScale;
/// 样式5,6的旋转弧度,默认M_PI_4,也就是度数为45°
@property (nonatomic, assign) CGFloat rotationAngle;
/// 图片滚动的样式, 默认无样式
@property (nonatomic, assign) LVImageScrollType imageScrollType;
/// 轮播图的ContentMode
@property (nonatomic, assign) UIViewContentMode imageContentMode;
/// 轮播图样式7的半径,表示cell的中心到圆心的距离,默认500
@property (nonatomic, assign) CGFloat radius;
/// 轮播图样式7的夹角,表示两个cell的夹角,默认M_PI/12
@property (nonatomic, assign) CGFloat anglePerItem;
文字滚动样式
- LVTextScrollModeNone:无样式,轮播模式
- LVTextScrollModeOne:从控件内开始连续滚动,如果文字数组是多个元素,水平滚动轮播的文字会通过空格拼接起来,竖直滚动会通过换行拼接起来
- LVTextScrollModeTwo:从控件内开始间断滚动
- LVTextScrollModeThird:从控件外开始滚动
- LVTextScrollModeFour:往返滚动,如果文字数组是多个元素,水平滚动轮播的文字会通过空格拼接起来,竖直滚动会通过换行拼接起来
文字滚动样式效果展示
水平效果 | 竖直效果 | 样式 |
---|---|---|
无样式 | ||
一条数据 多条数据 | 一条数据 多条数据 | 样式1 |
样式2 | ||
样式3 | ||
文字宽度比控件宽度短 文字宽度比控件宽度长 | 文字高度比控件高度短 文字高度比控件高度长 | 样式4 |
文字属性
/// 字体大小
@property (nonatomic, copy) UIFont *textFont;
/// 字体颜色
@property (nonatomic, copy) UIColor * textColor;
/// 背景颜色
@property (nonatomic, strong) UIColor *textBackgroundColor;
/// 文字label的高度,只有在文字滚动类型是图片加底部文字才可以有效
@property (nonatomic, assign) CGFloat textLabelHeight;
/// 滚动文字样式
@property (nonatomic, assign) LVTextScrollMode textScrollMode;
@property (nonatomic, assign) NSTextAlignment textLabelTextAlignment;
/// 适用于图片和无样式的文字滚动,有样式的文字滚动为0
@property (nonatomic, assign) NSInteger textLabelNumberOfLines;
PageControl
只有是滚动类型是LVImageScroll,水平滚动才展示,其他不展示,也可以选择隐藏.
PageControl位置
- LVPageControlCenter:中间,默认
- LVPageControlLeft:底部左边
- LVPageControlRight:底部右边
PageControl类型
- LVPageContolStyleClassic:
系统自带经典样式
,大小形状固定,默认系统的大小7 - LVPageContolStyleCustom:
自定义PageControl
,默认此样式,可以通过下面的属性定义缩放,旋转动画,也可以设置形状大小等等
PageControl属性
/// 是否显示分页控件,默认显示,不过只有是图片的水平滚动才支持显示,其他不显示
@property (nonatomic, assign) BOOL showPageControl;
/// 分页控件的样式
@property (nonatomic, assign) LVPageControlStyle pageControlStyle;
/// 分页控件位置,默认居中
@property (nonatomic, assign) LVPageControlAliment pageControlAliment;
/// 当前分页控件小圆标颜色,默认白色
@property (nonatomic, strong) UIColor *currentPageDotColor;
/// 其他分页控件小圆标颜色,默认灰色
@property (nonatomic, strong) UIColor *pageDotColor;
/// 分页控件距离轮播图的底部间距的偏移量,默认为10
@property (nonatomic, assign) CGFloat pageControlBottomOffset;
/// 分页控件距离轮播图左或右边间距的偏移量,具体看pageControlAliment的类型,当pageControlAliment为LVAlimentCenter,则大小为self的宽减去分页控件的宽除2,这时的大小不可改变,若为LVAlimentLeft,则表示距离左边距的偏移量,默认为10;反正也一样
@property (nonatomic, assign) CGFloat pageControlMarginOffset;
自定义PageControl的属性
/// 分页控件自定义样式中当前点旋转的角度,默认为0不旋转,设置为M_PI_4就是正向滚动顺时针旋转45°,而逆向滚动时就会逆时针旋转45°,反之设置为-M_PI_4,就是正向滚动时逆时针旋转45°,而逆向滚动时就会顺时针旋转45°
@property (nonatomic, assign) CGFloat pageControlRotationAngle;
/// 分页控件自定义样式中小点的缩放功能,该属性表示当前点较其他点的大小,比如设置为2,就是当前点是其他点的两倍大小,默认为1
@property (nonatomic, assign) CGFloat pageControlZoomSize;
/// 图标阴影颜色,默认透明
@property (nonatomic, strong) UIColor *pageControlBorderColor;
/// 图标阴影大小,默认为0
@property (nonatomic, assign) CGFloat pageControlBorderWidth;
/// 图标圆角,默认g宽高的一半,就是个圆的,想要看旋转效果设置为0,正方形的时候就能看到旋转的变化,宽高必须相等
@property (nonatomic, assign) CGFloat pageControlCornerRadius;
/// 分页控件小圆标大小,默认宽高8
@property (nonatomic, assign) CGSize pageControlDotSize;
/// 两点的间距,默认8
@property (nonatomic, assign) CGFloat spacingBetweenDots;
/// 当前分页控件小圆标透明度,默认1
@property (nonatomic, assign) CGFloat currentPageDotAlpha;
/// 其他分页控件小圆标透明度,默认1
@property (nonatomic, assign) CGFloat pageDotAlpha;
/// 当前分页控件小圆标图片,默认为空,如果设置优先显示,上面的7个自定义样式分页控件属性则无效,注意currentPageDotImage,pageDotImage必须同时为空或者同时不为空
@property (nonatomic, strong) UIImage *currentPageDotImage;
/// 其他分页控件小圆标图片,默认为空,如果设置优先显示,上面的7个自定义样式分页控件属性则无效
@property (nonatomic, strong) UIImage *pageDotImage;
共有方法
/// 启动定时器
- (void)move;
/// 停止计时器
- (void)stop;
/// 滚动手势禁用,只适用于除图片滚动,无样式的文字滚动,因为有样式的图片滚动默认禁止手势
- (void)disableScrollGesture;
/// 可以调用此方法手动控制滚动到哪一个index
- (void)makeScrollViewScrollToIndex:(NSInteger)index;
代理方法
/// 点击回调,文字滚动样式1和4回调都是0
- (void)cycleScrollView:(LVCycleScrollView *)cycleScrollView didSelectItemAtIndex:(NSInteger)index;
/// 滚动回调,文字滚动样式1和4回调都是0
- (void)cycleScrollView:(LVCycleScrollView *)cycleScrollView didScrollToIndex:(NSInteger)index;
最后
Demo
第一次搞第三方库,可能还存在有bug,有问题发我邮箱2387356991@qq.com,觉得还可以的兄弟麻烦给小弟一个✨✨,感激不尽
网友评论