UICollectionView瀑布流

定义MainVC.m与MainVC.h

UICollectionView内的每一个格是要放商品信息的，格式固定，我们在xib文件里排版。

按上图新建三个文件：

GoodsCollectionViewCell.xib的排版为：

Class为：GoodsCollectionViewCell

还有对象引用也一并做好，最终

GoodsCollectionViewCell.h代码为：

#import

@interface GoodsCollectionViewCell : UICollectionViewCell
{

}

@property (nonatomic, copy) NSString *photoPath;
@property (nonatomic, copy) NSString *goodsName;
@property (nonatomic, copy) NSString *digest;
@property (nonatomic, copy) NSString *price;
@property (nonatomic, copy) NSString *priceMarket;

@end

GoodsCollectionViewCell.m代码为：

#import "GoodsCollectionViewCell.h"

#define BASEURL "https://www.workneed.com"

@interface GoodsCollectionViewCell ()

@property (weak, nonatomic) IBOutlet UIImageView *imgPhotoPath;
@property (weak, nonatomic) IBOutlet UILabel *lbGoodsName;
@property (weak, nonatomic) IBOutlet UILabel *lbDigest;
@property (weak, nonatomic) IBOutlet UILabel *lbPrice;
@property (weak, nonatomic) IBOutlet UILabel *lbPriceMarket;

@end
@implementation GoodsCollectionViewCell

-(void)setPhotoPath:(NSString *)photoPath {
if (_photoPath != photoPath) {
_photoPath = [photoPath copy];

//拼接图片的名称
NSString *fileName = [NSString stringWithFormat: @"%s%@",BASEURL,_photoPath];
NSURL *imageUrl = [NSURL URLWithString:fileName];
_imgPhotoPath.image = [UIImage imageWithData:[NSData dataWithContentsOfURL:imageUrl]];

}
}

-(void)setGoodsName:(NSString *)goodsName {
if (_goodsName != goodsName) {
_goodsName = [goodsName copy];
_lbGoodsName.text=_goodsName;
}
}

-(void)setDigest:(NSString *)digest {
if (_digest != digest) {
_digest = [digest copy];
_lbDigest.text=_digest;
}
}

-(void)setPrice:(NSString *)price {
if (_price != price) {
_price = [price copy];
_lbPrice.text=_price;
}
}

-(void)setPriceMarket:(NSString *)priceMarket {
if (_priceMarket != priceMarket) {
_priceMarket = [priceMarket copy];
_lbPriceMarket.text=_priceMarket;
}
}

//这个函数需重载，不然cell不显示
-(instancetype)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self) {
self = [[NSBundle mainBundle]loadNibNamed:@"GoodsCollectionViewCell" owner:self options:nil].lastObject;
}
return self;
}

@end

#import "MainVC.h"
#import "GoodsCollectionViewCell.h" //引用上面定义的类

#define CELL_WIDTH 190 //collectViewCell宽度
#define CELL_HEIGHT 290 //collectViewCell高度

#define BASEURL "https://www.workneed.com"

//UICollectionViewDataSource,UICollectionViewDelegate要加上

@interface MainVC () < uicollectionviewdatasource,uicollectionviewdelegate >

@property (weak, nonatomic) IBOutlet UICollectionView *cvGoods;

@property (strong,nonatomic) NSMutableArray *arrHeight;//collectview上每个item的高度，item里放CollectViewCell
@property (strong,nonatomic) NSMutableArray *arrPhotoPath;//商品图片的数组
@property (strong,nonatomic) NSMutableArray *arrGoodsName;
@property (strong,nonatomic) NSMutableArray *arrDigest;
@property (strong,nonatomic) NSMutableArray *arrPrice;
@property (strong,nonatomic) NSMutableArray *arrPriceMarket;

@end
@implementation MainVC

-(void)viewDidLoad{
[super viewDidLoad];

self.arrHeight = [NSMutableArray array];//一定要初始化，不然后面的【self.arrHeight addObject】加不进值
self.arrPhotoPath = [NSMutableArray array];
self.arrGoodsName = [NSMutableArray array];
self.arrDigest = [NSMutableArray array];
self.arrPrice = [NSMutableArray array];
self.arrPriceMarket = [NSMutableArray array];
//这里只是给数组初始化，至于数组中存的数据，你自己实现了

}

#pragma mark -
//返回section的个数，填1即可
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
return 1;
}

//返回对应section的item个数
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
return self.arrGoodsName.count;//数组的元素个数，就是我们要定义的item个数
}

//定cell的宽和高
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
//CGFloat height=100+(arc4random()%100);随机的高，测试用

//给存cell高度的数组赋值
[self.arrHeight addObject:[NSString stringWithFormat:@"%d",CELL_HEIGHT]];
//NSLog(@"arrHeight=%@",self.arrHeight);

return  CGSizeMake(CELL_WIDTH, CELL_HEIGHT);
}

//返回对应item的UICollectionviewCell，这个函数会在每加一个商品时触发一次，一次加一个商品
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
//这个cell就是上面我们在xib文件里定义的
GoodsCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"GoodsCollectionViewCell" forIndexPath:indexPath];

cell.photoPath=self.arrPhotoPath[indexPath.row];//indexPath.row理解成当前索引更好，以上面定义的数组元素对应。按英文意思反而不好理解，不知老外是怎么想的
cell.goodsName=self.arrGoodsName[indexPath.row];
cell.digest=self.arrDigest[indexPath.row];
cell.price=self.arrPrice[indexPath.row];
cell.priceMarket=self.arrPriceMarket[indexPath.row];

//设置cell背景
cell.backgroundColor = [UIColor whiteColor];//[UIColor colorWithRed:256/255.0 green:256/255.0 blue:256/255.0 alpha:1.0];

// 设置圆角
cell.layer.cornerRadius = 5.0;
cell.layer.masksToBounds = YES;

//瀑布流设置，即：一行两列，Y坐标定在最短的地方
NSInteger remainder=indexPath.row%2;
NSInteger currentRow=indexPath.row/2;
CGFloat   currentHeight=[self.arrHeight[indexPath.row] floatValue];

CGFloat positonX=0;
if(remainder==0){
positonX=12;
}else{
positonX=CELL_WIDTH+22;
}
CGFloat positionY=(currentRow+1)*10;
for (NSInteger i=0; i NSInteger position=remainder+i*2;
positionY+=[self.arrHeight[position] floatValue];
}
cell.frame = CGRectMake(positonX, positionY,CELL_WIDTH,currentHeight);

return cell;
}

//点击事件
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
NSLog(@"%@",self.arrGoodsName[indexPath.row]);
//可写点击后跳转到商品详细页
}


@end