iOS個人整理24-集合視圖--UICollectionView

一、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);
}

實現效果