网格

appdelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    
    ViewController *vc = [[ViewController alloc]init];
    vc.title = @"网格";
    
    UINavigationController *nav = [[UINavigationController alloc]initWithRootViewController:vc];
    
    self.window.rootViewController = nav;
    
    return YES;
}

viewcontroller

#import "ViewController.h"
#import "MyCollectionViewCell.h"
#import "HeaderView.h"
#import "FooterView.h"
#import "NextViewController.h"

@interface ViewController ()<UICollectionViewDelegate,UICollectionViewDataSource>

@end

static NSString *reuseID = @"cell";
static NSString *headerReuseID = @"headerView";
static NSString *footerReuseID = @"footerView";

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    // 创建流式布局对象
    UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc]init];
    
    // 设置单元格的大小
    flowLayout.itemSize = CGSizeMake(80, 100);
    
    // 设置滚动方向
    flowLayout.scrollDirection = UICollectionViewScrollDirectionVertical;
    
    // 设置最小列间距
    flowLayout.minimumInteritemSpacing = 20;
    
    // 设置最小行间距
    flowLayout.minimumLineSpacing = 20;
    
    // 设置分区间距
    flowLayout.sectionInset = UIEdgeInsetsMake(10, 10, 20, 10);
    
    
    // 创建网格对象
    UICollectionView *cv = [[UICollectionView alloc]initWithFrame:self.view.frame collectionViewLayout:flowLayout];
    
    // 设置代理
    cv.delegate = self;
    cv.dataSource = self;
    
    // 设置分页滚动
//    cv.pagingEnabled = YES;
    
    cv.backgroundColor = [UIColor whiteColor];
    
    // 将网格添加到视图上
    [self.view addSubview:cv];
    
    
    // 注册 cell
    [cv registerClass:[MyCollectionViewCell class] forCellWithReuseIdentifier:reuseID];
    
    
    // 设置页眉的尺寸
    flowLayout.headerReferenceSize = CGSizeMake(self.view.frame.size.width, 44);
    
    // 设置页脚的尺寸
    flowLayout.footerReferenceSize = CGSizeMake(self.view.frame.size.width, 44);
    
    // 注册页眉类
    [cv registerClass:[HeaderView class]  forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:headerReuseID];
    
    // 注册页脚类
    [cv registerClass:[FooterView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:footerReuseID];
    
}

// ===== 数据源方法 =====

// 设置分区
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
    return 5;
}

// 设置多少个item
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    if (section == 0)
    {
        return 7;
    }
    else if (section == 1)
    {
        return 15;
    }
    else if (section == 2)
    {
        return 9;
    }
    else if (section == 3)
    {
        return 20;
    }
    else if (section == 4)
    {
        return 8;
    }
    
    return 0;
}

// 设置 cell
- (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    
    // 根据可重用标识符查找cell
    MyCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:reuseID forIndexPath:indexPath];
    
    // 设置cell内容
    cell.imgView.image = [UIImage imageNamed:@"1"];
    
    cell.label.text = @"网易云音乐";
    
    // 返回 cell
    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.titleLable.text = @"音乐视频分类";
    }
    else if ([kind isEqualToString:UICollectionElementKindSectionFooter])
    {
        reusableView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:footerReuseID forIndexPath:indexPath];
        
        FooterView *footer = (FooterView *)reusableView;
        footer.titleLable.text = @"网易云音乐,总有一首歌属于你!";

    }
    
    return reusableView;
}


// 点击单元格的方法
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    NSLog(@"点击进入App!");
    
    NextViewController *nextVC = [[NextViewController alloc]init];
    
    [self.navigationController pushViewController:nextVC animated:YES];
}

















@end

Headerview
.h声明控件属性
.m

@implementation HeaderView

// 重写初始化方法
- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        
        [self addSubview:self.titleLable];
    }
    return self;
}

// 懒加载标签
- (UILabel *)titleLable
{
    if (!_titleLable)
    {
        _titleLable = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, 140, 30)];
        
        _titleLable.backgroundColor = [UIColor cyanColor];
        _titleLable.font = [UIFont systemFontOfSize:18];
    }
    
    return _titleLable;
}


@end

footview.h声明属性 .m重写属性方法

@implementation FooterView
// 重写初始化方法
- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        
        [self addSubview:self.titleLable];
    }
    return self;
}

// 懒加载标签
- (UILabel *)titleLable
{
    if (!_titleLable)
    {
        _titleLable = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, 300, 30)];
        
        _titleLable.backgroundColor = [UIColor yellowColor];
        _titleLable.font = [UIFont systemFontOfSize:18];
    }
    
    return _titleLable;
}

@end

自定义网格 .h声明属性
. m重写属性方法

@implementation MyCollectionViewCell

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        
        [self addSubview:self.imgView];
        [self addSubview:self.label];
    }
    return self;
}

- (UIImageView *)imgView
{
    if (!_label)
    {
        _imgView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 80, 80)];
        
        _imgView.layer.cornerRadius = 10;
        _imgView.layer.masksToBounds = YES;
        
    }
    return _imgView;
}


- (UILabel *)label
{
    if (!_label)
    {
        _label = [[UILabel alloc]initWithFrame:CGRectMake(0, 80, 80, 30)];
        _label.font = [UIFont systemFontOfSize:20];
        _label.textColor = [UIColor blackColor];
        _label.textAlignment = NSTextAlignmentCenter;
        
        _label.font = [UIFont systemFontOfSize:15];
    }
    return _label;
}








@end

点击跳转新界面 随机色

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.title = @"下一页";
    
    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];;
    
}