想當(dāng)初學(xué)習(xí)iOS時(shí)，對這個(gè)看得不是那么重，同事們也告訴我這個(gè)可以不用掌握。可是到實(shí)際項(xiàng)目中就不這么想了，特別是知道怎么用了之后，無論到哪感覺都需要使用它。個(gè)人覺得UICollectionView還是要掌握一下，雖然一大堆按鈕按鈕的確可以實(shí)現(xiàn)，但是再怎么樣還是沒有UICollectionView好用。
首先說一下UICollectionView是什么，在什么場合下用。UICollectionView我們常稱之為網(wǎng)格表視圖，展示上就是iPhone手機(jī)APP列表，如下圖所示。
它在某些方面和UITableView很像，但又有很大的不同。下面我們來說說怎么做吧。
首先我們自定義一個(gè)UICollectionViewCell，和自定義UITableViewCell差不多，只是這里定義的是一個(gè)網(wǎng)格。
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
//設(shè)置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 設(shè)置CollectionView的的參數(shù)
- (void) initCollectionView
{
UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
[flowLayout setScrollDirection:UICollectionViewScrollDirectionVertical];
//設(shè)置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是垂直布局方式；還有一點(diǎn)就是使用自定義的UICollectionViewCell時(shí)不僅僅導(dǎo)入頭文件就可以了，還需要在UICollectionView注冊一下。
下面就是UICollectionView的Delegate和DataSource。
#pragma mark 設(shè)置CollectionView的組數(shù)
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
return 1;
}
#pragma mark 設(shè)置CollectionView每組所包含的個(gè)數(shù)
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return self.medals.count;
}
#pragma mark 設(shè)置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 定義每個(gè)UICollectionView的大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
return CGSizeMake(DeviceSize.width /3,(DeviceSize.width / 3));
}
#pragma mark 定義整個(gè)CollectionViewCell與整個(gè)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 定義每個(gè)UICollectionView的橫向間距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section
{
return 0;
}
#pragma mark 定義每個(gè)UICollectionView的縱向間距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section
{
return 0;
}
#pragma mark 點(diǎn)擊CollectionView觸發(fā)事件
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
Medal *p = self.medals[indexPath.item];
NSLog(@"---------------------");
}
#pragma mark 設(shè)置CollectionViewCell是否可以被點(diǎn)擊
- (BOOL)collectionView:(UICollectionView *)collectionView shouldSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
return YES;
}
這里我就不一一解釋了，代碼注釋的應(yīng)該比較詳細(xì)了，我是用模型封裝數(shù)據(jù)的，一個(gè)模型就是一個(gè)網(wǎng)格。點(diǎn)擊事件我也放進(jìn)去了，不需要的話可以刪掉。整體上和UITableView很像，因?yàn)椴季址绞降牟煌斐闪瞬町悺４颂幋a的效果圖如下，可以上下滑動(dòng)的。
好了UICollectionView到此就結(jié)束了，是不是比堆按鈕簡單點(diǎn)。我想U(xiǎn)ICollectionViewController也應(yīng)該會(huì)了。
