ios开发之--UICollectionView的使用

最近项目中需要实现一种布局，需要用到UICollectionView，特在此整理记录下！

贴上最终实现的效果图：

 

1，声明

@interface FirstViewController ()<UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout>

@property(nonatomic,strong)UICollectionView *myCollectionView;

@property(nonatomic,strong)UICollectionViewFlowLayout *myLayout;

2，创建

a，设置一个背景图片

UIImageView *imgV = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"bgImg2.jpg"]];
    imgV.frame = CGRectMake(0, 0, KscreenW, KscreenH);
    imgV.autoresizingMask = UIViewAutoresizingFlexibleWidth;
    [self.view insertSubview:imgV atIndex:0];

b,创建UICollectionView和FlowLayout

-(void)creatUI
{
    self.myLayout = [[UICollectionViewFlowLayout alloc]init];
    self.myLayout.minimumLineSpacing = 50;
    self.myLayout.minimumInteritemSpacing = 1;
    self.myLayout.itemSize = CGSizeMake(KscreenW/2-1, (KscreenW/2)+50);
    self.myLayout.sectionInset = UIEdgeInsetsMake(0, 0, 20, 0);

    
    self.myCollectionView = [[UICollectionView alloc]initWithFrame:CGRectMake(0, 0, KscreenW, KscreenH-30) collectionViewLayout:self.myLayout];
    self.myCollectionView.delegate = self;
    self.myCollectionView.dataSource = self;
    self.myCollectionView.backgroundColor = [UIColor clearColor];
//    注册cell
    [self.myCollectionView registerNib:[UINib nibWithNibName:@"LeftCell" bundle:nil] forCellWithReuseIdentifier:@"LeftCell"];
    [self.myCollectionView registerNib:[UINib nibWithNibName:@"RightCell" bundle:nil] forCellWithReuseIdentifier:@"RightCell"];
    [self.myCollectionView registerNib:[UINib nibWithNibName:@"PublickCell" bundle:nil] forCellWithReuseIdentifier:@"PublickCell"];
//    注册头视图
    [self.myCollectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"SECTION_ONE"];
    [self.myCollectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"SECTION_TWO"];
    
    
    [self.view insertSubview:self.myCollectionView atIndex:1];
}

c，这里我用了三种自定义cell，上面的方法有具体的注册cell方法，还有头视图的注册

3，具体代理方法的实现

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

-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    if (section == 0) {
        
        return 6;
    }else{
        
        return 6;
    }
}

-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    if (indexPath.section == 0) {

        if (indexPath.item %2 == 0) {
            
            LeftCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"LeftCell" forIndexPath:indexPath];
            cell.backgroundColor = [UIColor clearColor];
            return cell;
        }else{
            RightCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"RightCell" forIndexPath:indexPath];
            cell.backgroundColor = [UIColor whiteColor];
            return cell;
        }
    }else{
        
        PublickCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"PublickCell" forIndexPath:indexPath];
        cell.backgroundColor = [UIColor whiteColor];
        
        return cell;
    }
    
    return nil;
}

比较简单！

4，创建头视图，PS：这里需要注意个问题：多组头部视图样式不一样复用时发生错乱问题，代码如下：

a，注册头视图，有两种方法：

// 防止cell和头部视图复用出现错乱
    [collectionView registerClass:[WOCOHomeSelectTypeCell class] forCellWithReuseIdentifier:@"SECTION_ONE"];
    [collectionView registerClass:[WOCOHomeDisplayCell class] forCellWithReuseIdentifier:@"SECTION_TWO"];
    [collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"SECTION_ONE"];
    [collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"SECTION_TWO"];

这两种方法都可以！

b，代理方法的实现：

-(UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{
//    防止重用，定义重用标识符
    static NSString *reusableID;
    if (indexPath.section == 0) {
        reusableID = @"SECTION_ONE";
    }else{
        reusableID = @"SECTION_TWO";
    }
    
    
    UICollectionReusableView *header = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:reusableID forIndexPath:indexPath];
    header.backgroundColor = [UIColor clearColor];
    
    if (indexPath.section == 0) {
        headImg = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, KscreenW, 150)];
        headImg.image = [UIImage imageNamed:@"topLog"];
        [header addSubview:headImg];
        
        bottomImg = [[UIImageView alloc]initWithFrame:CGRectMake(KscreenW/2-150/2, 180, 150, 50)];
        bottomImg.image = [UIImage imageNamed:@"sj"];
        [header addSubview:bottomImg];
        
    }else{
        
        UIImageView *bottomImg2 = [[UIImageView alloc]initWithFrame:CGRectMake(KscreenW/2-150/2, 15, 150, 50)];
        bottomImg2.image = [UIImage imageNamed:@"sj1"];
        [header addSubview:bottomImg2];
    }
    
    return header;
}

此方法设置了一个str，作为标识符对不同的section进行标记，这样就可以解决重用的问题，根据不同的id进入不同的section，避免了头视图上面的内容多次创建，各自创建各自的！

c，设置不同section的高度，只需要实现此代理方法即可：

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section
{
    if (section == 0) {
        return CGSizeMake(KscreenW, 250);
    }else{
        return CGSizeMake(KscreenW, 80);
    }
}

完成上面的操作，就可以在不同的section之间随意操作了！