IOS开发中UICollectionView的流布局的Cell的

要求是图片为正方形，图片下面是标题和其它的内容，我这里图片和文字都写给的固定的值
做完后的效果是这样的：

2017年8月30日 .png

流布局UICollectionViewFlowLayout继承自UICollectionViewLayout，他有几个关键的属性这里介绍一下：

1. itemSize：设置每一个item的宽高尺寸
2. minimumLineSpacing：设置列表中每行的间距(不包括与控件最顶部和最底部间距)
3. minimumInteritemSpacing：设置列表中每列的间距(不包括与控件最左边和最右边间距)
4. sectionInset：设置UICollectionView整体top、left、bottom、right间距
5. -(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath方法动态设置每个item的尺寸

其它方法比较简单，下面展示代码：

MyCollectionViewController.h

#import <UIKit/UIKit.h>

@interface MyCollectionViewController : UICollectionViewController

@end

MyCollectionViewController.m

#import "MyCollectionViewController.h"
#import "MyCollectionViewCell.h"

@interface MyCollectionViewController ()

@property (nonatomic,assign) CGFloat itemWidth;

@end

@implementation MyCollectionViewController

static NSString * const reuseIdentifier = @"Cell";

-(CGFloat) itemWidth{
    if (_itemWidth==0.f) {
        _itemWidth=(SCREEN_WIDTH-3*MARGIN15)*0.5;
    }
    return _itemWidth;
}

- (instancetype)init{
    
    UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc]init];
    // UICollectionViewFlowLayout流布局的内部成员属性有以下：
    /**
     @property (nonatomic) CGFloat minimumLineSpacing;
     @property (nonatomic) CGFloat minimumInteritemSpacing;
     @property (nonatomic) CGSize itemSize;
     @property (nonatomic) CGSize estimatedItemSize NS_AVAILABLE_IOS(8_0); // defaults to CGSizeZero - setting a non-zero size enables cells that self-size via -preferredLayoutAttributesFittingAttributes:
     @property (nonatomic) UICollectionViewScrollDirection scrollDirection; // default is UICollectionViewScrollDirectionVertical
     @property (nonatomic) CGSize headerReferenceSize;
     @property (nonatomic) CGSize footerReferenceSize;
     @property (nonatomic) UIEdgeInsets sectionInset;
     */
    
    // 定义大小
//    layout.itemSize = CGSizeMake(self.itemWidth,self.itemWidth);
    // 设置最小行间距
    layout.minimumLineSpacing = MARGIN15;
    // 设置垂直间距
    layout.minimumInteritemSpacing = MARGIN15;
    // 设置滚动方向（默认垂直滚动）
//    layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
    // 设置边缘是对整个CollectionView而言的间距，默认是{0，0，0，0}
    layout.sectionInset = UIEdgeInsetsMake(MARGIN15, MARGIN15, MARGIN15, MARGIN15);
    
    return [self initWithCollectionViewLayout:layout];
}

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.title = @"UICollectionView";
    self.collectionView.backgroundColor = [UIColor whiteColor];
    self.collectionView.frame = self.view.bounds;
# pragma mark Register cell classes 纯代码才使用这个
    [self.collectionView registerClass:[MyCollectionViewCell class] forCellWithReuseIdentifier:reuseIdentifier];
# pragma mark  通过xib注册必须用这个
//    [self.collectionView registerNib:[UINib nibWithNibName:NSStringFromClass([CYXNormalCell class]) bundle:nil] forCellWithReuseIdentifier:reuseIdentifier];
//    [self.collectionView setAccessibilityIdentifier:@"collectionView"];
//    [self.collectionView setIsAccessibilityElement:YES];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    return CGSizeMake(self.itemWidth,self.itemWidth+40);
}

#pragma mark <UICollectionViewDataSource>


- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return 40;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    MyCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:reuseIdentifier forIndexPath:indexPath];
    cell.itemLabel.text=@"哈哈哈哈";
    cell.itemTitle.text=@"大大的标题";
    return cell;
}

#pragma mark - <UICollectionViewDelegate>
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    NSLog(@"------%zd", indexPath.item);
}
@end

MyCollectionViewCell.h

#import <UIKit/UIKit.h>

@interface MyCollectionViewCell : UICollectionViewCell

@property(strong,nonatomic)UIImageView *itemImageView;

@property(strong,nonatomic)UILabel *itemTitle;

@property(strong,nonatomic)UILabel *itemLabel;

@end

MyCollectionViewCell.m

#import "MyCollectionViewCell.h"

#pragma mark 类的扩展
@interface MyCollectionViewCell ()

@end

@implementation MyCollectionViewCell

-(CGFloat)itemWidth{
    return (SCREEN_WIDTH-3*MARGIN15)*0.5;
}

#pragma mark 懒加载ImageView
-(UIImageView*)itemImageView{
    if (_itemImageView==nil) {
        _itemImageView=[[UIImageView alloc] initWithFrame:CGRectMake(0, 0,[self itemWidth], [self itemWidth])];
    }
    return _itemImageView;
}

#pragma mark 懒加载Title
-(UILabel*)itemTitle{
    if (_itemTitle==nil) {
        _itemTitle=[[UILabel alloc] initWithFrame:CGRectMake(0,CGRectGetMaxY(self.itemImageView.frame),[self itemWidth], 20)];
        _itemTitle.numberOfLines=1;
        _itemTitle.font=[UIFont systemFontOfSize:13];
        _itemTitle.textColor=[UIColor redColor];
        _itemTitle.text=@"标题";
        _itemTitle.backgroundColor=[UIColor grayColor];
    }
    return _itemTitle;
}

-(UILabel*)itemLabel{
    if (_itemLabel==nil) {
        _itemLabel=[[UILabel alloc] initWithFrame:CGRectMake(0,CGRectGetMaxY(self.itemTitle.frame) , [self itemWidth], 20)];
        _itemLabel.numberOfLines=1;
        _itemLabel.font=[UIFont systemFontOfSize:13];
        _itemLabel.textColor=[UIColor blueColor];
        _itemLabel.backgroundColor=[UIColor darkGrayColor];
        _itemLabel.text=@"我是文本";
    }
    return _itemLabel;
}


-(instancetype)initWithFrame:(CGRect)frame{
    self=[super initWithFrame:frame];
    self.itemImageView.image=[UIImage imageNamed:@"1441594747553218"];
    [self.contentView addSubview:self.itemImageView];
    [self.contentView addSubview:self.itemTitle];
    [self.contentView addSubview:self.itemLabel];
    return self;
}
#pragma mark 这里方法可以根据模型内容动态设置控件frame
-(void)layoutSubviews{
    [super layoutSubviews];
    NSLog(@"======layoutSubviews======");
}
@end

PrefixHeader_pch.pch文件定义全局常用的一些值

#ifndef PrefixHeader_pch
#define PrefixHeader_pch

// Include any system framework and library headers here that should be included in all compilation units.
// You will also need to set the Prefix Header build setting of one or more of your targets to reference this file.

#define SCREEN_WIDTH [UIScreen mainScreen].bounds.size.width
#define MARGIN15 15

#endif /* PrefixHeader_pch */

好了，所要的效果达到了。
怎么样简单吧，如果有点帮助，帮忙点个赞O(∩_∩)O谢谢！