UICollectionView 瀑布流 自定义cell 与表头表尾 自适应高度

//自定义cell

//自定义表头和表尾

//根据原图片自定义cell的高度

#import "RootViewController.h" #import "GirlCollectionViewCell.h"

#import "HeaderCollectionReusableView.h"
#import "FooterCollectionReusableView.h"

#import "GirlModel.h"

@interface RootViewController () <UICollectionViewDataSource,UICollectionViewDelegate,UICollectionViewDelegateFlowLayout>

@property (nonatomic ,retain)NSMutableArray *dataArray;

@end

@implementation RootViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
   
    [self setUpData];
   
    //自定义 cell
    //ImageView
    //自定义表头 表尾
    //表头 label
    //表尾 imageView
  
    [self addCollectionView];

}

//加载数据
- (void)setUpData
{
    NSString *path = [[NSBundle mainBundle] pathForResource:@"imageResource" ofType:@"json"];
    NSData *data = [NSData dataWithContentsOfFile:path];
   
    NSArray *array = [NSJSONSerialization JSONObjectWithData:data options:(NSJSONReadingMutableContainers) error:nil];
    self.dataArray = [NSMutableArray array];
   
    for (NSDictionary *dic in array) {
        GirlModel *model = [[GirlModel alloc] init];
        [model setValuesForKeysWithDictionary:dic];
        [self.dataArray addObject:model];
        [model release];
    }
   
}

- (void)addCollectionView
{
    //创建网状布局
    UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
    //最小行边距
    layout.minimumLineSpacing = 20;
    //最小列边距
    layout.minimumInteritemSpacing = 20;
    //item大小
    layout.itemSize = CGSizeMake(140, 130);
    //滚动方向
    layout.scrollDirection = UICollectionViewScrollDirectionVertical;
    //分区 上下左右的缩进距离(内边距)
    layout.sectionInset = UIEdgeInsetsMake(30, 30, 30, 30);
   
    //表头size
    layout.headerReferenceSize = CGSizeMake(0, 150);
    //表尾size
    layout.footerReferenceSize = CGSizeMake(0, 300);
   
   
    //创建UICollectionView
    UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:[UIScreen mainScreen].bounds collectionViewLayout:layout];
    //设置代理
    collectionView.dataSource = self;
    collectionView.delegate = self;
    collectionView.backgroundColor = [UIColor whiteColor];
    [self.view addSubview:collectionView];
    [collectionView release];
   
    //注册cell
    [collectionView registerClass:[GirlCollectionViewCell class] forCellWithReuseIdentifier:@"GirlCell"];
    //注册表头
    [collectionView registerClass:[HeaderCollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"Header"];
    //注册表尾
    [collectionView registerClass:[FooterCollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"Footer"];
   

}

#pragma mark -- 代理方法
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return self.dataArray.count;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    GirlCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"GirlCell" forIndexPath:indexPath];
   
    GirlModel *model = self.dataArray[indexPath.row];
    cell.model = model;
   
   
    return cell;
}

- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{
    if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {
        HeaderCollectionReusableView *Header = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"Header" forIndexPath:indexPath];
        Header.backgroundColor = [UIColor redColor];
       
        //显示文字
        Header.label.text = @"还记得那时记下了很多类似的句子，我怕真有一天我忘记了它们，也忘记了那段记忆";
        Header.label.numberOfLines = -1;
        return Header;
    }else
    {
        FooterCollectionReusableView *Footer = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"Footer" forIndexPath:indexPath];
        Footer.backgroundColor = [UIColor blueColor];
       
        Footer.footerImageView.image = [UIImage imageNamed:@"5.jpg"];
        return Footer;
    }
}

#pragma mark -- UICollectionViewDelegateFlowLayout 代理方法

自定义cell中ImageView的高度  防止图片变形和失真

//实现等比缩放 根据model修改 当前的item的高度
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    // 取出对应的model
    GirlModel *model = self.dataArray[indexPath.row];
    //获取图片的原高度
    CGFloat width = model.width;
    CGFloat height = model.height;
    //获取缩放的比例
    CGFloat scale = 140 / width;
    //要获取缩放的高度
    CGFloat newHeight = scale * height;
   
    return  CGSizeMake(140, newHeight);
   
}

//cell点击方法
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    NSLog(@"点我了");
}

-----------------------------------------------------------------------

// 自定义 cell

//ImageView

-----------------------------------------------------------------------

#import

#import “GirlModel.h"

//注意这里继承UICollectionViewCell

@interface GirlCollectionViewCell : UICollectionViewCell

@property ( nonatomic , retain ) UIImageView *imageView;

@property ( nonatomic , retain ) GirlModel *model;

@end

-----------------------------------------------------------------------

#import "GirlCollectionViewCell.h"
#import "UIImageView+WebCache.h"
@implementation GirlCollectionViewCell

- (void)dealloc
{
    [_imageView release];
    [_model release];
    [super dealloc];
}


//重写一个初始化方法
- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        //添加控件
       
        CGFloat height = frame.size.height;
        CGFloat width = frame.size.width;
       
        self.imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, width, height)];
        self.imageView.backgroundColor = [UIColor cyanColor];
        //添加到cell的显示内容的区域
        [self.contentView addSubview:self.imageView];
        [self.imageView release];
       
       
    }
    return self;
}

- (void)setModel:(GirlModel *)model
{
    if (_model != model) {
        [_model release];
        _model = [model retain];
    }
    //利用SDWebImage 加载图片
    [self.imageView sd_setImageWithURL:[NSURL URLWithString:model.thumbURL] placeholderImage:[UIImage imageNamed:@"5.jpg"]];

   

  自定义cell中ImageView的高度  防止图片变形和失真

    //重新ImageView的高度进行赋值
    // 计算一下缩放的比例
    CGFloat scale = 140 / model.width;
    CGFloat newHeight = scale * model.height;

    self.imageView.frame = CGRectMake(0, 0, 140, newHeight);
}

@end

-----------------------------------------------------------------------

// 自定义表头 表尾

// 表头 label

-----------------------------------------------------------------------

#import

//注意继承UICollectionReusableView

@interface HeaderCollectionReusableView : UICollectionReusableView

@property (nonatomic,retain)UILabel *label;

@end

-----------------------------------------------------------------------

#import "HeaderCollectionReusableView.h"

@implementation HeaderCollectionReusableView

- (void)dealloc
{
    [_label release];
    [super dealloc];
}

//重写初始化方法
- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
       
        CGFloat height = frame.size.height;
        CGFloat width = frame.size.width;
        self.label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, width, height)];
       
        self.label.backgroundColor = [UIColor yellowColor];
       
        [self addSubview:self.label];
       
        [self.label release];
       
    }
    return self;
}

-----------------------------------------------------------------------

//表尾 imageView

-----------------------------------------------------------------------

#import

@interface FooterCollectionReusableView : UICollectionReusableView

@property (nonatomic,retain)UIImageView *footerImageView;

@end

-----------------------------------------------------------------------

#import "FooterCollectionReusableView.h"

@implementation FooterCollectionReusableView

- (void)dealloc
{
    [_footerImageView release];
    [super dealloc];
}

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
       
        CGFloat height = frame.size.height;
        CGFloat width = frame.size.width;
       
        self.footerImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, width, height)];
        self.footerImageView.backgroundColor = [UIColor greenColor];
        //添加到cell的显示内容的区域
        [self addSubview:self.footerImageView];
        [self.footerImageView release];
       
    }
    return self;
}

@end

-----------------------------------------------------------------------

//创建一个model

#import
#import

@interface GirlModel : NSObject

@property (nonatomic,retain)NSString *thumbURL;

@property (nonatomic,assign)CGFloat width;

@property (nonatomic,assign)CGFloat height;

@end

-----------------------------------------------------------------------

#import "GirlModel.h"

@implementation GirlModel

- (void)dealloc
{
    [_thumbURL release];
    [super dealloc];
}

- (void)setValue:(id)value forUndefinedKey:(NSString *)key
{
   
}

@end

-----------------------------------------------------------------------

UI21  21-UICollectionViewCell