一.自定义UICollectionViewCell如>#import 
     
      @interface CollectionCell : UICollectionViewCell@property (strong, nonatomic)  UIImageView *imageView;@property (strong, nonatomic)  UIImageView *bottomBar;@property (strong, nonatomic) CBAutoScrollLabel *productNameLbl;@property (strong, nonatomic) UILabel *priceLbl;@end#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 
      
       #pragma mark WaterF@protocol WaterFLayoutDelegate 
       
        @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 
        
          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 
         
           )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.实现代理
          
           #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;}
          
         
        
       
      
     

 

 

四.实现效果