由于工作需要，必须要实现一个类似京东的产品列表，左边产品类型，右边产品列表。点击不同的产品类型产品列表随之变化的功能；

参考了：http://www.cnblogs.com/wujy/p/4870133.html
大作以后了解到做这个东西需要有UITableView，UICollectionView，Masonry方面的知识，由于自己还处在摸索阶段，so~ 一样一样看呗。今天先看看UICollectionView，本来以为挺简单的，结果搞了一天还没理出什么头绪只是简单的通过代码建立了一下列表，贴上代码再说：

#import"ViewController.h"
// 要使用UICollectionView必须要实现的两个代理协议
// UICollectionViewDataSource:数据源协议  这个和tableview比较类似
// UICollectionViewDelegateFlowLayout布局协议 这个是独有的 创建UICollectionView的时候必须跟上布局，不然会崩溃
@interfaceViewController()<UICollectionViewDataSource,UICollectionViewDelegateFlowLayout>

@property(strong,nonatomic)UICollectionView*collectionView;

@end

@implementationViewController

- (void)viewDidLoad {

[superviewDidLoad];

//确定是水平滚动，还是垂直滚动

UICollectionViewFlowLayout*flowLayout=[[UICollectionViewFlowLayoutalloc]init];

[flowLayoutsetScrollDirection:UICollectionViewScrollDirectionVertical];

self.collectionView=[[UICollectionViewalloc]initWithFrame:CGRectMake(0,20,self.view.bounds.size.width,self.view.bounds.size.height)collectionViewLayout:flowLayout];

self.collectionView.dataSource=self;

self.collectionView.delegate=self;

//self.collectionView.delegate = self; 这里要特别注意不能写成这样，必须分开成两句写才有效，否则出来的是空白

[self.collectionViewsetBackgroundColor:[UIColorclearColor]];

//注册Cell，必须要有

[self.collectionView registerClass:[UICollectionViewCell class]forCellWithReuseIdentifier:@"UICollectionViewCell"];

[self.view addSubview:self.collectionView];

}

#pragma mark -- UICollectionViewDataSource

//定义展示的UICollectionViewCell的个数

-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
        return10;
}

//定义展示的Section的个数

-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
        return1;
}
//每个UICollectionView展示的内容

-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath

{

staticNSString* CellIdentifier =@"UICollectionViewCell";

UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:CellIdentifier forIndexPath:indexPath];

cell.backgroundColor= [UIColorcolorWithRed:((10* indexPath.row) /255.0)green:((20* indexPath.row)/255.0)blue:((30* indexPath.row)/255.0)alpha:1.0f];

UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(0,0,20,20)];

label.textColor= [UIColorredColor];

label.text= [NSStringstringWithFormat:@"%ld",(long)indexPath.row];

for(idsubViewincell.contentView.subviews) {

[subViewremoveFromSuperview];

}

[cell.contentViewaddSubview:label];

returncell;

}

#pragma mark --UICollectionViewDelegateFlowLayout

//定义每个Item的大小

- (CGSize)collectionView:(UICollectionView*)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath*)indexPath

{

returnCGSizeMake(300,70);

}

//定义每个UICollectionView的margin

-(UIEdgeInsets)collectionView:(UICollectionView*)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section

{

returnUIEdgeInsetsMake(0,0,0,0);

}

#pragma mark --UICollectionViewDelegate

//UICollectionView被选中时调用的方法

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

{

NSLog(@"item======%ld",(long)indexPath.item);

NSLog(@"row=======%ld",(long)indexPath.row);

NSLog(@"section===%ld",(long)indexPath.section);

}

//返回这个UICollectionView是否可以被选择

-(BOOL)collectionView:(UICollectionView*)collectionView shouldSelectItemAtIndexPath:(NSIndexPath*)indexPath

{

returnYES;

}

@end

运行效果如下图：

img.png