iOS 轮播图缩放动态图和网图混播

简介: iOS 轮播图缩放动态图和网图混播

KJBannerView


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


Demo地址:KJBannerViewDemo


1.png


功能介绍


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快捷设置属性

1.png


效果图

1.png


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

1.png


用法示例


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;
}

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

相关文章
|
7月前
|
iOS开发
技术好文:xcode动态图,ios实现动态图,iosgif,暂停和继续播放
技术好文:xcode动态图,ios实现动态图,iosgif,暂停和继续播放
69 1
|
iOS开发
iOS 特价秒杀(轮播图内嵌倒计时)
iOS 特价秒杀(轮播图内嵌倒计时)
167 0
|
Android开发 iOS开发 开发者
iOS中播放gif动态图的方式探讨
iOS中播放gif动态图的方式探讨
245 0
|
Android开发 iOS开发
|
iOS开发
iOS中 轮播图放哪最合适? 技术分享
我们知道,轮播图放在cell或collectionViewCell上会影响用户层级交互事件,并且实现起来比较麻烦,现在推出一个技术点:答题思路是:将UIScrollView放在UIView或UICollectionView或者UITableView上,将UIScrollView的y设为需要的大小...
809 0
|
2月前
|
开发框架 前端开发 Android开发
安卓与iOS开发中的跨平台策略
在移动应用开发的战场上,安卓和iOS两大阵营各据一方。随着技术的演进,跨平台开发框架成为开发者的新宠,旨在实现一次编码、多平台部署的梦想。本文将探讨跨平台开发的优势与挑战,并分享实用的开发技巧,帮助开发者在安卓和iOS的世界中游刃有余。
|
16天前
|
iOS开发 开发者 MacOS
深入探索iOS开发中的SwiftUI框架
【10月更文挑战第21天】 本文将带领读者深入了解Apple最新推出的SwiftUI框架,这一革命性的用户界面构建工具为iOS开发者提供了一种声明式、高效且直观的方式来创建复杂的用户界面。通过分析SwiftUI的核心概念、主要特性以及在实际项目中的应用示例,我们将展示如何利用SwiftUI简化UI代码,提高开发效率,并保持应用程序的高性能和响应性。无论你是iOS开发的新手还是有经验的开发者,本文都将为你提供宝贵的见解和实用的指导。
108 66
|
2天前
|
存储 监控 API
app开发之安卓Android+苹果ios打包所有权限对应解释列表【长期更新】-以及默认打包自动添加权限列表和简化后的基本打包权限列表以uniapp为例-优雅草央千澈
app开发之安卓Android+苹果ios打包所有权限对应解释列表【长期更新】-以及默认打包自动添加权限列表和简化后的基本打包权限列表以uniapp为例-优雅草央千澈
|
26天前
|
开发框架 Android开发 iOS开发
安卓与iOS开发中的跨平台策略:一次编码,多平台部署
在移动应用开发的广阔天地中,安卓和iOS两大阵营各占一方。随着技术的发展,跨平台开发框架应运而生,它们承诺着“一次编码,到处运行”的便捷。本文将深入探讨跨平台开发的现状、挑战以及未来趋势,同时通过代码示例揭示跨平台工具的实际运用。
|
30天前
|
Java 调度 Android开发
安卓与iOS开发中的线程管理差异解析
在移动应用开发的广阔天地中,安卓和iOS两大平台各自拥有独特的魅力。如同东西方文化的差异,它们在处理多线程任务时也展现出不同的哲学。本文将带你穿梭于这两个平台之间,比较它们在线程管理上的核心理念、实现方式及性能考量,助你成为跨平台的编程高手。