UICollectionView网格带适配横屏
老规矩!!!!
先来看效果:
1、网格视图的概念
UICollectionView（网格视图）是IOS6.0新增的一种UI控件，从直观上看，它非常像一个多列的表格控件，iBooks应用其实就是一个UIColectionView应用。
UICollectionView继承了UIScrollview，它具有UIScrollView的功能，UIScrollView中主要封装了多个UICollectionViewCell单元格控件，因此，UICollectionView默认可以对单元格进行滚动。
UICollectionView的数据加载与UITableView极其相似，它也有2个委托对象属性（UICollectionViewDataSource、UICollectionViewDelegate）
2、UICollectionView的用法
（1）程序不允许直接创建UICollectionViewCell单元格对象，必须先为UICollectionView注册单元格控件
（2）实现collectionView:numberOfItemsInSection：方法，该方法返回一个NSInteger类型，该返回值决定UICollectionView有多少个单元格
（3）实现collectionView:cellForItemAtIndexPath:方法，该方法返回一个UICollectionViewCell，该返回值决定每个单元格的内容。
（4）实现collectionView:layout:sizeForItemAtIndexPath :方法，该方法返回值返回一个CGSize，该返回值决定每个单元格的大小
（5）实现collectionView:layout:minimumLineSpacingForSectionAtIndex ：方法，返回一个CGFloat，决定每行之间的间隔像素。
（6）实现collectionView:layout:minimumInteritemSpacingForSectionAtIndex ：方法，返回一个CGFloat，决定每列之间的间隔像素。
（7）实现collectionView:layout:insetForSectionAtIndex :方法，该方法返回一个UIEdgeInsets，该返回值决定每个单元格与上、下、左、右的间距
代码:
ViewController.m
#import "ViewController.h"
#import "CollectionViewCell.h"
#import "HeaderCollectionReusableView.h"
#import "FooterCollectionReusableView.h"
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// 创建流布局对象
UICollectionViewFlowLayout *theFlow = [[UICollectionViewFlowLayout alloc]init];
// 设置单元格的大小
theFlow.itemSize = CGSizeMake(80, 100);
// 设定滚动方向
theFlow.scrollDirection = UICollectionViewScrollDirectionVertical;
// 最小列间距
theFlow.minimumInteritemSpacing = 10;
// 最小列间距
theFlow.minimumLineSpacing = 10;
// 设置分区边距
theFlow.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);
// 设置页眉的尺寸
theFlow.headerReferenceSize = CGSizeMake(40, 30);
// 设置页脚的尺寸
theFlow.footerReferenceSize = CGSizeMake(40, 30);
// 创建网格对象
UICollectionView *theColletion = [[UICollectionView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height) collectionViewLayout:theFlow];
// 设置代理
theColletion.delegate = self;
theColletion.dataSource = self;
// 设置可以滚动
theColletion.pagingEnabled = YES;
// 添加到视图上
[self.view addSubview:theColletion];
// 为网格注册单元格类
[theColletion registerClass:[CollectionViewCell class] forCellWithReuseIdentifier:@"collectionCell"];
// 为网格注册页眉类
[theColletion registerClass:[HeaderCollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"header"];
// 为网格注册页脚类
[theColletion registerClass:[FooterCollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"footer"];
}
#pragma -
#pragma mark - UICollectionViewDelegate
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
return 2;
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return 10;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
CollectionViewCell *theCell = [collectionView dequeueReusableCellWithReuseIdentifier:@"collectionCell" forIndexPath:indexPath];
// 设置显示数据
theCell.theImg.image = [UIImage imageNamed:@"3.jpg"];
theCell.theLabel.text = @"666";
return theCell;
}
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{
UICollectionReusableView *theReusable = nil;
if ([kind isEqualToString:UICollectionElementKindSectionHeader])
{
theReusable = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"header" forIndexPath:indexPath];
HeaderCollectionReusableView *theHeader = (HeaderCollectionReusableView *)theReusable;
theHeader.theTitleLabel.text = @"页眉";
}
else if ([kind isEqualToString:UICollectionElementKindSectionFooter])
{
theReusable = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"footer" forIndexPath:indexPath];
FooterCollectionReusableView *theFooter = (FooterCollectionReusableView *)theReusable;
theFooter.theTitleLabel.text = @"页脚";
}
return theReusable;
}
@end
CollectionViewCell.h 继承于UICollectionViewCell
@property(nonatomic,strong)UIImageView *theImg;
@property(nonatomic,strong)UILabel *theLabel;
CollectionViewCell.m
- (instancetype)initWithFrame:(CGRect)frame
{
if (self = [super initWithFrame:frame])
{
[self addSubview:self.theImg];
[self addSubview:self.theLabel];
}
return self;
}
- (UIImageView *)theImg
{
if (!_theImg)
{
_theImg = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 80, 80)];
}
return _theImg;
}
- (UILabel *)theLabel
{
if (!_theLabel)
{
_theLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, 80, 80, 20)];
_theLabel.font = [UIFont systemFontOfSize:18];
_theLabel.textAlignment = NSTextAlignmentCenter;
}
return _theLabel;
}
HeaderCollectionReusableView.h 继承于UICollectionReusableView
@property(nonatomic,strong)UILabel *theTitleLabel;
HeaderCollectionReusableView.m方法与上述一致!!
同理FooterCollectionReusableView.h继承于UICollectionReusableView
@property(nonatomic,strong)UILabel *theTitleLabel;
FooterCollectionReusableView.m方法与上述一致!!
在最后添加一个适配横屏的代码(第三方Masonry)
导入头文件
#import <Masonry.h>
在添加到视图之后添加
[theColletion mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(self.view);
}];
