1.创建xib文件和CollectionViewController.h,.m文件
2.在View中拖入一个CollectionView,并在CollectionViewController.h中添加关联,并设置CollectionView的代理
3.将xib文件中CollectionView的File's Owner改为CollectionViewController
4.创建CollectionViewCell.h,.m文件和xib文件
5.在CollectionViewCell.xib中拖入一个ImageView和两个Label,并在CollectionViewCell.h中添加关联
添加如下代码
//CollectionView.h
#import <UIKit/UIKit.h>
@interface CollectionViewCell : UICollectionViewCell
@property (weak, nonatomic) IBOutlet UIImageView *goodsImg;
@property (weak, nonatomic) IBOutlet UILabel *goodsTitle;
@property (weak, nonatomic) IBOutlet UILabel *goodsDetail;
@end
//CollectionViewCell.m
#import "CollectionViewCell.h"
@implementation CollectionViewCell
- (void)awakeFromNib {
[super awakeFromNib];
// Initialization code
}
- (id)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self) {
[self setup];
}
return self;
}
- (void)setup {
//加载xib文件
[[NSBundle mainBundle] loadNibNamed:@"CollectionViewCell" owner:self options:nil];
}
@end
6.为CollectionView添加数据
//CollectionViewController.m
#import "CollectionViewController.h"
#import "CollectionViewCell.h"
#import "Good.h"
@interface CollectionViewController ()<UICollectionViewDelegate,UICollectionViewDataSource>
@property (weak, nonatomic) IBOutlet UICollectionView *collectionView;
@property (nonatomic, strong) NSMutableArray *goodsInfo;
@end
@implementation CollectionViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.collectionView.backgroundColor = [UIColor whiteColor];
//注册cell,添加复用标识
[self.collectionView registerClass:[CollectionViewCell class] forCellWithReuseIdentifier:@"identifier"];
[self setData];
}
- (void) setData {
self.goodsInfo = [[NSMutableArray alloc] init];
Good *g1 = [[Good alloc] init];
g1.title = @"自行车";
g1.description = @"山地自行车";
g1.image = @"ziXingChe";
[self.goodsInfo addObject:g1];
Good *g2 = [[Good alloc] init];
g2.title = @"饮料";
g2.description = @"汽水饮料";
g2.image = @"yinLiao";
[self.goodsInfo addObject:g2];
Good *g3 = [[Good alloc] init];
g3.title = @"柠檬";
g3.description = @"新鲜柠檬";
g3.image = @"ningMeng";
[self.goodsInfo addObject:g3];
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
//返回CollectionView中cell的总数
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
return self.goodsInfo.count;
}
//设置cell的size,宽为屏幕宽的一半,两个cell间隔10个像素,高为200像素
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
CGSize cellSize = CGSizeMake(([UIScreen mainScreen].bounds.size.width-10)/2, 200);
return cellSize;
}
//添加数据
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
CollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"identifier" forIndexPath:indexPath];
Good *good = [self.goodsInfo objectAtIndex:indexPath.row];
cell.goodsTitle.text = good.title;
cell.goodsTitle.text = good.description;
cell.goodsImg.image = [UIImage imageNamed:good.image];
//垂直分割线
CGSize contentSize = self.collectionView.contentSize;
UIView *verticalLine = [[UIView alloc]initWithFrame:CGRectMake(contentSize.width * 0.5 - 0.5, 0, 1, contentSize.height - 8)];
verticalLine.backgroundColor = [UIColor lightGrayColor];
verticalLine.alpha = 0.35;
[self.collectionView addSubview:verticalLine];
//水平分割线
UIView *horizontalLine = [[UIView alloc]initWithFrame:CGRectMake(0, (cell.frame.size.height + 10) * (indexPath.row + 1) , contentSize.width, 1)];
horizontalLine.backgroundColor = [UIColor lightGrayColor];
horizontalLine.alpha = 0.35;
[self.collectionView addSubview:horizontalLine];
return cell;
}
@end