UICollectionView的使用

UICollectionView和UITableView的简单比较

UICollectionView的基本使用

UICollectionView实现无限轮播

瀑布流布局

UICollectionView和UITableView的简单比较

UICollectionView 和 UITableView非常的相似,但是使用起来却比UITableView 强大很多.

二者的使用比较:

相同点

都是通过datasource和delegate来驱动的，因此在使用的时候必须实现数据源与代理协议方法;
性能上都实现了循环利用的优化。

不同点

UITableView的cell是系统自动布局好的，不需要我们布局。但UICollectionView的cell是需要我们自己布局的。所以我们在创建UICollectionView的时候必须传递一个布局参数，系统帮助我们提供并实现了一个流水布局UICollectionViewFlowLayout
UITableView的滚动方式只能是垂直方向，而UICollectionView既可以垂直滚动，也可以水平滚动；
UICollectionView的cell只能通过注册来确定重用标识符。

UICollectionView的基本使用

我们来看看如下代码:

-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{

    GSCollectionVC *vc = [[GSCollectionVC alloc] init];
    [self.navigationController pushViewController:vc animated:YES];
    
}

运行起来之后点击View,此时系统给我们抛出如下错误:

*** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: 'UICollectionView must be initialized with a non-nil layout parameter'

上面我们说过CollectionView在初始化的时候必须传递一个布局参数,所以这里我们需要在GSCollectionVC中重写init方法,指定布局方式

- (instancetype)init{
    // 设置流水布局
    UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];

    layout.itemSize = CGSizeMake(ScreenWidth/7, ScreenWidth/7);

    layout.minimumLineSpacing = 0;

    layout.minimumInteritemSpacing = 0;

    layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
    // 设置组头大小
    layout.headerReferenceSize = CGSizeMake(ScreenWidth, ScreenWidth/7);
 
    return [self initWithCollectionViewLayout:layout];
}

下面我们来看看 UICollectionViewDataSource UICollectionViewDelegate 和UICollectionViewDelegateFlowLayout中的常用方法:

- (void)viewDidLoad {
    
    [super viewDidLoad];
    _dayAry = [NSMutableArray array];
    
    [self.collectionView registerNib:[UINib nibWithNibName:NSStringFromClass([DateCell class]) bundle:nil] forCellWithReuseIdentifier:cellID];
    
    //注册headerView  此处的ReuseIdentifier 必须和 cellForItemAtIndexPath 方法中 一致
    [self.collectionView registerNib:[UINib nibWithNibName:@"DateHeadView" bundle:nil] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"DateHeadView"];
    [self dataHandle:[[NSDate date] description]];
    
}
#pragma mark <UICollectionViewDataSource>
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return _dayAry.count;
}
- (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    
    DateCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellID forIndexPath:indexPath];
    cell.textLabel.text = [_dayAry[indexPath.row] description];
    return cell;
}

//要想使该方法生效必须设置组头或者组尾部大小
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{

    if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {
        UICollectionReusableView *headView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"DateHeadView" forIndexPath:indexPath];
        if(headView == nil)
        {
            headView = [[UICollectionReusableView alloc] init];
        }
        return headView;
    }
    return nil;
}

#pragma mark <UICollectionViewDelegate>
//点击item方法
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
    UICollectionViewCell *cell = [collectionView cellForItemAtIndexPath:indexPath];
    cell.backgroundColor = [UIColor greenColor];
}
//取消点击item方法
- (void)collectionView:(UICollectionView *)collectionView didDeselectItemAtIndexPath:(NSIndexPath *)indexPath{
    UICollectionViewCell *cell = [collectionView cellForItemAtIndexPath:indexPath];
    cell.backgroundColor = [UIColor whiteColor];
}
#pragma mark <UICollectionViewDelegateFlowLayout>
/**
 * 除了在上面直接设置layout的一些属性来设置间距等,也可以使用该代理方法来指定布局方式,该优先级要高于上面直接指定的方式
 */
//设置itemSize
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
    
    return CGSizeMake(ScreenWidth/7, ScreenWidth/7);
}

//设置水平间距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section{
    
    return 0;
}

//设置垂直间距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section{
    return 0;
}
//设置每个item的UIEdgeInsets
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section
{
    return UIEdgeInsetsMake(5, 5, 5, 5);
}

//设置headerView的尺寸大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section{
    return CGSizeMake(ScreenWidth, ScreenWidth/7);
}
@end

运行之后效果图如下:

image

这里我贴一下日期计算的几个关键的代码:

/**
 * 根据所传递的日期计算当前月份的天数
 **/
+ (NSInteger)totalDaysInMonthFromDate:(NSDate*)date{
    NSRange dayRange = [[NSCalendar currentCalendar] rangeOfUnit:NSCalendarUnitDay inUnit:NSCalendarUnitMonth forDate:date];
    return dayRange.length;
}
/**
 * 根据所传递的日期计算当前月份的第一天是星期几
 **/
+ (NSInteger)weekDayMonthOfFirstDayFromDate:(NSDate*)date{
    NSInteger firstDayOfMonthInt = [[NSCalendar currentCalendar] ordinalityOfUnit:NSCalendarUnitDay inUnit:NSCalendarUnitWeekOfMonth forDate:date];
    return firstDayOfMonthInt - 1;
}

- (void)dataHandle:(NSString*)dateStr{
    
    [_dayAry removeAllObjects];
    
    //计算当月第一天星期几
    NSInteger firstWeekDay = [EOCDateModel weekDayMonthOfFirstDayFromDate:[NSDate date]];
    
    //计算当月共有多少天
    NSInteger dayCount = [EOCDateModel totalDaysInMonthFromDate:[NSDate date]];
    
    
    // 补充当月星期几前面的空白
    for (int i = 0; i< firstWeekDay; i++) {
        [_dayAry addObject:@""];
    }
    for (int i = 0; i< dayCount; i++) {
        [_dayAry addObject:@(i+1)];
    }
    // 补后面余下的空白
    int leftDay = 0;
    if (_dayAry.count%7) {
        leftDay = 7 - _dayAry.count%7;
    }
    for (int i = 0; i< leftDay; i++) {
        [_dayAry addObject:@""];
    }
    [self.collectionView reloadData];
}

UICollectionView实现无限轮播

因为CollectionView的循环利用,所以我们就无需在自己创建缓存池了,如果用ScrollView来实现无限轮播,我们还需要自己去创建缓存机制.

网上关于无限轮播的文章非常的多,这里我主要记录一下自己的实现思路

假设我们有5张轮播图,我们可以为CollectionView设置100组数据,当程序执行时候,立马让CollectionView滚动到最中间的那组数据上

 //默认显示最中间的那组数据
     [self.collectionView scrollToItemAtIndexPath:[NSIndexPath indexPathForRow:0 inSection:MaxSectionNum/2]  atScrollPosition:UICollectionViewScrollPositionLeft animated:NO];

当定时器开始运行的时候,在nextPage方法中让CollectionView滚动到最中间的那组数据中

//开启定时器
- (void)startTimer{
    self.timer = [NSTimer scheduledTimerWithTimeInterval:2.0 target:self selector:@selector(nextPage) userInfo:nil repeats:YES];
    [[NSRunLoop mainRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes];
}
- (void)nextPage{
    //获取当前正在展示的位置
    NSIndexPath *currentIndexPath = [[self.collectionView indexPathsForVisibleItems] lastObject];
    
    //最中间的那组数据
    NSIndexPath *currentIndexPathReset = [NSIndexPath indexPathForRow:currentIndexPath.item inSection:MaxSectionNum/2];
    
    //马上显示最中间的那组数据上
    [self.collectionView scrollToItemAtIndexPath:currentIndexPathReset atScrollPosition:UICollectionViewScrollPositionLeft animated:NO];
    
    //计算下一组数据
    NSInteger nextItem = currentIndexPathReset.item + 1;
    NSInteger nextSection = currentIndexPathReset.section;
    if (nextItem == self.news.count) {
        nextItem = 0;
        nextSection ++;
    }

    NSIndexPath *nextIndexPath = [NSIndexPath indexPathForRow:nextItem inSection:nextSection];
    //滚动到下一组数据
    [self.collectionView scrollToItemAtIndexPath:nextIndexPath atScrollPosition:UICollectionViewScrollPositionLeft animated:YES];
}

具体demo可以参考GitHub链接

瀑布流布局

瀑布流布局在很多应用中非常常见，效果图如下：