ios 应用UICollectionView实现瀑布流

一.自定义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=[[UIImageView alloc]init];

        [self addSubview:self.imageView];

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

        //透明栏

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

        float h=30;

        float x=0;

        float w=CGRectGetWidth(frame);

        float y=0;

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

        [self addSubview:self.bottomBar];

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

        

        //产品名

        y=0;

        float tempH=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]; 

    }

    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

{

    [super prepareLayout];

    

    self.itemWidth=150;

    

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

    

    self.delegate = (id <WaterFLayoutDelegate> )self.collectionView.delegate;

    

    CGSize size = self.collectionView.frame.size;

    _cellCount = [[self collectionView] numberOfItemsInSection:0];

    _center = CGPointMake(size.width / 2.0, size.height / 2.0);

    _radius = MIN(size.width, size.height) / 2.5;

}

-(CGSize)collectionViewContentSize

{

    return CGSizeMake(320, (leftY>rightY?leftY:rightY));

}

- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath  withIndex:(int)index

{

     CGSize itemSize = [self.delegate collectionView: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;

        

    }

 

    

    return attributes;

}

-(NSArray*)layoutAttributesForElementsInRect:(CGRect)rect

{

    x=0;

    leftY=0;

    rightY=0;

    

    NSMutableArray* attributes = [NSMutableArray array];

    

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

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

        NSIndexPath* indexPath = [NSIndexPath indexPathForItem:i inSection:0];

        

        [attributes addObject:[self layoutAttributesForItemAtIndexPath:indexPath withIndex:i]];

    }

    return attributes;

}

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

{

    UICollectionViewLayoutAttributes* attributes = [self layoutAttributesForItemAtIndexPath:itemIndexPath];

    attributes.alpha = 0.0;

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

    return attributes;

}

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

{

    UICollectionViewLayoutAttributes* attributes = [self layoutAttributesForItemAtIndexPath: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=[[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;

    

    [self addSubview:collectionView];

    

    collectionView.backgroundColor=[UIColor clearColor];

    

    [collectionView registerClass:[CollectionCell class] 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

{

    return UIEdgeInsetsMake(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

{

    return productList.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=[self getImgSize: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=[UIColor clearColor];

    

 

    //产品名

    y=0;

    float tempH=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:14 withTextColor:[UIColor whiteColor]];

 

    

    //产品价格

    y+=tempH;

    

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

    

    

    cell.priceLbl.text=[NSString stringWithFormat:@"￥%@",[item objectForKey:PRODUCT_PRICE]];

 

    

    return cell;

}

四.实现效果