iOS开发学习之无限滚动UICollectionView和BUG解决措施_uicollectionview 水平滑动 消失一个item

(一) 无限滚动之UICollectionView

您好、

平时我们经常在图片浏览器中会翻看一些图片，对于这会滚动的效果实现，我们第一个直觉会想到的UIscrollview。首先我们会考虑到View的一些循环利用，一般情况下会创建两到三个View去实现它的来回的切换滚动。

不过今天虾米没用到这种方法。虾米用的是UICollectionView。

那下面 小虾米通过小作业来实现无限滚动，如果当中有什么不好的或者是需要改善的地方，请告诉我您的建议和意见。同时也可以联系虾米。

我们私下可以交流交流。。。。xieixe！！

自动滚动大致意图：

虾米先把大体需要用到的类都放在每一个对应位置上，方便以后查找某一个类和元素。

先浏览一下整体的classes。然后虾米再附上每一个类的代码实现 。 如下图：

我们先在故事板里，拉入一个UICollectionView(最好和图片的尺寸一样 )和一个UIPageController。如下图：

注意：根控制器的class要改为JHNewsController. 并且collectionView的代理和数据源方法为self(根控制器)

可以在collectionView上右击拉线给News Controller或者用代码实现。。。^-^ 嘻嘻。。。

然后，在根控制器当中我们必须遵守UICollectionView的一些协议。

虾米先把根控制器的主要实现代码po上。

大致为：

通过添加一个定时器实现三组数据的无限循环滚动。

主要方法是   [self.collectionView scrollToItemAtIndexPath: atScrollPosition: animated:YES]; 同时也要计算出需要展示的位置。

自动滚动下一页请详细看看我下面所写的方法 -(void)nextPage。

代码如下：

//  JHNewsController.m
//  无限滚动-02新闻数据显示
//
//  Created by cjj on 15-9-19.
//  Copyright (c) 2015年 jh.chen. All rights reserved.
//
 
#import "JHNewsController.h"
#import "JHNewsCell.h"
#import "JHNews.h"
#import "MJExtension.h"
 
#define JHReuseIdentifierCell @"news"
#define JHMaxSection 3
 
@interface JHNewsController () <UICollectionViewDataSource,UICollectionViewDelegate>
@property (nonatomic, strong) NSArray *newses;
@property (nonatomic, strong) NSTimer *timer;
@property (weak, nonatomic) IBOutlet UIPageControl *pageControl;
@property (weak, nonatomic) IBOutlet UICollectionView *collectionView;
 
@end
 
@implementation JHNewsController
- (NSArray *)newses
{
    if (_newses == nil) {
        self.newses = [JHNews objectArrayWithFilename:@"newses.plist"];
        self.pageControl.numberOfPages = self.newses.count;
    }
    return _newses;
}
 
- (void)viewDidLoad
{
    [super viewDidLoad];
    
    // 注册cell
    [self.collectionView registerNib:[UINib nibWithNibName:@"JHNewsCell" bundle:nil] forCellWithReuseIdentifier:JHReuseIdentifierCell];
    
    // "默认"显示最中间那组
    [self.collectionView scrollToItemAtIndexPath:[NSIndexPath indexPathForItem:0 inSection:JHMaxSection / 2] atScrollPosition:UICollectionViewScrollPositionLeft animated:YES];
    
    // 添加定时器
    [self addTimer];
}
 
/*
 *  添加定时器
 */
-(void)addTimer
{
    NSTimer *timer = [NSTimer scheduledTimerWithTimeInterval:0.5 target:self selector:@selector(nextPage) userInfo:nil repeats:YES];
    
    [[NSRunLoop mainRunLoop] addTimer:timer forMode:NSRunLoopCommonModes];
    self.timer = timer;
}
 
 
-(void)nextPage
{
    // 1.显示当前的位置信息
    NSIndexPath *currentIndexPath = [[self.collectionView indexPathsForVisibleItems] lastObject];
    
    // 马上显示中间那组的数据
    NSIndexPath *currentIndexPathReset = [NSIndexPath indexPathForItem:currentIndexPath.item inSection:JHMaxSection / 2];
    [self.collectionView scrollToItemAtIndexPath:currentIndexPathReset atScrollPosition:UICollectionViewScrollPositionLeft animated:NO];
    
    // 2.计算出下一个需要展示的位置
    NSUInteger nextItem = currentIndexPathReset.item + 1;
    NSUInteger nextSection = currentIndexPathReset.section;
    if (nextItem == self.newses.count) {
        nextItem = 0;
        nextSection ++;
    }
    NSIndexPath *nextIndexPath = [NSIndexPath indexPathForItem:nextItem inSection:nextSection];
    
    // 3.通过动画滚动到下一个位置
    [self.collectionView scrollToItemAtIndexPath:nextIndexPath atScrollPosition:UICollectionViewScrollPositionLeft animated:YES];
}
 
/*
 *  移除定时器
 */
-(void)removeTimer
{
    [self.timer invalidate];
    self.timer = nil;
}
 
 
 
 
#pragma mark - UICollectionViewDataSource
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return self.newses.count;
}
 
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
    return JHMaxSection;
}
 
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    JHNewsCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:JHReuseIdentifierCell forIndexPath:indexPath];
    
    cell.news = self.newses[indexPath.item];
    
    return cell;
}
 
#pragma mark - UICollectionViewDelegate
 
/**
 *  当用户开始拖拽时就会调用
 */
-(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
    [self removeTimer];
}
 
/**
 *  当用户停止拖拽时就会调用
 */
-(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
    [self addTimer];
}
 
-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    // 显示下一页
    int page = (int)(scrollView.contentOffset.x / scrollView.bounds.size.width + 0.5) % self.newses.count;
    self.pageControl.currentPage =page;
}
 
@end

另外。。。我们有必要了解下JHNewsCell，虾米通过继承UICollectionViewCell，并创建附有一个Xib属性。里面封装着一个UIImageView和一个UILabel。

.h文件留下一个接口，让别人传递数据进来，我们拿到外边传进来的数据在.m文件通过set方法实现。。。

详细代码如下：

//
//  JHNewsCell.m
//  无限滚动-02新闻数据显示
//
//  Created by cjj on 15-9-19.
//  Copyright (c) 2015年 jh.chen. All rights reserved.
//
 
#import "JHNewsCell.h"
#import "JHNews.h"
 
@interface JHNewsCell()
 
@property (weak, nonatomic) IBOutlet UILabel *titleLabel;
@property (weak, nonatomic) IBOutlet UIImageView *iconView;
 
@end
 
 
@implementation JHNewsCell
 
 
- (void)setNews:(JHNews *)news
{
    _news = news;
    self.iconView.image = [UIImage imageNamed:news.icon];
    self.titleLabel.text = [NSString stringWithFormat:@"  %@",news.title];
}
 
@end

(二) BUG解决措施

在写这份demo的时候,遇到一些让我纠结了半天而程序莫名崩溃的bug，为此虾米把它记录了下来。

上面写的代码，检查了很多遍都没有问题。但运行时出现了错误,报如下的错误：

*** Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'invalid nib registered for identifier (news) - nib must contain exactly one top level object which must be a UICollectionReusableView instance’

最终还是被我找到了错误原因：在自定义xib的时候，额外多了一个控件在cell另外的区域，把该控件删除即可。

如图：

把多余的UIImageView删除即可，说到底还是自己太马虎从而犯了简单的错误了。

如果有什么好的建议,请联系虾米，虾米感激不尽 蟹蟹 哈！！

虾米联系方式：

QQ:584837022

github：https://github.com/ios-cjh