iOS应用开发实战（18-19）－CollectionView

CollectionView.png

CollectionView是iOS 6 里引入的新界面组件

主要特征：

• 网格式界面
• 分离Layout

学习资料：
https://developer.apple.com/videos/play/wwdc2012-205
https://developer.apple.com/videos/play/wwdc2012-219

UICollectionView组成

组成.png

UICollectionView结构

总体上与TableView接近
notice：

• cell=>item
• header/footer => supplementary view
• item view 必须register
• 布局交给独立的类

UICollectionView的组成

UICollectionView的组成.png

有关Cell的构建

Cell.png

Tips:
使用UICollectionView 必须实现
UICollectionViewDataSource
UICollectionViewDelegate
UICollectionViewDelegateFlowLayout这三个协议

代码举例

#pragma mark -- UICollectionViewDataSource   
//定义展示的UICollectionViewCell的个数  
-(NSInteger)collectionView:(UICollectionView *)collectionView     numberOfItemsInSection:(NSInteger)section  
{  
    return 30;  
} 

//定义展示的Section的个数  
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView  
{  
    return 1;  
}   

//每个UICollectionView展示的内容  
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath  
{  
    static NSString * CellIdentifier = @"GradientCell";  
    UICollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:CellIdentifier forIndexPath:indexPath];   
    cell.backgroundColor = [UIColor colorWithRed:((10 * indexPath.row) / 255.0) green:((20 * indexPath.row)/255.0) blue:((30 * indexPath.row)/255.0) alpha:1.0f];  
    return cell;  
} 

#pragma mark --UICollectionViewDelegateFlowLayout   
//定义每个UICollectionView 的大小  
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath  
{  
    return CGSizeMake(96, 100);  
}   

//定义每个UICollectionView 的 margin  
-(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section  
{  
    return UIEdgeInsetsMake(5, 5, 5, 5);  
}

#pragma mark --UICollectionViewDelegate   
//UICollectionView被选中时调用的方法  
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath  
{  
    UICollectionViewCell * cell = (UICollectionViewCell *)[collectionView cellForItemAtIndexPath:indexPath];  
    cell.backgroundColor = [UIColor whiteColor];  
}

//返回这个UICollectionView是否可以被选择  
-(BOOL)collectionView:(UICollectionView *)collectionView shouldSelectItemAtIndexPath:(NSIndexPath *)indexPath  
{  
    return YES;  
}