iOS UI篇——轮播图Banner图片动图混合无限轮播

KJBannerView

• 介绍一下自己之前写的无限轮播图库，无限自动循环滚动，大家有什么需求可以给我留言，持续更新中…

Demo地址：KJBannerViewDemo

功能介绍

KJBannerView 是一款轮播Banner，支持动态图和网图混播
1、缩放无限自动循环滚动 √
2、支持四种方向滚动，从左往右、从右往左、从上往下、从下往上 √
3、自定义继承，定制不同样式，详情使用请见Demo √
4、支持网络动态图和网络图片和本地图片混合轮播 √
5、支持在Storyboard和Xib中创建并配置其属性 √
6、提供多种分页控件PageControl显示 √
7、自带缓存加载，内部封装网图下载缓存工具 √

---

使用方法

pod 'KJBannerView' # 轮播图 

API & Property

NS_ASSUME_NONNULL_BEGIN
IB_DESIGNABLE
@interface KJBannerView : UIView
/// 代理方法
@property (nonatomic,weak) id<KJBannerViewDelegate> delegate;
@property (nonatomic,weak) id<KJBannerViewDataSource> dataSource;
/// Block回调
@property (nonatomic,readwrite,copy) void(^kSelectBlock)(KJBannerView *banner, NSInteger idx);
@property (nonatomic,readwrite,copy) void(^kScrollBlock)(KJBannerView *banner, NSInteger idx);
/// 暂停计时器滚动处理，备注：在viewDidDisappear当中实现
- (void)kj_pauseTimer;
/// 继续计时器滚动，备注：在viewDidAppear当中实现
- (void)kj_repauseTimer;
/// 滚动到指定位置，备注：需要在设置数据源之后调用
- (void)kj_makeScrollToIndex:(NSInteger)index;
/// 使用Masonry自动布局，请在设置布局之后调用该方法
- (void)kj_useMasonry;

//************************ 数据源API ************************
/// 数据源
@property (nonatomic,strong) NSArray<NSString*>*imageDatas;
/// 自动滚动间隔时间，默认2s
@property (nonatomic,assign) IBInspectable CGFloat autoTime;
/// 是否无线循环，默认yes
@property (nonatomic,assign) IBInspectable BOOL infiniteLoop;
/// 是否自动滑动，默认yes
@property (nonatomic,assign) IBInspectable BOOL autoScroll;
/// 是否缩放，默认不缩放
@property (nonatomic,assign) IBInspectable BOOL isZoom;
/// cell宽度，左右宽度
@property (nonatomic,assign) IBInspectable CGFloat itemWidth;
/// cell间距，默认为0
@property (nonatomic,assign) IBInspectable CGFloat itemSpace;
/// 是否显示分页控件，默认yes
@property (nonatomic,assign) IBInspectable BOOL showPageControl;
/// 滚动方向，默认从右到左
@property (nonatomic,assign) KJBannerViewRollDirectionType rollType;
/// 分页控制器
@property (nonatomic,strong,readonly) KJPageView *pageControl;

//************************ 废弃属性方法 *****************************/
/// 支持自定义Cell，自定义Cell需继承自 KJBannerViewCell
@property (nonatomic,strong) Class itemClass DEPRECATED_MSG_ATTRIBUTE("Please use dataSource [kj_BannerView:BannerViewCell:ImageDatas:Index:]");

@end

//******************** 自带KJBannerViewCell可设置属性 ********************
@interface KJBannerView (KJBannerViewCell)
/// 是否裁剪，默认NO
@property (nonatomic,assign) IBInspectable BOOL bannerScale;
/// imagView圆角，默认为0px
@property (nonatomic,assign) IBInspectable CGFloat bannerRadius;
/// cell的占位图，用于网络未加载到图片时
@property (nonatomic,strong) IBInspectable UIImage *placeholderImage;
/// 轮播图片的ContentMode，默认为 UIViewContentModeScaleToFill
@property (nonatomic,assign) UIViewContentMode bannerContentMode;
/// 图片的样式，默认 KJBannerViewImageTypeNetIamge 网络图片
@property (nonatomic,assign) KJBannerViewImageType imageType;
/// 是否采用动态图缓存，默认NO
@property (nonatomic,assign) BOOL openGIFCache;

@end

NS_ASSUME_NONNULL_END

KJBannerView类介绍

Class	功能区
KJBannerView	轮播图主控件
KJPageView	自定义分页控件
KJBannerViewFlowLayout	Cell缩放管理
KJBannerViewCell	基类，自定义需继承该Cell
KJBannerDatasInfo	自带BannerViewCell数据模型
KJLoadImageView	不依赖三方网络加载图片显示控件
KJBannerTool	工具方法
KJBannerViewType	枚举文件夹
KJBannerViewProtocol	委托协议相关
NSTimer+KJSolve	计时器分类
UIImage+KJBannerGIF	动态图分类
KJBannerViewCacheManager	缓存工具
KJBannerViewDownloader	网络请求工具
KJBannerViewLoadManager	网图下载工具

支持Xib快捷设置属性

效果图

下载测试效果图，图片采用信号量方式获取

用法示例

Masonry自动布局

使用Masonry自动布局，请在设置布局之后调用该方法kj_useMasonry

- (void)setMasonry{
    self.banner2 = [[KJBannerView alloc]init];
    self.banner2.autoTime = 2;
    self.banner2.isZoom = YES;
    self.banner2.itemSpace = -10;
    self.banner2.itemWidth = 280;
    self.banner2.delegate = self;
    self.banner2.dataSource = self;
    self.banner2.imageType = KJBannerViewImageTypeMix;
    self.banner2.pageControl.pageType = PageControlStyleSizeDot;
    self.banner2.pageControl.displayType = KJPageControlDisplayTypeRight;
    self.banner2.pageControl.backgroundColor = [UIColor.blackColor colorWithAlphaComponent:0.5];
    [self.backView addSubview:self.banner2];
    [self.banner2 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.left.right.bottom.mas_equalTo(0);
    }];
    [self.banner2 kj_useMasonry];
    
    self.banner2.imageDatas = self.temp;
}

Xib布局

- (void)setXib{
    self.banner.delegate = self;
    self.banner.pageControl.pageType = PageControlStyleRectangle;
    self.banner.pageControl.selectColor = UIColor.greenColor;
    self.banner.pageControl.dotwidth = 20;
    self.banner.pageControl.dotheight = 2;
    self.banner.pageControl.backgroundColor = [UIColor.blackColor colorWithAlphaComponent:0.5];
    self.banner.pageControl.displayType = KJPageControlDisplayTypeLeft;
    self.banner.imageType = KJBannerViewImageTypeMix;
    self.banner.bannerScale = YES;
    self.banner.rollType = KJBannerViewRollDirectionTypeBottomToTop;
    self.banner.bannerContentMode = UIViewContentModeScaleAspectFill;
    self.banner.imageDatas = @[tu2,gif2,@"IMG_0139",@"tu3"];
    [self.banner kj_makeScrollToIndex:1];
}

委托自定义控件

#pragma mark - KJBannerViewDataSource
- (UIView*)kj_BannerView:(KJBannerView*)banner BannerViewCell:(KJBannerViewCell*)bannercell ImageDatas:(NSArray*)imageDatas Index:(NSInteger)index{
    KJBannerModel *model = imageDatas[index];
    CGRect rect = {0, 0, 100, 20};
    UILabel *label = [[UILabel alloc]initWithFrame:rect];
    if (index == 0) {
        label.text = @"定制不同的控件";
        label.frame = CGRectMake(0, 0, bannercell.contentView.frame.size.width, 40);
        label.font = [UIFont boldSystemFontOfSize:35];
        label.textColor = UIColor.greenColor;
        label.textAlignment = NSTextAlignmentCenter;
    }
    KJLoadImageView *imageView = [[KJLoadImageView alloc]initWithFrame:bannercell.contentView.bounds];
    imageView.kj_isScale = YES;
    [imageView kj_setImageWithURLString:model.customImageUrl Placeholder:[UIImage imageNamed:@"tu3"]];
    [imageView addSubview:label];
    return imageView;
}

继承方式自定义控件

- (void)setText{
    self.banner3.showPageControl = NO;
#pragma clang diagnostic push
#pragma clang diagnostic ignored "-Wdeprecated-declarations"
    self.banner3.itemClass = [KJCollectionViewCell class];
#pragma clang diagnostic pop
    self.banner3.rollType = KJBannerViewRollDirectionTypeBottomToTop;
    self.banner3.imageDatas = @[@"测试文本滚动",@"觉得好用请给我点个星",@"有什么问题也可以联系我",@"邮箱: ykj310@126.com"];
}

自定义Cell使用

- (void)setModel:(NSObject*)model{
    self.label.text = (NSString*)model;
}

轮播图介绍就到此完毕，后面有相关再补充，写文章不容易，还请点个**小星星**传送门