想當初學習iOS時，對這個看得不是那么重，同事們也告訴我這個可以不用掌握。可是到實際項目中就不這么想了，特別是知道怎么用了之后，無論到哪感覺都需要使用它。個人覺得UICollectionView還是要掌握一下，雖然一大堆按鈕按鈕的確可以實現(xiàn)，但是再怎么樣還是沒有UICollectionView好用。
首先說一下UICollectionView是什么，在什么場合下用。UICollectionView我們常稱之為網(wǎng)格表視圖，展示上就是iPhone手機APP列表，如下圖所示。

Snip20160619_1.png

它在某些方面和UITableView很像，但又有很大的不同。下面我們來說說怎么做吧。

首先我們自定義一個UICollectionViewCell，和自定義UITableViewCell差不多，只是這里定義的是一個網(wǎng)格。

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        //設置CollectionViewCell中的圖像框
        self.imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, CGRectGetWidth(self.frame), CGRectGetWidth(self.frame))];
        [self addSubview:self.imageView];
        
        //文本框
        self.label = [[UILabel alloc] initWithFrame:CGRectMake(0, CGRectGetMaxX(self.imageView.frame) + 10, CGRectGetWidth(self.frame), 15)];
        self.label.font = [UIFont systemFontOfSize:13];
        self.label.textColor = Color(102, 102, 102);
        self.label.textAlignment = NSTextAlignmentCenter;
        [self addSubview:self.label];
        
    }
    return self;
}

之后我們就可以定義UICollectionView了

#pragma mark  設置CollectionView的的參數(shù)
- (void) initCollectionView
{
    UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
    [flowLayout setScrollDirection:UICollectionViewScrollDirectionVertical];
    //設置CollectionView的屬性
    self.collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 220, DeviceSize.width, DeviceSize.height - 220) collectionViewLayout:flowLayout];
    self.collectionView.backgroundColor = Color(238, 238, 238);
    self.collectionView.delegate = self;
    self.collectionView.dataSource = self;
    self.collectionView.scrollEnabled = YES;
    [self.view addSubview:self.collectionView];
    //注冊Cell
    [self.collectionView registerClass:[MedalCell class] forCellWithReuseIdentifier:@"cell"];
}

這里需要注意一下，UICollectionView的布局方式需要定義一下，UICollectionViewScrollDirectionVertical是垂直布局方式；還有一點就是使用自定義的UICollectionViewCell時不僅僅導入頭文件就可以了，還需要在UICollectionView注冊一下。

下面就是UICollectionView的Delegate和DataSource。

#pragma mark  設置CollectionView的組數(shù)
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
    return 1;
}

#pragma mark  設置CollectionView每組所包含的個數(shù)
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return self.medals.count;
    
}

#pragma mark  設置CollectionCell的內(nèi)容
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *identify = @"cell";
    MedalCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:identify forIndexPath:indexPath];
    Medal *p = self.medals[indexPath.row];
    cell.medal = p;
    return cell;
}



#pragma mark  定義每個UICollectionView的大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    return  CGSizeMake(DeviceSize.width /3,(DeviceSize.width / 3));
}



#pragma mark  定義整個CollectionViewCell與整個View的間距
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section
{
    return UIEdgeInsetsMake(0, 0, (self.medals.count / 3 - 2) * DeviceSize.width / 3, 0);//（上、左、下、右）
}


#pragma mark  定義每個UICollectionView的橫向間距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section
{
    return 0;
}

#pragma mark  定義每個UICollectionView的縱向間距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section
{
    return 0;
}

#pragma mark  點擊CollectionView觸發(fā)事件
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    Medal *p = self.medals[indexPath.item];
    NSLog(@"---------------------");
}

#pragma mark  設置CollectionViewCell是否可以被點擊
- (BOOL)collectionView:(UICollectionView *)collectionView shouldSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    return YES;
}

這里我就不一一解釋了，代碼注釋的應該比較詳細了，我是用模型封裝數(shù)據(jù)的，一個模型就是一個網(wǎng)格。點擊事件我也放進去了，不需要的話可以刪掉。整體上和UITableView很像，因為布局方式的不同造成了差異。此處代碼的效果圖如下，可以上下滑動的。

Snip20160619_2.png

好了UICollectionView到此就結(jié)束了，是不是比堆按鈕簡單點。我想UICollectionViewController也應該會了。