ios UICollectionView实现瀑布流 

通过自定义collectionViewCell和重写collectionViewLayout

一.自定义UICollectionViewCell

如>#import@interfaceCollectionCell : UICollectionViewCell

@property (strong, nonatomic)  UIImageView*imageView;

@property (strong, nonatomic)  UIImageView*bottomBar;

@property (strong, nonatomic) CBAutoScrollLabel*productNameLbl;

@property (strong, nonatomic) UILabel*priceLbl;@end////CollectionCell.m//CollectionView////Created by Piosa on 14-6-13.//Copyright (c) 2014年 D2space. All rights reserved.//#import"CollectionCell.h"@implementationCollectionCell- (id)initWithFrame:(CGRect)frame{self=[super initWithFrame:frame];if(self){self.imageView=[[UIImageView alloc]init];[selfaddSubview:self.imageView];//--------------//透明栏//--------------floath=30;floatx=0;floatw=CGRectGetWidth(frame);floaty=0;self.bottomBar=[[UIImageView alloc]initWithFrame:CGRectMake(x, y, w, h)];[selfaddSubview:self.bottomBar];self.bottomBar.image=[UIImage imageNamed:@"toumingse.png"];//产品名y=0;floattempH=h/2;x=3;self.productNameLbl=[[CBAutoScrollLabel alloc]initWithFrame:CGRectMake(x, y, w, tempH)];self.productNameLbl.backgroundColor=[UIColor clearColor];[self.bottomBar addSubview:self.productNameLbl];//产品价格y+=tempH;self.priceLbl=[[UILabel alloc]initWithFrame:CGRectMake(x, y, w, tempH)];self.priceLbl.textColor=[UIColor whiteColor];self.priceLbl.backgroundColor=[UIColor clearColor];self. priceLbl.font=[UIFont systemFontOfSize:12];[self.bottomBar addSubview:self.priceLbl];}returnself;}@end二.创建自定义布局#import#pragmamark WaterF@protocolWaterFLayoutDelegate @required- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath;

@optional- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout heightForHeaderInSection:(NSInteger)section;- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout heightForFooterInSection:(NSInteger)section;@end@interfaceMyLayout : UICollectionViewLayout{floatx;floatleftY;floatrightY;

}

@propertyfloatitemWidth;@property (nonatomic, assign) CGPoint center;@property (nonatomic, assign) CGFloat radius;@property (nonatomic, assign) NSInteger cellCount;///The delegate will point to collection view's delegate automatically.@property (nonatomic, weak)iddelegate;///Array to store attributes for all items includes headers, cells, and footers@property (nonatomic, strong) NSMutableArray*allItemAttributes;@property (nonatomic, assign) UIEdgeInsets sectionInset;@end#import"MyLayout.h"#defineITEM_SIZE 70@implementationMyLayout-(void)prepareLayout{[super prepareLayout];self.itemWidth=150;self.sectionInset=UIEdgeInsetsMake(5,5,5,5);self.delegate= (id )self.collectionView.delegate;CGSize size=self.collectionView.frame.size;_cellCount= [[selfcollectionView] numberOfItemsInSection:0];_center= CGPointMake(size.width /2.0, size.height /2.0);_radius= MIN(size.width, size.height) /2.5;

}-(CGSize)collectionViewContentSize{returnCGSizeMake(320, (leftY>rightY?leftY:rightY));

}- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath  withIndex:(int)index{CGSize itemSize= [self.delegatecollectionView:self.collectionView layout:selfsizeForItemAtIndexPath:indexPath];CGFloat itemHeight= floorf(itemSize.height *self.itemWidth /itemSize.width);UICollectionViewLayoutAttributes*attributes =[UICollectionViewLayoutAttributeslayoutAttributesForCellWithIndexPath:indexPath];index+=1;if(index%2==0){x+=(self.itemWidth+self.sectionInset.left);rightY+=self.sectionInset.top;attributes.frame=CGRectMake(x, rightY,self.itemWidth, itemHeight);rightY+=itemHeight;}else{x=self.sectionInset.left;leftY+=self.sectionInset.top;attributes.frame=CGRectMake(x, leftY,self.itemWidth, itemHeight);leftY+=itemHeight;}returnattributes;

}-(NSArray*)layoutAttributesForElementsInRect:(CGRect)rect{x=0;leftY=0;rightY=0;NSMutableArray* attributes =[NSMutableArrayarray];NSLog(@"cellCount=%d",self.cellCount);for(NSInteger i=0; i

}- (UICollectionViewLayoutAttributes *)initialLayoutAttributesForInsertedItemAtIndexPath:(NSIndexPath*)itemIndexPath{UICollectionViewLayoutAttributes* attributes =[selflayoutAttributesForItemAtIndexPath:itemIndexPath];attributes.alpha=0.0;attributes.center=CGPointMake(_center.x, _center.y);returnattributes;

}- (UICollectionViewLayoutAttributes *)finalLayoutAttributesForDeletedItemAtIndexPath:(NSIndexPath*)itemIndexPath{UICollectionViewLayoutAttributes* attributes =[selflayoutAttributesForItemAtIndexPath:itemIndexPath];attributes.alpha=0.0;attributes.center=CGPointMake(_center.x, _center.y);attributes.transform3D= CATransform3DMakeScale(0.1,0.1,1.0);returnattributes;

}@end三.创建UICollectionView用之前自定义的布局进行初始化并注册之前自定义的UICollectionViewCell，参照如下1.创建变量

@property (strong, nonatomic)  UICollectionView*collectionView;2.初始化

MyLayout*layout=[[MyLayout alloc]init];collectionView=[[UICollectionView alloc]initWithFrame:CGRectMake(0,0, CGRectGetWidth(self.frame),CGRectGetHeight(self.frame)) collectionViewLayout:layout];collectionView.delegate=self;collectionView.dataSource=self;collectionView.scrollEnabled=YES;[selfaddSubview:collectionView];collectionView.backgroundColor=[UIColor clearColor];[collectionView registerClass:[CollectionCellclass] forCellWithReuseIdentifier:@"CollectionCell"];3.实现代理#pragma-mark UICollectionView delegate//根据传入的图片得到宽高-(CGSize)getImgSize:(UIImage *)image{//得到比例floatrate=(itemWidth/image.size.width);returnCGSizeMake(itemWidth, (image.size.height*rate));

}//定义每个UICollectionView 的大小- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{NSDictionary*item=productList[indexPath.row];return[selfgetImgSize:[item objectForKey:KEY_PRODUCT_IMG]];}//定义每个UICollectionView 的 margin-(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{returnUIEdgeInsetsMake(5,5,5,5);

}-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{NSLog(@"indexPath=%d",indexPath.row);NSDictionary*item=productList[indexPath.row];DetailViewController*detailView=[[DetailViewController alloc]init];detailView.productID=[[item objectForKey:PRODUCT_ID] integerValue];[viewController.navigationController pushViewController:detailView animated:YES]; }//每个section的item个数-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{returnproductList.count;

}-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionViews cellForItemAtIndexPath:(NSIndexPath*)indexPath{CollectionCell*cell = (CollectionCell *)[collectionViewsdequeueReusableCellWithReuseIdentifier:@"CollectionCell"forIndexPath:indexPath];cell.backgroundColor=[UIColor clearColor];//图片名称//NSString *imageToLoad = [NSString stringWithFormat:@"%d.png", indexPath.row];NSDictionary*item=productList[indexPath.row];NSString*productName;NSString*productImgUrl;if([dataTypeps isEqualToString:TYPE_HISTORY]){NSArray*temp=[[item objectForKey:PRODUCT_NAME] componentsSeparatedByString:@":"];productName=temp[0];}else{productName=[item objectForKey:PRODUCT_NAME];}UIImage*img=[item objectForKey:KEY_PRODUCT_IMG];CGSize size=[selfgetImgSize:img];//加载图片cell.imageView.image=img;cell.imageView.frame=CGRectMake(0,0, size.width, size.height);//--------------//透明栏//--------------floath=30;floatx=0;floatw=size.width;floaty=size.height-h;cell.bottomBar.frame=CGRectMake(x, y, w, h);cell.bottomBar.backgroundColor=[UIColor clearColor];//产品名y=0;floattempH=h/2;x=3;cell.productNameLbl.frame=CGRectMake(x, y, w, tempH);cell.productNameLbl.backgroundColor=[UIColor clearColor];[commonUtil setScrollLabel:cell.productNameLbl withText:productName withCenter:UITextAlignmentLeftwithFontSize:14withTextColor:[UIColor whiteColor]];//产品价格y+=tempH;cell.priceLbl.frame=CGRectMake(x, y, w, tempH);cell.priceLbl.text=[NSString stringWithFormat:@"￥%@",[item objectForKey:PRODUCT_PRICE]];returncell;

}