史上最好用的轮播图(iOS)
2017-05-04 本文已影响486人
S型身材的猪
github地址:https://github.com/SPStore/SPCarouselView
技巧:利用3张 imageView实现的轮播图
本框架功能如下:
1、支持本地图片和网络图片
2、可以设置切换图片的时间
3、可以设置是否自动轮播
4、可以设置pageControl的当前小圆点和其余小圆点的颜色
5、可以设置pageControl的位置(提供左中右3种位置)
6、可以设置是否显示pageControl
7、可以设置pageControl的当前小圆点和其余小圆点的图片
8、可以设置图片的内容模式
9、图片可以点击,并提供代理方法
10、支持autoLayout、xib和storyboard
11、支持轮播图下拉放大
下面给出一些效果图




下拉放大前后对比


.h文件代码
#import <UIKit/UIKit.h>
@class SPCarouselView;
@protocol SPCarouselViewDelegate <NSObject>
@optional
// 轮播图被点击时触发的代理方法,index为点击的图片下标
-(void)carouselView:(SPCarouselView *)carouselView clickedImageAtIndex:(NSUInteger)index;
@end
typedef NS_ENUM(NSInteger, SPPageContolPosition) {
SPPageContolPositionBottomCenter, // 底部中心
SPPageContolPositionBottomRight, // 底部右边
SPPageContolPositionBottomLeft // 底部左边
};
typedef NS_ENUM(NSInteger, SPCarouselViewImageMode) {
SPCarouselViewImageModeScaleToFill, // 默认,充满父控件
SPCarouselViewImageModeScaleAspectFit, // 按图片比例显示,少于父控件的部分会留有空白
SPCarouselViewImageModeScaleAspectFill, // 按图片比例显示,超出父控件的部分会被剪掉
SPCarouselViewImageModeCenter // 处于父控件中心,不会被拉伸,按原始大小显示
};
@interface SPCarouselView : UIView
@property(weak, nonatomic) id<SPCarouselViewDelegate>delegate;
// 提供类方法创建轮播图 这种创建方式有个局限性,那就是必须在创建时就传入数组。
/** 本地图片 */
+(SPCarouselView *)carouselScrollViewWithFrame:(CGRect)frame localImages:(NSArray<NSString *> *)localImages;
/** 网络图片 */
+(SPCarouselView *)carouselScrollViewWithFrame:(CGRect)frame urlImages:(NSArray<NSString *> *)urlImages;
// 为了消除类方法创建的局限性,提供下面两个属性,轮播图的图片数组。适用于创建时用alloc init,然后在以后的某个时刻传入数组。
// 本地图片
@property(strong, nonatomic) NSArray<NSString *> *localImages;
// 网络图片
@property(strong, nonatomic) NSArray<NSString *> *urlImages;
// 图片自动切换间隔时间, 默认设置为 2s
@property(assign ,nonatomic) NSTimeInterval duration;
// 是否自动轮播,默认为YES
@property (assign ,nonatomic, getter=isAutoScroll) BOOL autoScroll;
// 当前小圆点的颜色
@property (strong, nonatomic) UIColor *currentPageColor;
// 其余小圆点的颜色
@property (strong, nonatomic) UIColor *pageColor;
// pageControl的位置,分左,中,右
@property (assign, nonatomic) SPPageContolPosition pageControlPosition;
// 是否显示pageControl
@property (nonatomic, assign, getter=isShowPageControl) BOOL showPageControl;
// 轮播图上的图片显示模式
@property (assign, nonatomic) SPCarouselViewImageMode imageMode;
/** 设置小圆点的图片 */
- (void)setPageImage:(UIImage *)image currentPageImage:(UIImage *)currentImage;
@end
具体实现请到github中下载源码。github地址:https://github.com/SPStore/SPCarouselView