自定義網格+跳轉

在 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 繼承於 UICollectionViewCell
編寫網格頭部標題的類類名爲：HeaderView.h 繼承於 UICollectionReusableView
編寫網格尾部標題的類類名爲：FooterView.h 繼承於 UICollectionReusableView
跳轉到下一頁的類類名爲：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];