iOS开发UICollectionView篇---UICollectionView小结+实例

UICollectionView 主要用于展示网格布局,可以实现多列布局,使用方法和UITableView十分相象。说到不同点,collectionView与tableView最 大的不同点就是:collectionView必须要使用自己的layout(UICollectionViewFlowLayout)(如下),并且在 创建collectionView的时候需要带layout的初始化方法(如下),因此UICollectionView也比UITableView多了一个UICollectionViewDelegateFlowLayout协议,我们在使用UICollectionView的时候就需要实现UICollectionViewDataSource,UICollectionViewDelegate,UICollectionViewDelegateFlowLayout这三个协议。

UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
//设置对齐方式
[layout setScrollDirection:UICollectionViewScrollDirectionVertical];
//cell间距
layout.minimumInteritemSpacing = 1.0f;
//cell行距
layout.minimumLineSpacing = 1.0f;
_collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, is_IOS_7?64:44, SCREEN_WIDTH, SCREEN_HEIGHT-64) collectionViewLayout:layout];

我们在使用UICollectionView的时候一些常用方法如下:


#pragma mark -- UICollectionViewDataSource
//展示的UICollectionViewCell的个数
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return 10;
}
//定义展示的Section的个数
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
    return 2;
}
//每个UICollectionView展示的内容
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    BTCollectionCell *cell =[collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath];
    
    cell.imageView.image = [UIImage imageNamed:@"tupian"];
    cell.titleLabel.text = [NSString stringWithFormat:@"第%d组,第%d个",indexPath.section,indexPath.row];
    cell.titleLabel.tag = 100+indexPath.row;
    
    return cell;
}


#pragma mark --UICollectionViewDelegateFlowLayout
//定义每个UICollectionView 的 margin
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section
{
    //整个视图的顶端左端底端右端
    UIEdgeInsets top = {5,5,5,5};
    return top;
}
//定义每个UICollectionView的大小,注意:这里需要和BTCollectionCell的大小设置一致
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    return CGSizeMake(140, 80);
}

#pragma mark --UICollectionViewDelegate
//UICollectionView被选中时调用的方法
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    BTCollectionCell *cell = (BTCollectionCell *)[collectionView cellForItemAtIndexPath:indexPath];
    
    UILabel *label = (UILabel *)[cell viewWithTag:100+indexPath.row];
    label.backgroundColor = RGBACOLOR(42, 183, 251, 1);
    label.textColor = [UIColor whiteColor];
}

知道了这些方法以后,下面就来实际操作下,小试牛刀。因为collectionCell必须要我们自己添加,没有设置默认的cell布局,这里我选择用xib来自定义

新建类BTCollectionCell继承自UICollectionViewCell

095223_5AYX_2320599.png

新建Xib,命名为BTCollectionCell.xib

095310_B5k3_2320599.png

选中BTCollectionCell.xib删掉默认的View,从控件中拖一个Collection View Cell到画布中,然后设置Collection View Cell得大小

095420_TgjZ_2320599.jpg

选中刚刚添加的Cell,选择class为BTCollectionCell

095512_xalB_2320599.jpg

选中BTCollectionCell.xib 修改其identifier为BTCollectionCell

095748_W0pk_2320599.jpg

在BTCollectionCell中添加一个ImageView和一个Label,并且设置他们得坐标,并添加映射

095630_N26V_2320599.jpg

095630_y9Be_2320599.jpg

选中BTCollectionCell.m , 重写init方法

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // 初始化时加载BTCollectionCell.xib文件,注意名字不要写错
        NSArray *collectionArrayOfViews = [[NSBundle mainBundle] loadNibNamed:@"BTCollectionCell" owner:self options:nil];
        
        // 如果路径不存在,返回nil
        if (collectionArrayOfViews.count < 1)
        {
            return nil;
        }
        
        // 如果xib中view不属于UICollectionViewCell类,return nil
        if (![[collectionArrayOfViews objectAtIndex:0] isKindOfClass:[UICollectionViewCell class]])
        {
            return nil;
        }
        
        // 加载nib
        self = [collectionArrayOfViews objectAtIndex:0];
    }
    return self;
}
//创建UICollectionView,在viewDidLoad里面调用initCollectionView方法
-(void)initCollectionView
{
    UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
    //设置对齐方式
    [layout setScrollDirection:UICollectionViewScrollDirectionVertical];
    //cell间距
    layout.minimumInteritemSpacing = 1.0f;
    //cell行距
    layout.minimumLineSpacing = 1.0f;
    
    _collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, is_IOS_7?64:44, SCREEN_WIDTH, SCREEN_HEIGHT-64) collectionViewLayout:layout];
    
    //声明cell得类为BTCollectionCell,这句一定要写,不然程序会崩溃
    [_collectionView registerClass:[BTCollectionCell class] forCellWithReuseIdentifier:@"cell"];
    
    _collectionView.delegate = self;
    _collectionView.dataSource = self;
    _collectionView.backgroundColor = RGBACOLOR(234, 234, 234, 1);
    [self.view addSubview:_collectionView];
}
//不要忘记导入BTCollectionCell头文件
#import "BTCollectionCell.h"
//声明他们的代理(实现代理方法前面已经说过了,这里就不再细说)
@interface BTCollectionViewController ()<UICollectionViewDataSource,UICollectionViewDelegate,UICollectionViewDelegateFlowLayout>
{
    UICollectionView *_collectionView;
}
@end

最后来看看效果图咯

102445_h95K_2320599.png