要求是图片为正方形，图片下面是标题和其它的内容，我这里图片和文字都写给的固定的值
做完后的效果是这样的：
2017年8月30日 .png
流布局UICollectionViewFlowLayout继承自UICollectionViewLayout，他有几个关键的属性这里介绍一下：
- itemSize：设置每一个item的宽高尺寸
- minimumLineSpacing：设置列表中每行的间距(不包括与控件最顶部和最底部间距)
- minimumInteritemSpacing：设置列表中每列的间距(不包括与控件最左边和最右边间距)
- sectionInset：设置UICollectionView整体top、left、bottom、right间距
- -(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谢谢！
