iOS  UICollectionView_篱下悠然_新浪博客

本文详细介绍了UICollectionView的基本概念及其创建过程,包括遵守的协议、数据源配置、界面创建与代理方法实现等核心步骤,并提供了完整的示例代码。

一.什么是UICollectionView

和UItableView类似,可以做九宫格布局的一种view

二.如何创建UICollectionView

2.1 遵守协议

UICollectionViewDataSource,UICollectionViewDelegate,UICollectionViewDelegateFlowLayout

 

2.2 创建数据源

NSArray *array1 = @[

                        @{@"imagePath": @“1.jpg”,@“title": @"这是array-1”},

                        @{@"imagePath": @"1.jpg",@"title": @"这是array-2”},

                        @{@"imagePath": @"1.jpg",@"title": @"这是array-3”},

                        @{@"imagePath": @"1.jpg",@"title": @"这是array-4”},

                        @{@"imagePath": @"1.jpg",@"title": @"这是array-5”},

                        @{@"imagePath": @"1.jpg",@"title": @"这是array-6”}

                        ];

    

    NSArray *array2 = @[

                        @{@"imagePath": @"2.jpg",@"title": @"这是array2-1”},

                        @{@"imagePath": @"2.jpg",@"title": @"这是array2-2”},

                        @{@"imagePath": @"2.jpg",@"title": @"这是array2-3”},

                        @{@"imagePath": @"2.jpg",@"title": @"这是array2-4”},

                        @{@"imagePath": @"2.jpg",@"title": @"这是array2-5”},

                        @{@"imagePath": @"2.jpg",@"title": @"这是array2-6”}

                        ];

    _dataArray = @[array1,array2];

2.3创建UI

//collectionView布局类

    UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayoutalloc]init];

    //cell之间的上下边距

    layout.minimumLineSpacing = 5;

    //cell之间的左右边距

    layout.minimumInteritemSpacing = 5;

    //设置collectionView滚动方向

    layout.scrollDirection = UICollectionViewScrollDirectionVertical;

    //每个item(cell)的大小,并且这个大小在代理中也可以修改

    layout.itemSize = CGSizeMake(100, 80);

    

    //使用layout来创建collectionView

    UICollectionView *collectionView = [[UICollectionViewalloc]initWithFrame:self.view.boundscollectionViewLayout:layout];

    collectionView.delegate = self;

    collectionView.dataSource =self;

    [self.viewaddSubview:collectionView];

    

    //cell的复用

    //后面用自定义cell的时候,一定要来修改这个[UICollectionViewCell class]

    [collectionView registerClass:[myCellclass] forCellWithReuseIdentifier:

     @"cell"];

    

    //headView复用

//    UICollectionElementKindSectionHeader   :用了判断是headView还是footView

    [collectionView registerClass:[UICollectionReusableViewclass]

                            forSupplementaryViewOfKind:UICollectionElementKindSectionHeader

                            withReuseIdentifier:@"head"];

    

    //footView复用

    [collectionView registerClass:[UICollectionReusableViewclass] forSupplementaryViewOfKind:UICollectionElementKindSectionFooterwithReuseIdentifier:@"foot"];

2.4代理方法

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView

{

    //_dataArray 有多少个数组,就有多少个section

    return_dataArray.count;

}

//每个section有几个cell

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section

{

    //取到每个_dataArray的元素,并返回元素个数

    NSArray *array = [_dataArrayobjectAtIndex:section];

    return array.count;

}

//cell复用

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath

{

    myCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier

                                  :@"cell"forIndexPath:indexPath];

    cell.backgroundColor = [UIColorredColor];

    NSArray *arry = [_dataArrayobjectAtIndex:indexPath.section];

    NSDictionary *dic = [arry objectAtIndex:indexPath.row];

    NSString *imagePath = [dic objectForKey:@"imagePath"];

    NSString *title = [dic objectForKey:@"title"];

    cell.imgView.image = [UIImageimageNamed:imagePath];

    cell.label.text = title;

    return cell;

}

//collectionViewCell的偏移量

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section

{

//    return UIEdgeInsetsZero;

    returnUIEdgeInsetsMake(5, 5, 5, 5);

}

// 设置item大小,cell大小

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath

{

    returnCGSizeMake(150, 150);

}

//headView大小

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section

{

    returnCGSizeMake(320, 50);

}

//footView大小

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section

{

    returnCGSizeMake(320, 20);

}

//定制head  foot

- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath

{

    //判断是head ,还是foot

    if ([kind isEqualToString:UICollectionElementKindSectionHeader])

    {

        //这里是头部

        UICollectionReusableView *head =[collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:@"head"forIndexPath:indexPath];

        head.backgroundColor = [UIColorblueColor];

        return head;

    }elseif ([kind isEqualToString:UICollectionElementKindSectionFooter])

    {

        //这里是尾部

        UICollectionReusableView *foot = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:@"foot"forIndexPath:indexPath];

        foot.backgroundColor = [UIColororangeColor];

        return foot;

    }

    returnnil;

}

//点击了一个cell

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath

{

    NSLog(@"section==%d,row==%d",indexPath.section,indexPath.row);

}

//允不允许点击cell

- (BOOL)collectionView:(UICollectionView *)collectionView shouldSelectItemAtIndexPath:(NSIndexPath *)indexPath

{

    if (indexPath.section == 0) {

        returnNO;

    }

    returnYES;

}


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值