UICollectionView（集合視圖）以及自定義集合視圖

1、UICollectionView集合視圖

 

        其繼承自UIScrollView。

        UICollectionView類是iOS6新引進的API，用於展現集合視圖，佈局更加靈活，可實現多列布局，用法相似於UITableView類。

一、須要遵循的協議：

1）UICollectionViewDataSource,

2）UICollectionViewDelegate,

3）UICollectionViewDelegateFlowLayout

二、建立collection：

UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayoutalloc] init];

   
    UICollectionView *collection = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:layout];//初始化，並設置佈局方式
    collection.backgroundColor = [UIColor whiteColor];
   
    [collection registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"cell"];//註冊UICollectionViewCell，這是固定格式，也是必需要實現的
   
    [collection registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"headerView"];//註冊頭/尾視圖，視圖類型必須爲UICollectionReusableView或者其子類，kind設置爲UICollectionElementKindSectionHeader或者UICollectionElementKindSectionFooter，最後設置標識
   
    collection.delegate = self;
    collection.dataSource = self;

    [self.view addSubview:collection];

三、須要實現的方法：

1）－(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{

    //設置組數，不寫該方法默認是一組
    return 4;
}

2）-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return 9;
}

3）-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
   
    static NSString *identifier = @"cell";//注意，此處的identifier要與註冊cell時使用的標識保持一致
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath];
   
    cell.backgroundColor = [UIColor grayColor];
    cell.layer.borderWidth = 0.5;
    cell.layer.borderColor = [UIColor whiteColor].CGColor;
    return cell;
   
}

//設置頭視圖的尺寸，若是想要使用頭視圖，則必須實現該方法
4）-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section{
    return CGSizeMake(300, 30);
}

5）-(UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{
    //根據類型以及標識獲取註冊過的頭視圖,注意重用機制致使的bug
    UICollectionReusableView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"headerView" forIndexPath:indexPath];
    headerView.backgroundColor = [UIColor brownColor];
   
    for (UIView *view in headerView.subviews) {
        [view removeFromSuperview];
    }
   
    UILabel *label = [[UILabel alloc] initWithFrame:headerView.bounds];
    label.text = [NSString stringWithFormat:@"%zi組的頭視圖",indexPath.section];
    [headerView addSubview:label];
    label.textColor = [UIColor whiteColor];
   
    return headerView;
}

 

6）-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{

    NSLog(@"%zi組，%zi行",indexPath.section,indexPath.item);
   
}

7）-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
    //設置item尺寸
    return CGSizeMake(self.view.frame.size.width/3.0, 100);
}
8）-(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
    //設置組距離上向左右的間距
    return UIEdgeInsetsMake(0,0,0,0);
}

9）-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section{
    //兩個item的列間距
    return 0;
}

10）-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section{
    //若是一組中有多行item，設置行間距
    return 0;

}

 

 

2、自定義集合視圖

一、遵循的協議

1）UICollectionViewDataSource,

2）UICollectionViewDelegate,

3）UICollectionViewDelegateFlowLayout

 

二、建立

定義一個全局變量： UICollectionView *_collectionView;

 

_collectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:[[UICollectionViewFlowLayout alloc] init]];
   
    [_collectionView registerClass:[MyCollectionViewCell class] forCellWithReuseIdentifier:@"cell"];
    _collectionView.delegate = self;
    _collectionView.dataSource = self;
    _collectionView.backgroundColor = [UIColor whiteColor];

    [self.view addSubview:_collectionView];

 

三、實現的方法

 

-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return 10;
}

-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    static NSString *identifier = @"cell";
    MyCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath];
    cell.imageView.image = [UIImage imageNamed:@"1.jpg"];
   
    //自定義選中背景
    UIView *view = [[UIView alloc] init];
    view.backgroundColor = [UIColor grayColor];
   
    cell.selectedBackgroundView = view;
   
    return cell;

}

 

四、自定義一個繼承自 CollectionViewCell的類爲 MyCollectionViewCell

1）聲明一個UIImageView屬性

@property (nonatomic, strong) UIImageView *imageView;

2）實現方法

-(instancetype)initWithFrame:(CGRect)frame{
    self = [super initWithFrame:frame];
    if (self) {
       
        _imageView = [[UIImageView alloc] initWithFrame:self.bounds];
        [self addSubview:_imageView];
       
    }
    return self;

}