ios 应用UICollectionView实现瀑布流

demo下载地址

https://yunpan.cn/cqZ4N6BKATNaK （提取码：8731）

一.自定义UICollectionViewCell

如>

#import <UIKit/UIKit.h>

@interface CollectionCell :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"

@implementation CollectionCell

- (id)initWithFrame:(CGRect)frame

{

    self = [super initWithFrame:frame];

    if (self)

    {

        

        self.imageView=[[UIImageViewalloc]init];

        [self addSubview:self.imageView];

        //--------------

        //透明栏

        //--------------

        float h=30;

        float x=0;

        float w=CGRectGetWidth(frame);

        float y=0;

        self.bottomBar=[[UIImageViewalloc]initWithFrame:CGRectMake(x, y, w, h)];

        [self addSubview:self.bottomBar];

        self.bottomBar.image=[UIImageimageNamed:@"toumingse.png"];

        

        //产品名

        y=0;

        float tempH=h/2;

        x=3;

        

        self.productNameLbl=[[CBAutoScrollLabelalloc]initWithFrame:CGRectMake(x, y, w, tempH)];

        self.productNameLbl.backgroundColor=[UIColorclearColor];

        

        [self.bottomBaraddSubview:self.productNameLbl];

        

        //产品价格

        y+=tempH;

         self.priceLbl=[[UILabelalloc]initWithFrame:CGRectMake(x, y, w, tempH)];

        

        self.priceLbl.textColor=[UIColorwhiteColor];

        self.priceLbl.backgroundColor=[UIColorclearColor];

        self. priceLbl.font=[UIFontsystemFontOfSize:12];

        [self.bottomBaraddSubview:self.priceLbl]; 

    }

    return self;

}

@end

二.创建自定义布局

 #import <UIKit/UIKit.h>

#pragma mark WaterF

@protocol WaterFLayoutDelegate <UICollectionViewDelegate>

@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

@interface MyLayout : UICollectionViewLayout

{

    float x;

    

    float leftY;

    

    float rightY;

}

@property float itemWidth;

    @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)id <WaterFLayoutDelegate> delegate;

    /// 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"

#define ITEM_SIZE 70

@implementation MyLayout

-(void)prepareLayout

{

    [superprepareLayout];

    

    self.itemWidth=150;

    

    self.sectionInset=UIEdgeInsetsMake(5,5,5,5);

    

    self.delegate = (id <WaterFLayoutDelegate> )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.collectionViewlayout: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;

        

    }

 

    

    return attributes;

}

-(NSArray*)layoutAttributesForElementsInRect:(CGRect)rect

{

    x=0;

    leftY=0;

    rightY=0;

    

    NSMutableArray* attributes = [NSMutableArrayarray];

    

    NSLog(@"cellCount=%d",self.cellCount);

    for (NSInteger i=0 ; i <self.cellCount; i++) {

        NSIndexPath* indexPath = [NSIndexPathindexPathForItem:iinSection:0];

        

        [attributes addObject:[selflayoutAttributesForItemAtIndexPath:indexPathwithIndex:i]];

    }

    return attributes;

}

- (UICollectionViewLayoutAttributes *)initialLayoutAttributesForInsertedItemAtIndexPath:(NSIndexPath *)itemIndexPath

{

    UICollectionViewLayoutAttributes* attributes = [selflayoutAttributesForItemAtIndexPath:itemIndexPath];

    attributes.alpha = 0.0;

    attributes.center = CGPointMake(_center.x,_center.y);

    return attributes;

}

- (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);

    return attributes;

}

@end

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

1.创建变量

@property (strong,nonatomic)  UICollectionView *collectionView;

2.初始化 

 MyLayout *layout=[[MyLayoutalloc]init];

    

    collectionView=[[UICollectionViewalloc]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=[UIColorclearColor];

    

    [collectionViewregisterClass:[CollectionCellclass]forCellWithReuseIdentifier:@"CollectionCell"];

3.实现代理

<UICollectionViewDelegate,UICollectionViewDataSource>

#pragma -mark UICollectionView delegate

//根据传入的图片得到宽高

-(CGSize)getImgSize:(UIImage *)image

{

    //得到比例

    

    float rate=(itemWidth/image.size.width);

    

    return CGSizeMake(itemWidth, (image.size.height*rate));

}

//定义每个UICollectionView 的大小

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

{

    

    NSDictionary *item=productList[indexPath.row];

  

    

    return [self getImgSize:[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=[[DetailViewControlleralloc]init];

    detailView.productID= [[item objectForKey:PRODUCT_ID] integerValue];

    

    [viewController.navigationControllerpushViewController:detailViewanimated: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=[UIColorclearColor];

    

    //图片名称

    //    NSString *imageToLoad = [NSString stringWithFormat:@"%d.png", indexPath.row];

    

    NSDictionary *item=productList[indexPath.row];

    

    NSString *productName;

    NSString *productImgUrl;

    

    if ([dataTypepsisEqualToString:TYPE_HISTORY])

    {

         NSArray *temp=[[itemobjectForKey: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);

    

    

  

     //--------------

    //透明栏

    //--------------

    float h=30;

    float x=0;

    float w=size.width;

    float y=size.height-h;

    

    cell.bottomBar.frame=CGRectMake(x, y, w, h);

    

    cell.bottomBar.backgroundColor=[UIColorclearColor];

    

 

    //产品名

    y=0;

    float tempH=h/2;

    x=3;

    

    

    cell.productNameLbl.frame=CGRectMake(x, y, w, tempH);

    

   

    cell.productNameLbl.backgroundColor=[UIColorclearColor];

    [commonUtilsetScrollLabel:cell.productNameLblwithText:productNamewithCenter:UITextAlignmentLeftwithFontSize:14withTextColor:[UIColorwhiteColor]];

 

    

    //产品价格

    y+=tempH;

    

    cell.priceLbl.frame=CGRectMake(x, y, w, tempH);

    

    

    cell.priceLbl.text=[NSStringstringWithFormat:@"￥%@",[itemobjectForKey:PRODUCT_PRICE]];

 

    

    return cell;

}

四.实现效果