美文网首页iOS技术点iOS动画效果
史上最好用的轮播图(iOS)

史上最好用的轮播图(iOS)

作者: S型身材的猪 | 来源:发表于2017-05-04 11:56 被阅读486次

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、支持轮播图下拉放大

下面给出一些效果图


center.jpg right.jpg left.jpg img.jpg

下拉放大前后对比

origin.jpg enlarge.jpg

.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

相关文章

网友评论

  • Thinkdifferents:page始终不显示, 很尴尬
  • 汾酒iOSer:所有图片都能从左往右拖动轮播,但是从右往左拖动就有的图片不能实现了!
    汾酒iOSer:@S型身材的猪 好,研究下!:+1: 最近项目中用到了一个你写的东西,HVScrollView这个东西,感谢!:clap: 修改了一些东西,还挺好的,了解了基本思路,自己还没有完全消化,心里还是有点虚:sweat:
    S型身材的猪:我给你推荐这个框架http://www.code4app.com/thread-12386-1-1.html ,这个框架比我写的好,而且支持gif
  • 黄卷青灯空离别:page 不显示是什么原因。
    mumumayday:就是不显示。。。
    黄卷青灯空离别:@S型身材的猪 不对。showPageControl=YES 也没显示
    S型身材的猪:新版本默认不显示,我一下没注意,回头改成默认显示。你要显示就设置属性showPageControl=YES

本文标题:史上最好用的轮播图(iOS)

本文链接:https://www.haomeiwen.com/subject/yovrtxtx.html