UICollectionView详解四:焦点图

本人录制技术视频地址:https://edu.csdn.net/lecturer/1899 欢迎观看。

前三节中,我已经对UICollectionView的基本用法进行了详细的介绍。这一节就UICollectionView的实际使用 --- "焦点图" 进行剖析说明。废话不多说,先看最终实现效果图:


需求说明:

1.准备了五张图片

2.定时滚动显示

3.右下角的分页指示器也实时切换

4.可以手动拖拽图片滚动


为什么选择UICollectionView?

1.UICollectionView帮我们管理好了循环利用cell的问题,不管有多少图片需要滚动,内存中只需要两个cell管理就好了。

2.UICollectionView有Section的概念,可以准备很多组,但又不需要准备重复的图片来完成无限滚动。

3.UICollectionView有scrollToItemAtIndexPath方法,来实现切换图片动画的流畅过度。


大致代码如下:

1.准备数据模型(上图中的图片及标题)

@interface LFAdvertise : NSObject
@property (nonatomic,copy) NSString *title;
@property (nonatomic,copy) NSString *url;
@end

2.自定义UICollectionViewCell,用来显示模型数据

@class LFAdvertise;

@interface LFAdvertiseCell : UICollectionViewCell
@property (weak, nonatomic) IBOutlet UILabel *adTitle;
@property (weak, nonatomic) IBOutlet UIImageView *adImage;

@property (nonatomic,strong) LFAdvertise *advertise;

@end

@implementation LFAdvertiseCell

- (void)setAdvertise:(LFAdvertise *)advertise {
    self.adTitle.text = [NSString stringWithFormat:@"  %@",advertise.title];
    self.adImage.image = [UIImage imageNamed:advertise.url];
}

@end

3.主界面代码

1) 定义变量部分: kNumberofSection 定义UICollectionView有多少组;ads就是LFAdvertise 数据模型的集合;timer就是定时执行滚动的定时器; identifer 是UICollectionView循环利用cell的标示符。

#define kNumberofSections 100

@interface ViewController ()<UICollectionViewDataSource,UICollectionViewDelegate>
@property (nonatomic,strong) NSArray *ads;
@property (nonatomic,strong) NSTimer *timer;
@end

static NSString *const identifer = @"news";

2) 获取数据源

-(NSArray *)ads {
    if (!_ads) {
        _ads = [LFAdvertise objectArrayWithFilename:@"ad.plist"];
        // 根据模型数据获得总有有多少页
        self.pageControl.numberOfPages = _ads.count;
    }
    return _ads;
}

3) 初始化UICollectionView,为什么将kNumberofSection定义为100? 因为防止用户疯狂的滑动图片看下一张,如果kNumberofSection定义的很小的话,有可能后面就没有图片了。但你有可能有疑问?就算定义为100,也有可能过很长时间后,后面也没有图片了,这个细节操作,我们可以在定时器中处理。

- (void)initCollectionView {
    // 1. 注册LFAdvertiseCell
    [self.collectionView registerNib:[UINib nibWithNibName:@"LFAdvertiseCell" bundle:nil] forCellWithReuseIdentifier:identifer];
    
    // 2. 默认显示在第几组(正中间:假设有100组,默认显示在第50组)
    [self.collectionView scrollToItemAtIndexPath:[NSIndexPath indexPathForItem:0 inSection:kNumberofSections / 2] atScrollPosition:UICollectionViewScrollPositionLeft animated:NO];
}

4) 定时器定时滚动图片

- (void)addTimer {
    NSTimer *timer = [NSTimer scheduledTimerWithTimeInterval:1.5 target:self selector:@selector(unlimitedScroll) userInfo:nil repeats:YES];
    self.timer = timer;
    [[NSRunLoop mainRunLoop] addTimer:timer forMode:NSDefaultRunLoopMode];
}

// 这里就实现了无限滚动的效果
- (void)unlimitedScroll {
    // 1. 获取正在界面上显示的item项
    NSIndexPath *indexPath = [[self.collectionView indexPathsForVisibleItems] lastObject];
    // 2. 每次进来就让用户看中间那组的信息,立刻看到,没有动画(第50组)
    NSIndexPath *currentIndexPathReset = [NSIndexPath indexPathForItem:indexPath.item inSection:kNumberofSections / 2];
    [self.collectionView scrollToItemAtIndexPath:currentIndexPathReset atScrollPosition:UICollectionViewScrollPositionLeft animated:NO];
    
    // 3. 获取下一张图片的信息
    NSInteger nextItem = currentIndexPathReset.item + 1;
    NSInteger nextSection = currentIndexPathReset.section;
    
    if(nextItem == self.ads.count){
        nextItem = 0;
        nextSection++;
    }
    
    NSIndexPath *nextIndexPath = [NSIndexPath indexPathForItem:nextItem inSection:nextSection];
    
    [self.collectionView scrollToItemAtIndexPath:nextIndexPath atScrollPosition:UICollectionViewScrollPositionLeft animated:YES];
    
}

关键代码有两句:

I)  每次定时器执行下面代码的时候,就将图片无动画的拖拽到中间那组的图片位置,注意scrollToItemAtIndexPath方法中,animated的参数值为NO。这里就可以解释为什么可以无限滚动了。假设图片组已经滚动到80组了,下次定时器再执行的时候,会先执行下面的代码,将图片组拉回到第50组对应图片的位置,由于这次操作是无动画的,所以用户根本察觉不出来。

    // 2. 每次进来就让用户看中间那组的信息,立刻看到,没有动画(第50组)
    NSIndexPath *currentIndexPathReset = [NSIndexPath indexPathForItem:indexPath.item inSection:kNumberofSections / 2];
    [self.collectionView scrollToItemAtIndexPath:currentIndexPathReset atScrollPosition:UICollectionViewScrollPositionLeft animated:NO];


II) 然后最后两句代码,计算出当前图片的下一张图片的位置,再动画执行过去,看起来就是无限滚动了。注意scrollToItemAtIndexPath方法中,animated的参数值为YES。

NSIndexPath *nextIndexPath = [NSIndexPath indexPathForItem:nextItem inSection:nextSection];
    
    [self.collectionView scrollToItemAtIndexPath:nextIndexPath atScrollPosition:UICollectionViewScrollPositionLeft animated:YES];

5) UICollectionView的数据源方法

#pragma mark - UICollectionViewDataSource
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return self.ads.count;
}

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
    return kNumberofSections;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    LFAdvertiseCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:identifer forIndexPath:indexPath];
    
    cell.advertise = self.ads[indexPath.item];
    
    return cell;
}

6) UICollectionView父类UIScrollView的代理方法,当用户拖拽图片的时候,立刻停止定时器,当用户停止拖拽图片的时候,立刻重新启用定时器。

#pragma mark - UIScrollViewDelegate
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {
    [self removeTimer];
}

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
    [self addTimer];
}



- (void)removeTimer {
    [self.timer invalidate];
    self.timer = nil;
}

7) 停止滚动的时候,计算页码:

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    // 加0.5:因为有可能用户手动滚到一张图片的一半左右松手
    int numberofPage = (int)(scrollView.contentOffset.x / self.collectionView.frame.size.width + 0.5) % self.ads.count;
    self.pageControl.currentPage = numberofPage;
}


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

秋恨雪

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值