自定义网格+跳转
2018-03-30 本文已影响0人
您079
在 ViewController 中写网格， 在 AppDelegate 中导入头文件
#import "ViewController.h" // 导入头文件
在 -didFinishLaunchingWithOptions: 方法中做以下操作
// 创建主页面
ViewController *yyVC = [[ViewController alloc] init];
// 设置 标题
vc.title = @"网格";
// 包装导航控制器
UINavigationController *yyNav = [[UINavigationController alloc] initWithRootViewController:yyVC];
// 更改主窗口
self.window.rootViewController = yyNav;
创建四个类，分别的写自定义cell的，还有网格的头部和尾部视图，和跳转到下一页的类
例：自定义 cell 的类类名为：MyCollectionViewCell.h
编写网格头部的类类名为：HeaderView.h
编写网格尾部的类类名为：FooterView.h
跳转到下一页的类类名为：NextViewController.h
在 ViewController.m 中将这几个类的头文件导入进去
#import "MyCollectionViewCell.h" // 导入自定义 Cell 头文件
#import "HeaderView.h"
#import "FooterView.h"
#import "NextViewController.h" // 下一页
签网格的协议
<UICollectionViewDelegate ,UICollectionViewDataSource>
定义网格视图的成员变量
{
UICollectionView *yyCollectionView; // 网格视图
}
在 viewDidLoad 中设置网格
// 创建 流式布局对象
UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
// 设置 网格格子的大小
flowLayout.itemSize = CGSizeMake(80, 100);
// 设置 最小列间距
flowLayout.minimumInteritemSpacing = 20;
// 设置 最小行间距
flowLayout.minimumLineSpacing = 20;
// 设置 分区间距
flowLayout.sectionInset = UIEdgeInsetsMake(10, 10, 20, 10);
// 设置 滚动方向
flowLayout.scrollDirection = UICollectionViewScrollDirectionVertical;
// 创建网格视图
yyCollectionView = [[UICollectionView alloc] initWithFrame:self.view.frame collectionViewLayout:flowLayout];
// 设置代理
yyCollectionView.delegate = self;
yyCollectionView.dataSource = self;
// 将网格添加背景颜色
yyCollectionView.backgroundColor = [UIColor whiteColor];
// 将网格视较添加到视图上
[self.view addSubview:yyCollectionView];
// 注册 cell
[yyCollectionView registerClass:[MyCollectionViewCell class] forCellWithReuseIdentifier:reuseID];
// 写页眉和页脚的时候需要注册
// 注册 页眉类
[yyCollectionView registerClass:[HeaderView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:headerReuseID];
// 注册 页脚类
[yyCollectionView registerClass:[FooterView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:footerReuseID];
// 设置 页眉的尺寸
flowLayout.headerReferenceSize = CGSizeMake(self.view.frame.size.width, 44);
// 设置 页脚的尺寸
flowLayout.footerReferenceSize = CGSizeMake(self.view.frame.size.width, 44);
写网格的数据源方法 -------
// 设置 分区
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
return 5;
}
// 设置 每个分区中有多少个格子
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
if (section == 0) {
return 7;
}else if (section == 1){
return 8;
}else if (section == 2){
return 10;
}else if (section == 3){
return 5;
}else if (section == 4){
return 6;
}
return 0;
}
// 设置 格子内容
- (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
// 根据可重用标识符查找 cell
MyCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:reuseID forIndexPath:indexPath];
// 设置 cell 内容
// 图片
cell.imgView.image = [UIImage imageNamed:@"图片名.jpg"];
// 内容
cell.label.text = @"yyyyyly";
return cell;
}
// 设置 页眉和页脚的代理方法
-(UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{
// 初始化可重用视图
UICollectionReusableView *reusableView = nil;
// 判断
if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {
reusableView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:headerReuseID forIndexPath:indexPath];
HeaderView *header = (HeaderView *)reusableView;
header.headerLabel.text = @"ylyylylyly";
}else if ([kind isEqualToString:UICollectionElementKindSectionFooter]) {
reusableView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:footerReuseID forIndexPath:indexPath];
FooterView *footer = (FooterView *)reusableView;
footer.footerLabel.text = @"yyylylylylylylylyly ";
}
return reusableView;
}
// 点击单元格的方法
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
NSLog(@"点击进入");
// 点击第一个网格的时候跳转到下一页
if (indexPath.section == 0) {
if (indexPath.row == 0) {
// 创建下一个主页面
NextViewController *nextVC = [[NextViewController alloc] init];
// 执行跳转
[self.navigationController pushViewController:nextVC animated:YES];
}
}
}
编辑自定义cell 的内容
在自定义网格 cell --> MyCollectionViewCell.h中,定义两个属性，分别是网格上的图片和图片下的标题内容的展示
---> MyCollectionViewCell.h
// 定义属性
@property (nonatomic, strong) UIImageView *imgView; // 图片
@property (nonatomic, strong) UILabel *label; // 内容
---> MyCollectionViewCell.m
// 重写初始化方法 将控件添加到 cell 上
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
[self addSubview:self.imgView];
[self addSubview:self.label];
}
return self;
}
// 重写 GET 方法
-(UIImageView *)imgView
{
// 判断 如果没有图片框 就创建
if (!_imgView) {
// 设置 frame
_imgView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 80, 80)];
// 圆角
_imgView.layer.cornerRadius = 5;
_imgView.layer.masksToBounds = YES;
}
return _imgView;
}
// 内容
-(UILabel *)label
{
// 判断 如果没有内容 就创建
if (!_label) {
// 设置 frame
_label = [[UILabel alloc] initWithFrame:CGRectMake(0, 80, 80, 20)];
// 设置 字体
_label.font = [UIFont systemFontOfSize:15];
_label.textColor = [UIColor blackColor];
_label.textAlignment = NSTextAlignmentCenter;
}
return _label;
}
写好自定义 cell 以后 在 ViewController.m 中进行了调用，运行时就会展示出来自定义的内容
编辑页眉类
在 HeaderView.h 中
// 定义属性 标签文本
@property (nonatomic ,strong) UILabel *headerLabel; // 页眉标签
---> HeaderView.m
// 重写 视图的初始化方法
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
[self addSubview:self.headerLabel];
}
return self;
}
// 懒加载 ---- 重写 get 方法
// 标签
-(UILabel *)headerLabel
{
if (!_headerLabel) {
_headerLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 300, 30)];
// 页眉背景颜色
_headerLabel.backgroundColor = [UIColor magentaColor];
// 页眉字体大小
_headerLabel.font = [UIFont systemFontOfSize:18];
}
return _headerLabel;
}
同自定义cell 一样，设置好内容后，在 ViewController 中的调用则会展示所设置的内容
在 FooterView.h 中
// 定义属性 标签
@property (nonatomic ,strong) UILabel *footerLabel; // 页脚标签
---> FooterView.m
// 重写 视图的初始化方法
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
[self addSubview:self.footerLabel];
}
return self;
}
// 懒加载 ---- 重写 get 方法
// 标签
-(UILabel *)footerLabel
{
if (!_footerLabel) {
_footerLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 300, 30)];
// 页眉背景颜色
_footerLabel.backgroundColor = [UIColor cyanColor];
// 页眉字体大小
_footerLabel.font = [UIFont systemFontOfSize:18];
}
return _footerLabel;
}
同上设置页脚的内容
现在则自定义 cell 、页眉、页脚上的内容在 ViewController中都已被调用，也可以成功的运行展示
编辑下一页的内容
给下一页的视图设置一下随机颜色，证明可以跳转到下一页，有需要则继续在下一页上进行编辑设置即可！！！
self.view.backgroundColor = [UIColor colorWithRed:((float)arc4random_uniform(256) / 255.0)green:((float)arc4random_uniform(256) / 255.0)blue:((float)arc4random_uniform(256) / 255.0)alpha:1.0];
