iOS技术点iOS动画效果

史上最好用的轮播图(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、支持轮播图下拉放大

下面给出一些效果图


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

上一篇 下一篇

猜你喜欢

热点阅读