Gif 图效果如图所示:
- 我所用的 Gif 图工具是 "licecap"大家可以上百度查询,有下载地址
- 知道你们懒......我现在将我的百度网盘下载链接分享给大家!伸手党们~尽情的蹂躏我吧! ! !
licecap下载地址:
https://pan.baidu.com/s/1pKYspAF
录制视频.gif
bundle 栏
Snip20161209_21.png
应用collectionView 的高级封装"广告轮播图"代码如下所示分享给有需要的小伙伴儿们---热爱开源
ViewController.h
#import
@interface MDLoopView : UICollectionView
- (instancetype)initWithURLs:(NSArray *)urls ;
@end
ViewController.m
#import "ViewController.h"
#import "MDLoopView.h"
@interface ViewController ()
@end
@implementation ViewController {
//把定义成员变量写在这里:
//Xcode 泛型:
//表示NSArray 里保存的所有的数据类型都是 NSURL 类型;
NSArray *_urls ;
}
- (void)viewDidLoad {
[super viewDidLoad];
//定义方法:
//加载数据:
[self loadData] ;
// NSLog(@"%@" , _urls) ;
MDLoopView *loopView = [[MDLoopView alloc] initWithURLs:_urls] ;
//loopView 的尺寸放到 loopView 里,不需要控制器知道!
loopView.frame = CGRectMake(20, 20, self.view.bounds.size.width - 40, 200) ;
[self.view addSubview:loopView] ;
}
#pragma mark - loadData
- (void)loadData {
NSMutableArray *mutableArray = [NSMutableArray array] ;
for (int i = 0; i < 6; i++) {
NSString *fileName = [NSString stringWithFormat:@"%zd.jpg" , i] ;
NSURL *url = [[NSBundle mainBundle] URLForResource:fileName withExtension:nil] ;
[mutableArray addObject:url] ;
}
//让该数组不可变:
_urls = mutableArray.copy ;
}
@end
MDLoopView.h
#import
@interface MDLoopView : UICollectionView
- (instancetype)initWithURLs:(NSArray *)urls ;
@end
MDLoopView.m
#import "MDLoopView.h"
#import "MDLoopViewLayout.h"
#import "MDLoopViewCell.h"
//定义常量:
NSString *const MDLoopViewCellID = @"MDLoopViewCellID" ;
@interface MDLoopView ()
@end
//独立的处理轮播器相关的所有代码逻辑!
@implementation MDLoopView {
//这里没有用懒加载的方法而是用成员变量的方法:
NSArray *_urls ;
}
- (instancetype)initWithURLs:(NSArray *)urls {
//UICollectionViewFlowLayout:一定要加 "flow"否则数据源进不去:
//UICollectionViewFlowLayout 简称为 "流水布局" ;
//此时此刻 self.bounds.size.width = 0 ;
self = [super initWithFrame:CGRectZero collectionViewLayout:[[MDLoopViewLayout alloc] init]] ;
if (self) {
_urls = urls ;
//设置数据源代理"
self.dataSource = self ;
//监听滚动协议:
self.delegate = self ;
//注册 cell:
[self registerClass:[MDLoopViewCell class] forCellWithReuseIdentifier:MDLoopViewCellID] ;
//初始显示第二组:
//在开发中什么时候使用过多线程?!除了网络请求 AFNetworking 的时候:
//主队列:
//1.安排任务在主线程上执行,如果主线程当前有任务,主队列暂时不调度任务!
//如果我不把滚动任务放到多线程里,那样的话会先执行本行,然后在执行数据源方法,这样是不行的!所以应该把滚动方法放入主线程异步执行,等到数据源方法执行完毕之后再加进去
//本方法在开发中非常重要!!!
/**
* 主队列异步的目的就是等所有的方法执行完,主线程空闲出来之后再做本任务!它规定了执行的次序
*/
//此时打个断点就会发现一个问题,断点会先走下面的数据源方法,再回到这里执行本方法:
dispatch_async(dispatch_get_main_queue(), ^{
NSIndexPath *indexPath = [NSIndexPath indexPathForItem:urls.count inSection:0] ;
[self scrollToItemAtIndexPath:indexPath atScrollPosition:UICollectionViewScrollPositionLeft animated:YES] ;
}) ;
}
return self;
}
#pragma mark -
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
//这里乘以一个很大的值,用户滚动会卡顿的现象就会在很久之后才会触发:这样基本上正常操作的用户不会有卡顿的情况!
return _urls.count * 100 ;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
//这里不要用"多态"编译时候还是要用子类的指针,否则不提示:
MDLoopViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:MDLoopViewCellID forIndexPath:indexPath] ;
//arc4random_uniform(256) / 255.0不要写arc4random_uniform(255) / 255.0,否则失去白色这个颜色:
cell.backgroundColor = [UIColor colorWithRed:arc4random_uniform(256) / 255.0 green:arc4random_uniform(256) / 255.0 blue:arc4random_uniform(256) / 255.0 alpha:1] ;
//点语法在左侧,会跳转 cell 的 url 属性的 setter 方法:
//对 _urls 取模,这样就不会造成数组越界了!--> [indexPath.item % _urls.count] ;
cell.url = _urls[indexPath.item % _urls.count] ;
return cell ;
}
#pragma mark -
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
//1.获取当前停止的页面:
NSInteger offset = scrollView.contentOffset.x / scrollView.bounds.size.width ;
//2.d第 0 页,跳转到第二组的第 0 页:
//最后一页跳转到第 0 组的最后一页:
//[self numberOfItemsInSection:0] - 1-->这里是因为 item 是从1开始计算的!!!
if (offset == 0 || offset == [self numberOfItemsInSection:0] - 1) {
NSLog(@"%zd" ,offset) ;
/**
* 定义了一组图片,并且拷贝了2份!当滑到第一组的第 0 页的时候我就让它变成(立即跳转到)第二组的第 0 页 ,当滑动到第二组的最后一页的时候我就让它变成(立即跳转到)第一组的最后一页!思路就是这样!!!
*
*/
//第 0 页:
//如果当前停在第 0 页:
if (offset == 0) {
//就让当前页码跳转到第二组的第 0 页,恰恰就是 _urls.count,因为页码从 0 起始:
offset = _urls.count ;
}
//否则如果当前停在了最后一页:
else {
//就让当前页码跳转到第0组的最后一页(也就是第5页(注意是从第0页起算的!)):
offset = _urls.count - 1 ;
}
// scrollView 的内容偏移量 = 当前页码 * scrollView 视图的宽度:
scrollView.contentOffset = CGPointMake(offset * scrollView.bounds.size.width, 0) ;
}
}
@end
MDLoopViewLayout.h
#import
//继承自 "流水布局"~UICollectionViewFlowLayout
@interface MDLoopViewLayout : UICollectionViewFlowLayout
@end
MDLoopViewLayout.m
#import "MDLoopViewLayout.h"
//在 collectionView 的第一次布局的时候被调用,此时,collectionView 的 frame 已经设置完毕
@implementation MDLoopViewLayout
#pragma mark - 准备布局
//所以:直接利用 collectionView 的属性设置布局:
- (void)prepareLayout {
[super prepareLayout] ;
NSLog(@"%@",self.collectionView) ;
//让格子大小与我设定的 collectionView 的大小一样:
self.itemSize = self.collectionView.bounds.size ;
//行间距
self.minimumLineSpacing = 0 ;
//格子间距:
self.minimumInteritemSpacing = 0 ;
//设置水平滚动:
self.scrollDirection = UICollectionViewScrollDirectionHorizontal ;
//取消水平滑动指示条:
self.collectionView.showsVerticalScrollIndicator = NO ;
//取消竖直滑动指示条:
self.collectionView.showsHorizontalScrollIndicator = NO ;
//取消图片轮播的弹簧效果:
self.collectionView.bounces = NO ;
//分页处理:
self.collectionView.pagingEnabled = YES ;
}
@end
MDLoopViewCell.h
#import
@interface MDLoopViewCell : UICollectionViewCell
/**
* cell 中的一个属性:它用来存保存图像的 url 路径:
*/
@property (nonatomic) NSURL *url ;
@end
MDLoopViewCell.m
#import "MDLoopViewCell.h"
@implementation MDLoopViewCell {
UIImageView *_imageView ;
}
//collectionView 的 frame 大小是根据之前的 layout 已经确定好的!
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
//布局准备完成之后才会走到这里,所以这个 frame 是有值的!
NSLog(@"%@" ,NSStringFromCGRect(frame)) ;
_imageView = [[UIImageView alloc] initWithFrame:self.bounds] ;
//将图像视图添加到 cell 的内容视图上:
[self.contentView addSubview:_imageView] ;
_imageView.backgroundColor = [UIColor redColor] ;
}
return self;
}
-(void)setUrl:(NSURL *)url {
_url = url ;
/**
* 网络上的数据都是二进制数据,显示图像的时候无法 imageWithURL...... 所以用 NSData!!!
* JSON--> 序列化 ; 图像-->转图像;
*/
//1.根据 url 获取二进制数据:
NSData *data = [NSData dataWithContentsOfURL:url] ;
//2.数据转图像:
UIImage *image = [UIImage imageWithData:data] ;
//3.让 image 赋值给_ imageView 的 image 属性!!!让_ imageView 的属性保存我创建的这个包含图像URL 的 image:
_imageView.image = image ;
//[_imageView setImage: image] ;
}
@end