CollectionView的基本用法(详细)

2016-05-11 本文已影响14855人会跳舞的狮子

collectionView的介绍

UICollectionView的学习和UITableView的学习80%一模一样

使用UITableView需要设置数据源和代理
UICollectionView的使用也需要设置数据源和代理
UITableView显示什么内容由数据源决定
想监听UITableView, 由代理决定
UICollectionView显示什么内容由数据源决定
UICollectionView监听由代理决定
UITableView的内容都显示到cell上
UICollectionView的内容也显示到cell上
自定义cell需要添加到contentView上
UICollectionView自定义cell也需要添加到contentView上
UICollectionView和UITableView都是继承于UIScrollView

注意点

one:
UICollectionView如何显示内容完全由layout(布局对象)决定
所以在创建UICollectionView时必须传递一个layout对象, 否则UICollectionView不知道如何显示
reason: 'UICollectionView must be initialized with a non-nil layout parameter'
two:
UICollectionViewLayout是一个抽象类, 如果使用UICollectionViewLayout类, 那么如何排布就必须由于我们自己来实现
所以一般情况使用UICollectionViewLayout的子类即可, 只有需要自定义cell显示样式时才需要定义一个类继承于UICollectionViewLayout来自己实现
UICollectionViewFlowLayout(流水布局): 该类是UICollectionViewLayout的子类, 系统以及提供了默认的实现

由于UICollectioncView上的cell如何展示, 是由于layout对象决定的, 所以如果想修改cell的尺寸/间隙等, 都需要通过layout对象来修改

collectionView的使用步骤

1.必须要有布局,在初始化的时候就需要. (-init{})
2.必须注册cell(分为代码和Xib)
3.UICollectionView的cell是由布局决定
4.自定义cell
// 系统自带了流水布局,专门做九宫格
// UICollectionViewLayout基类,UICollectionViewFlowLayout是布局对象

初始化的注意点

如果是继承于UICollectionViewController的话,初始化应该在- init方法中
附上代码,文字比较抽象

Author :会跳舞的狮子

#pragma mark - 初始化
- (instancetype)init {

    //创建流水布局
    UICollectionViewFlowLayout *layout = ({
        UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
        
        //设置间距
        NSInteger margin = 10;
        layout.minimumInteritemSpacing = margin;
        layout.minimumInteritemSpacing = margin;
        
        //设置item尺寸
        CGFloat itemW = (ScreenWidth - (MaxCol + 1) * margin) / MaxCol;
        CGFloat itemH = itemW;
        layout.itemSize = CGSizeMake(itemW, itemH);
        
        layout.sectionInset = UIEdgeInsetsMake(margin, margin, margin, margin);

        // 设置水平滚动方向
        layout.scrollDirection = UICollectionViewScrollDirectionVertical;
        
        layout;
    });
    //应该把layout添加到它父类的[initWithCollectionViewLayout:]里面
    if (self = [super initWithCollectionViewLayout:layout]) {
        
    }
    
    return self;
}

如果不是继承UICollectionViewController,而是在ViewController里面里面添加一个CollectionView的话, 初始化就不需要在 init方法中

UICollectionViewFlowLayout的基本属性

// 创建流水布局
    // 默认滚动方向,垂直
    UICollectionViewFlowLayout *layout = ({
    
       UICollectionViewFlowLayout *layout = [[FlowLayout alloc] init];
        
        // 设置尺寸
        layout.itemSize = CGSizeMake(160, 160);
        
        //估算的尺寸(一般不需要设置)
        layout.estimatedItemSize = CGSizeMake(100, 100);
        
        //头部的参考尺寸(就是尺寸)
        layout.headerReferenceSize = CGSizeMake(100, 100);
        //尾部的参考尺寸
        layout.footerReferenceSize = CGSizeMake(100, 100);
        
        //设置分区的头视图和尾视图是否始终固定在屏幕上边和下边
        layout.sectionFootersPinToVisibleBounds = YES;
        layout.sectionHeadersPinToVisibleBounds = YES;
        
        // 设置水平滚动方向
        //水平滚动
        layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
        //竖直滚动
        layout.scrollDirection = UICollectionViewScrollDirectionVertical;
        
        // 设置额外滚动区域
        layout.sectionInset = UIEdgeInsetsMake(0, 0, 0, 0);
        
        // 设置cell间距
        //设置水平间距, 注意点:系统可能会跳转(计算不准确)
        layout.minimumInteritemSpacing = 50;
        //设置垂直间距
        layout.minimumLineSpacing = 50;
        
        layout;
        
    });

UICollectionView的基本属性

  // 创建UICollectionView
    // UICollectionView默认的颜色就是黑色,所以建议设置背景颜色
    UICollectionView *collectionView = ({
        
        //创建UICollectionView对象, 将layout添加到collectionViewLayout:里面
       UICollectionView *collectionView =  [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:layout];
        
        //设置UICollectionView的尺寸
        collectionView.bounds = CGRectMake(0, 0, self.view.bounds.size.width, 300);
        
        //设置背景颜色
        collectionView.backgroundColor = [UIColor greenColor];
        
        //设置中心点
        collectionView.center = self.view.center;

        // 设置数据源,展示数据
        collectionView.dataSource = self;
        //设置代理,监听
        collectionView.delegate = self;
        
        // 注册cell
        [collectionView registerNib:[UINib nibWithNibName:@"JHCell" bundle:nil] forCellWithReuseIdentifier:ID];
    
        /* 设置UICollectionView的属性 */
        //设置滚动条
        collectionView.showsHorizontalScrollIndicator = NO;
        collectionView.showsVerticalScrollIndicator = NO;
        
        //设置是否需要弹簧效果
        collectionView.bounces = NO;

        collectionView;
    
    });
    
     [self.view addSubview:collectionView];

数据源方法:

// 告诉系统一共多少组
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
    return 3;
}

// 告诉系统每组多少个
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return 100;
}

// 告诉系统每个Cell如何显示
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    // 1.从缓存池中取
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath];

    /*
     注意:
     UICollectioncView的cell和UITableView的cell不太一样, 
     UITableView有默认的子控件
     UICollectionViewCell除了contentView以外, 没有提供默认的子控件
     设置UICollectionViewCell需要自定义 最好结合Xib使用
     */
    // 2.使用
    cell.backgroundColor = (indexPath.item % 2)?[UIColor redColor]:[UIColor greenColor];
    
    // 3.返回
    return cell;
}

UICollectionView的代理方法


#pragma mark -UICollectionViewDelegate
//UICollectionView被选中的时候调用
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    NSLog(@"%zd",indexPath.item);
}

// 返回这个UICollectionView是否可以被选择
- (BOOL)collectionView:(UICollectionView *)collectionView shouldSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    return YES;

}

UICollectionViewDelegateFlowLayout

UICollectionViewDelegateFlowLayout是UICollectionViewDelegate的子协议
上面的方法在创建FlowLayout时静态的进行设置，如果我们需要动态的设置这些属性，我们可以通过代理来实现。

//动态设置每个Item的尺寸大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath;

//动态设置每个分区的EdgeInsets
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section;

//动态设置每行的间距大小
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section;

//动态设置每列的间距大小
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section;

//动态设置某组头视图大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section;

//动态设置某组尾视图大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section;

以上都是UICollectionView的基本用法,下一篇会写关于UICollectionView实现头部视图漂浮的效果

Author:会跳舞的狮子               一步一个脚印,积累点滴.

CollectionView的基本用法(详细)

collectionView的介绍

注意点

collectionView的使用步骤

初始化的注意点

UICollectionViewFlowLayout的基本属性

UICollectionView的基本属性

数据源方法:

UICollectionView的代理方法

UICollectionViewDelegateFlowLayout

以上都是UICollectionView的基本用法,下一篇会写关于UICollectionView实现头部视图漂浮的效果

猜你喜欢

热点阅读