iOS开发--UICollectionView的使用

UICollectionView 和 UICollectionViewController 类，用于展示集合视图，布局更加灵活，可实现多列布局，用法类似于UITableView 和 UITableViewController 类

使用UICollectionView 必须实现UICollectionViewDataSource,UICollectionViewDelegate，UICollectionViewDelegateFlowLayout这三个协议。

先给出一些常用的方法

//定义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];  
  
     return cell;  
} 
  
#pragma mark --UICollectionViewDelegateFlowLayout   
//定义每个UICollectionView 的大小  
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath  
{  
    return CGSizeMake(80, 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;  
}

下面用一个简单的例子介绍一下

在viewcontroller中添加一个uicollectionview

首先声明实现的协议

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController <UICollectionViewDataSource,UICollectionViewDelegateFlowLayout>


@end

因为UICollectionViewDelegateFlowLayout这个可以继承UICollectionViewDelegate所以它就不需要声明了

在.m中添加视图

首先创建一个布局类

UICollectionViewFlowLayout *flow =[[UICollectionViewFlowLayout alloc] init];
    
    // item 的尺寸
    flow.itemSize = CGSizeMake(60, 60);
    // item 的最小间距
    flow.minimumInteritemSpacing = 10;
    
    // 最小的行距
    flow.minimumLineSpacing = 10;
    //滚动方向
    flow.scrollDirection = UICollectionViewScrollDirectionVertical;

这里设置的布局属性都是可以在代理中重新设置的

然后创建视图

UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, 320, 568) collectionViewLayout:flow];
    collectionView.delegate = self;
    collectionView.dataSource = self;
    collectionView.backgroundColor = [UIColor orangeColor];
    
    // 注册cell
    [collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"newCell"];
    //添加视图 
    [self.view addSubview:collectionView];

实现必须的代理

// 设置组数
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
    return 2;
}

// 设置每组的个数
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return 10;
}

// 设置cell
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"newCell" forIndexPath:indexPath];
    
    cell.backgroundColor = [UIColor redColor];
    return cell;
}

这了的cell可以自定义一个，用xib画。

创建一个类继承自UIColectionViewCell,勾选创建xib

在xib中实现布局

要复用cell的话，需要在右边的identifier中输入复用的标记， 比如"newCell"

最后的效果， 两组，每组10个，垂直滚动。

要实现点击事件，可以实现代理方法

-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath

即可。

转载于:https://my.oschina.net/u/2320610/blog/380888