UICollectionView flowlauout 瀑布流效果

1.創建視圖

效果圖:

(1).這是蘋果官方提供的一種瀑布流效果,之後加到collectionView上
UICollectionViewFlowLayout  *flowlauout =[[UICollectionViewFlowLayout alloc] init];

 (2).不同於tableview ,它用item進行顯示, 所以需要先設置每個item有多大
flowlauout.itemSize =CGSizeMake(90, 160);

 (3).設置行間距
flowlauout.minimumInteritemSpacing =2;

 (4)設置列間距
flowlauout.minimumLineSpacing =2;

   (5).設置默認的滾動方向,默認是垂直的方向
flowlauout.scrollDirection =UICollectionViewScrollDirectionHorizontal;

  (6).設定頭或者尾視圖的尺寸
flowlauout.headerReferenceSize =CGSizeMake(0, 300);

   (7).創建一個collectionView
 UICollectionView *collectionView= [[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height) collectionViewLayout:flowlauout];

注意把flowlauout加上

 (8).接下來就是和tableView很相似 ,使用前需要籤兩個協議dataSource ,delegate
 collectionView.dataSource =self;
    [collectionView setDelegate:self];

(9).把collectionView加到self.view上
[self.view addSubview:collectionView];

  (10).通過註冊的方式創建cell(這是與tableView不通過的地方)
  第一個參數 :需要制定註冊對象的類型
 第二個參數 :重用標誌
[collectionView registerClass:[MyCell class] forCellWithReuseIdentifier:@"reuse"];

 (10),註冊一個頭視圖
[collectionView registerClass:[MyCollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader  withReuseIdentifier:@"headerView"];
// 第一個參數 :需要註冊的對象類型
// 第二個參數 :指定是頭視圖還是尾視圖,常量字符串在系統的UICollectionViewFlowlayout類的最上面
// 第三個參數 :重用標誌

2.header 頭視圖的創建

-(UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{
    if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {
        MyCollectionReusableView *view =  [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader  withReuseIdentifier:@"headerView" forIndexPath:indexPath];
        view.myLabel.text =@"1111";
        view.frame =CGRectMake(0, 0, 100, 100);
        return view;
    }else{
        return nil;
    }
}

使用註冊的方式創建的cell,必須使用自定義的cell,否則在裏面會重複大量的創建視圖,爲了杜絕重複創建,必須使用自定義cell

 3. collectionView的兩個協議方法
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return self.arr.count;
}

-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
 #warning 在collectionCell的創建的時候,提供了另一種不同於tableview的cell創建方式

  MyCell *cell =[collectionView dequeueReusableCellWithReuseIdentifier:@"reuse" forIndexPath:indexPath];
    // 只要通過註冊的方式創建的cell ,在取值的時候就不需要進行是否爲空的判斷了
   cell 的背景顏色 
    cell.contentView.backgroundColor =[UIColor whiteColor];
    cell 的文本內容
    cell.myLabel.text =[NSString stringWithFormat:@"%ld", indexPath.row];

    // 用sd 顯示
    [cell.myImageView sd_setImageWithURL:[NSURL URLWithString:self.arr[indexPath.row]]];


    return cell;
}

4.創建一個collectionViewCell

 在cell的.h文件中
@property(nonatomic ,retain)UIImageView *myImageView;
@property(nonatomic ,retain)UILabel *myLabel;

 在cell.m文件中

-(instancetype )initWithFrame:(CGRect)frame{
    self =[super initWithFrame:frame];
    if (self) {
        self.myImageView =[[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 80, 100)];
        [self.contentView addSubview:self.myImageView];
//        [_myImageView release];
        self.myLabel =[[UILabel alloc] initWithFrame:CGRectMake(0, 100, 80, 30)];
        [self.contentView addSubview:self.myLabel];
//        [self.myLabel release];

    }
    return self;
}