iOS-个人整理23 - 集合视图--UICollectionV

一、UICollection

瀑布流现在好像挺流行，怎么实现呢
用UICollectionView咯，还是先说这个集合视图吧
这个继承于UIScrollView，可以滚动，
UICollectionView上面也可以添加cell，但不用于UITableView，它可以设置cell的列和行，形成2维结构
就像这样

集合视图的布局稍微复杂了一点，需要一个专门的layout类来实现
创建layout和集合视图的初始化

    //集合视图的布局类初始化（系统）  
    UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc]init];  
      
    //设置layout  
    //设置单元格大小  
    flowLayout.itemSize = CGSizeMake(100, 100);  
      
    //设置最小行间距  
    flowLayout.minimumLineSpacing = 20;  
    //最小列间距  
    flowLayout.minimumInteritemSpacing = 30;  
      
    //设置分区间隔，与上下左右的距离  
    [flowLayout setSectionInset:UIEdgeInsetsMake(10, 10, 10, 10)];  
      
    //设置滑动方向  
    flowLayout.scrollDirection = UICollectionViewScrollDirectionVertical;  
      
    //头部引用的尺寸  
//    flowLayout.headerReferenceSize = CGSizeMake(100, 100);  
    //尾部引用尺寸  
//    flowLayout.footerReferenceSize = CGSizeMake(100, 100);  
      
    //集合视图的初始化  
    UICollectionView *myCollectionView =[[UICollectionView alloc]initWithFrame:self.view.frame collectionViewLayout:flowLayout];  
    myCollectionView.tag = 1000;  
      
    //默认背景色为黑色  
    myCollectionView.backgroundColor =  [UIColor colorWithRed:200/255.0 green:233/255.0 blue:160/255.0 alpha:1];  
      
    //设置代理,和tableview一样有两个代理,三个代理方法  
    myCollectionView.dataSource = self;  
    myCollectionView.delegate = self;  
      
    //注册单元格  
    [myCollectionView registerClass:[CustomCollectionViewCell class] forCellWithReuseIdentifier:@"ITEM"];  
      
    myCollectionView.pagingEnabled = YES;  

//添加  

这里要导入三个协议
<UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout>

UICollectionView必须实现与tableview相似的两个方法

//每个分区下items数  
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section  
{  
    return 9;  
}  
  
//填充cell  
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath  
{  
    UICollectionView *myCollectionView = [self.view viewWithTag:1000];  
  
    //这里用了自定义的cell  
    CustomCollectionViewCell *cell = [myCollectionView dequeueReusableCellWithReuseIdentifier:@"ITEM" forIndexPath:indexPath];  
      
    cell.backgroundColor = [UIColor colorWithRed:247/255.0 green:162/255.0 blue:120/255.0 alpha:1];  
      
    cell.myImageView.image = [UIImage imageNamed:@"640.jpg"];  
    cell.titleLabel.text = @"面对疾风吧";  
  
    //注册头部视图  
    [myCollectionView registerClass:[CustomHeaderCollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier: @"headView"];  
      
    //注册底部视图  
    [myCollectionView registerClass:[CustomFooterCollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"footerView"];  
      
    return cell;  
}  

layout的属性大多可以通过协议方法来动态设置

//分区间隔  
-(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section  
{  
    return UIEdgeInsetsMake(10, 10, 10, 10);  
}  
  
//最小行间距  
-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section  
{  
    return 20;  
}  
//最小列间距  
-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section  
{  
    return 20;  
}  
//头尾视图的大小  
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section  
{  
      
    return CGSizeMake(25, 50);  
}  
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section  
{  
    return CGSizeMake(25, 50);  
}  

实现效果