一 功能图和知识点

1 功能图部分:(因为网速的原因,网页部分没有载入出来,可是功能完善)

2 该部分能学到的知识点概括:

>1 UITableView的使用(简单)

>2 UICollectionView的使用

>3 请求数据

>4 模型

>5 自己定义cell

>6 清除缓存

>7 细节处理

二 确定搭建方式

1 思考: 由整个app运行的效果图来看,是一个tableView,而且须要分组.界面的下半部分能够通过设置footerView来载入collectionView

2 结论: 直接用storyboard来载入,在storyboard中设置分组样式,静态表格.用代码和storyboard结合的方式达到总体的效果.

三 storyboard

1 创建一个storyboard,注意storyboard中的设置.注意勾选选项,否则会出不了结果.

图一:

2 在Main文件里的创建控制器的方法,採用storyboard载入

代码:

UIStoryboard *storyBoard = [UIStoryboard storyboardWithName:@"XFJMeViewController" bundle:nil];

    //载入箭头指向的控制器

    XFJMeViewController *meVC = [storyBoard instantiateInitialViewController];

    XFJNavigationController *nav4 = [[XFJNavigationController alloc] initWithRootViewController:meVC];

    [self addChildViewController:nav4];

3 可能会出现的现象: 假设发现载入不出storyboard.那么原因是因为创建类的时候,系统默认的让组和行数为0,所以载入不出来.

四 设置tableView的尾部视图—->是一个UICollectionViewCell

1 注意点: collectionView必须有的步骤

—-> 1> 必须设置流水布局

—-> 2> 必须注冊

—-> 3> 必须自己定义cell

2 想法: 因为创建collectionView和设置有关数据代码比較多,那么我们採取抽出一个方法,用来设置collectionView.

五 collectionView代码部分

#pragma mark - 加入尾部视图

- (void)setUpFooterView

{

    //流水布局

    UICollectionViewFlowLayout *flowLayout = ({

        UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];

        //设置尺寸

        flowLayout.itemSize = CGSizeMake(XFJ_itemsWH ,XFJ_itemsWH);

        //设置垂直间距和水平间距

        flowLayout.minimumInteritemSpacing = margin;

        flowLayout.minimumLineSpacing = margin;

        flowLayout;

    });

    //创建collectionView

    UICollectionView *collectionView = ({

        UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, 0, 0) collectionViewLayout:flowLayout];

        //设置背景颜色

        collectionView.backgroundColor = XFJ_globeColor;

        //设置尾部视图为collectionView

        self.tableView.tableFooterView = collectionView;

        //设置数据源代理

        collectionView.dataSource = self;

        //设置代理

        collectionView.delegate = self;

        //赋值

        self.collectionView = collectionView;

        //设置collectionView不能滚动

        collectionView.scrollEnabled = NO;

        collectionView;

    });

    //载入xib的时候注冊用

    [collectionView registerNib:[UINib nibWithNibName:@"XFJMeCollectionViewCell" bundle:nil] forCellWithReuseIdentifier:ID];

}

六 模型

1 经过查看接口文档,模型中仅仅须要以下的数据

//icon(头像);name(姓名);url(网址)

@property (nonatomic, strong) NSString *icon;

@property (nonatomic, strong) NSString *name;

@property (nonatomic, strong) NSString *url;

2 模型的处理方式,採用MJ框架字典转模型

七 载入数据

框架部分採用: MJ;AFN框架

1 三大步:

—-> 1> 创建会话管理者;

—-> 2> 设置请求參数(包含:包装请求參数)

—-> 3> 发送请求(包含:字典转模型;计算cell的相关数据)

2 须要书写的代码量比較大,我们单独抽出一个方法来写该部分的功能

#pragma mark - 载入数据

- (void)setUpData

{

    //查看接口文档:请求方式:GET 请求地址:http://api.budejie.com/api/api_open.php

    //请求參数:a = square ; c = topic

    //模型參数:icon;name;url

    //创建会话管理者

    AFHTTPSessionManager *manager = [AFHTTPSessionManager manager];

    //设置请求參数

    NSMutableDictionary *dict = [NSMutableDictionary dictionary];

    //包装请求參数

    dict[@"a"] = @"square";

    dict[@"c"] = @"topic";

    //发送请求

    [manager GET:@"http://api.budejie.com/api/api_open.php" parameters:dict progress:nil success:^(NSURLSessionDataTask * _Nonnull task, id  _Nullable responseObject) {

        //因为是字典数组.那么取出数组来转

        NSArray *array = responseObject[@"square_list"];

        //运用mj框架字典转模型

        self.meItems = [XFJMeItem mj_objectArrayWithKeyValuesArray:array];

        //写入plist文件,方便阅读

        [responseObject writeToFile:@"/Users/xiaofeng/Desktop/BuDeJie/Me.plist" atomically:YES];

        //调用处理数据的方法

        [self sloveData];

        //刷新表格

        [self.collectionView reloadData];

        //计算collectionView的高度

        //取出模型数组中的元素

        NSInteger count = self.meItems.count;

        //计算行数

        NSInteger rows = (count - margin) / cols + margin;

        //计算collectionView的总高度

        CGFloat cellH = XFJ_itemsWH * rows + (rows - margin) * margin;

        //collectionView的总高度

        self.collectionView.XFJ_Height = cellH;

        //依据内容自适应

        self.tableView.tableFooterView = self.collectionView;

    } failure:^(NSURLSessionDataTask * _Nullable task, NSError * _Nonnull error) {

        NSLog(@"error");

    }];

}

八 collectionView的数据源方法

1 组数(不写默觉得1)

2 行数(由模型的数量决定)

3 cell的内容(由相应的模型决定)

数据源码:

#pragma mark - collectionView数据源方法(组数)--->能够不写,默觉得1

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView

{

    return 1;

}

#pragma mark - 行数

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section

{

    return self.meItems.count;

}

#pragma mark - cell的内容

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath

{

    XFJMeCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:ID forIndexPath:indexPath];

    cell.meItem = self.meItems[indexPath.row];

    return cell;

}

九 自己定义cell

1 自己定义cell採用xib的方式进行cell数据的展示

—-> 採用xib的原因: 通过观察app此模块的样式,cell的样式都是一样的,固定不变的,所以能够採用xib的形式来描写叙述

2 通过拖线的方式,我们能够通过拿到xib中设置的属性来给xib中属性赋值

3 在自己定义cell中定义模型属性,重写模型的set方法

—-> 重写原因: 用来作为设置cell内容的调用,直接通过set方法来设置

4 代码部分

#pragma mark - 提供模型的set方法

- (void)setMeItem:(XFJMeItem *)meItem

{

    _meItem = meItem;

    [self.iconImageView sd_setImageWithURL:[NSURL URLWithString:meItem.icon]];

    self.nameLabel.text = meItem.name;

}

十 须要用到的部分參数

1 注意const的书写原因: 不让外界改动变量

static NSString * const ID = @"cell";

static NSInteger const cols = 4;

static CGFloat const margin = 1;

#define XFJ_itemsWH (XFJ_screenW - (cols - 1) * margin) / cols

十一 点击cell的业务逻辑

1 怎样推断点击的cell跳转的是网页还是控制器?

—-> 思路: 1> 依据点击的反应(网页反应时间过长) 2> 依据服务器的数据

2 点击cell跳转到safari(第一种)

—-> 长处:1> 使用方便,实现简单,代码量少

—-> 缺点:2> 该方法是从ios9開始使用的,无法满足ios9之前的版本号

—-> 3> 有进度条,可是进度条并不真实,是一种假象,是做给用户看的一种假象.

—–> 2.1 设置collectionView的代理为控制器

//设置代理

        collectionView.delegate = self;

—–> 2.2 点击某行cell就会调用以下代理方法

#pragma mark - 代理方法(点击某个cell调用)

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath

{

    NSLog(@"点击了cell");

    //取出相应的cell

    XFJMeItem *meItem = self.meItems[indexPath.row];

    //推断字符串中是否含有http(假设不含有了就直接return)

    if (![meItem.url containsString:@"http"]) {

        return;

    }

    //含有了在运行

    NSURL *url = [NSURL URLWithString:meItem.url];

    //创建safari控制器(第一种方式)

    SFSafariViewController *safari = [[SFSafariViewController alloc] initWithURL:url];

    //mdel出控制器

//    [self presentViewController:safari animated:YES completion:nil];

    [self.navigationController pushViewController:safari animated:YES];

    self.navigationController.navigationBarHidden = YES;

    //设置代理

    safari.delegate = self;

}

2.3 通过设置safari的代理为控制器,那么也会运行以下的方法

#pragma mark - safari的代理方法

- (void)safariViewControllerDidFinish:(SFSafariViewController *)controller

{

    [self.navigationController popViewControllerAnimated:YES];

//    [self dismissViewControllerAnimated:YES completion:nil];

    self.navigationController.navigationBarHidden = NO;

}

3 点击cell跳转到WKWebViewcontroller(另外一种)

—-> 3.1 长处和缺点

缺点:

—-> 1> 须要导入WebKit框架

—-> 2> 须要自己实现进度条读取的功能

长处:

—-> 1> 该方法是苹果从ios8開始推出使用的,这样的方法能满足全部ios版本号的开发.总体功能和safari一样,可是进度条的读取更加真实.

—-> 3.2 使用步骤

—-> 1> 自定控制器,创建xib文件

—-> 2> 对进度条自己主动布局

—-> 3> 在点击某行collectionView的cell中,实现对自己定义WebViewController的跳转

—-> 4> 在自己定义的控制器中实现对进度条的监听和对观察者的移除

—-> 3.3 代码块部分:

代码块一:创建控制器而且push出控制器

//另外一种方法:(ios8才有)

    //创建控制器

    XFJWebViewController *webViewController = [[XFJWebViewController alloc] init];

    //赋值

    webViewController.url = url;

    //push

    [self.navigationController pushViewController:webViewController animated:YES];

代码块二:创建WebView加入到自己定义的控制器的view中(该部分是主旨部分,是WebView起到的载入网页的作用)

- (void)viewDidLoad {

    [super viewDidLoad];

    //创建UIWebView对象

    WKWebView *webView = [[WKWebView alloc] init];

    //赋值

    self.webView = webView;

    //设置尺寸

    webView.frame = self.view.bounds;

    //将webView插入到view中

    [self.view insertSubview:webView atIndex:0];

    //创建请求

    NSURLRequest *request = [NSURLRequest requestWithURL:self.url];

    //请求

    [webView loadRequest:request];

    //监听web中的进度(KVO)----self去监听webView的estimatedProgress值的变化

    [webView addObserver:self forKeyPath:@"estimatedProgress" options:NSKeyValueObservingOptionNew context:nil];

}

代码块三:(因为代码块二实现了监听,那么仅仅要有值的变化,就会调用以下的方法)

//仅仅要监听值的变化,就会调用

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context

{

    //进度条的变化

    self.progressView.progress = self.webView.estimatedProgress;

    //控制进度条

    self.progressView.hidden = self.progressView.progress >= 1;

}

代码块四:移除观察者(一定要移除,否则会出现莫名其妙的错误)

#pragma mark - 移除监听

- (void)dealloc

{

    [self.webView removeObserver:self forKeyPath:@"estimatedProgress"];

}

十二 清除缓存业务类

1 创建一个业务类,用来清除该部分功能的缓存,这里我就不细说了,直接抽取一个业务类,然后附上文件给大家參考

2 业务类的思路:1> 先获取文件尺寸(caches) 2> 删除目录中全部文件

十三 细节处理

十三 细节处理

1 处理cell之间的距离—>演示样例程序是一样的(设置顶部的额外滚动区域)

//分组样式默认头部和尾部都有一定的滚动区域

    self.tableView.sectionFooterHeight = 10;

    self.tableView.sectionHeaderHeight = 0;

    //设置顶部额外滚动区域

    self.tableView.contentInset = UIEdgeInsetsMake(-25, 0, 0, 0);

2 处理collectionView最后面几个空格

思路:往空格处加入空的模型,有多少空格就加入多少个空模型(该方法调用:是在请求数据,字典转模型之后,因为仅仅有知道有多少模型,collectionView才干计算总共cell的位置,才干知道后面有多少个空格,针对的往里面加入空的模型)

#pragma mark - 处理数据(往最后的空格中加入空的模型)

- (void)sloveData

{

    //取出模型中的数据

    NSInteger count = self.meItems.count;

    //计算空格数

    NSInteger exte = count % cols;//9 % 4 = 1;

    //补充模型

    if (exte) {

        exte = cols - exte;

        //创建空的模型

        for (int i = 0; i < exte; i++) {

            XFJMeItem *meItem = [[XFJMeItem alloc] init];

            //加入模型

            [self.meItems addObject:meItem];

        }

    }

}

十四 计算collectionView行数的万能公式(不外传的)

1 count:总的模型个数

2 cols:cell的列数

3 rows:行数

—> 行数: rows = (count - 1) / cols + 1;

十五 总结

1 当假设点击cell的时候,选择push出控制器来载入内容,那么要特别的注意push的时候要隐藏顶部的导航条,可是pop的时候,顶部的导航条一定要开启,否则会将内容隐藏.

2 处理文件内容缓存问题要特别注意将空的文件排除掉,否则会多出内容.可是大家不是必需将代码写一遍,我接下来给大家附上处理该模块的业务类,你们能够自己封装一下,到时候直接拷贝用即可,不是必需写了.

3 最后,大家有什么问题虽然给我提出来,我一定尽力解答.兴许我还会奉上百思不得姐进一步的完善代码,假设大家觉得写得还可,麻烦关注我的官方博客,谢谢!!!!

——————–>业务类

.h文件里附实使用方法

.h文件

//

//  XFJFileManager.h

//  BuDeJie

//

//  Created by 肖锋 on 12/4/6.

//  Copyright © 2012年 XFJ. All rights reserved.

//

/**

 *  专门用于处理文件业务

 *

 *  使用方法:1 先获取目录尺寸

 *

 *  2 删除目录全部的文件

 */

#import <Foundation/Foundation.h>

@interface XFJFileManager : NSObject

/**

 *  获取目录尺寸

 *

 *  @param directoryPath 目录全路径

 *

 *  @return 目录尺寸

 */

+ (NSInteger)getDirectorySize:(NSString *)directoryPath;

/**

 *  删除目录下全部文件

 *

 *  @param directoryPath 目录全路径

 */

+ (void)removeDirectoryPath:(NSString *)directoryPath;

@end

.m文件

//

//  XFJFileManager.m

//  BuDeJie

//

//  Created by  on 12/4/6.

//  Copyright © 2012年 肖锋. All rights reserved.

//

#import "XFJFileManager.h"

@implementation XFJFileManager

+ (void)removeDirectoryPath:(NSString *)directoryPath

{

    NSFileManager *mgr = [NSFileManager defaultManager];

    BOOL isDirectory;

    BOOL isExist = [mgr fileExistsAtPath:directoryPath isDirectory:&isDirectory];

    if (!isExist || !isDirectory) {

        // 报错:抛异常

        NSException *excp = [NSException exceptionWithName:@"filePathError" reason:@"传错,必须传目录路径" userInfo:nil];

        [excp raise];

    }

    NSArray *subpaths = [[NSFileManager defaultManager] contentsOfDirectoryAtPath:directoryPath error:nil];

    for (NSString *subPath in subpaths) {

        NSString *filePath = [directoryPath stringByAppendingPathComponent:subPath];

        [[NSFileManager defaultManager] removeItemAtPath:filePath error:nil];

    }

}

// 获取目录尺寸

+ (NSInteger)getDirectorySize:(NSString *)directoryPath

{

    // 获取文件管理者

    NSFileManager *mgr = [NSFileManager defaultManager];

    BOOL isDirectory;

    BOOL isExist = [mgr fileExistsAtPath:directoryPath isDirectory:&isDirectory];

    if (!isExist || !isDirectory) {

        // 报错:抛异常

        NSException *excp = [NSException exceptionWithName:@"filePathError" reason:@"传入文件路径错误.." userInfo:nil];

        [excp raise];

    }

    /*

     获取这个目录中全部文件路径,然后累加 = 目录的尺寸

     */

    // 获取目录下全部的文件

    NSArray *subpaths = [mgr subpathsAtPath:directoryPath];

    NSInteger totalSize = 0;

    for (NSString *subpath in subpaths) {

        // 拼接文件全路径

        NSString *filePath = [directoryPath stringByAppendingPathComponent:subpath];

        // 排除目录

        BOOL isDirectory;

        BOOL isExist = [mgr fileExistsAtPath:filePath isDirectory:&isDirectory];

        if (!isExist || isDirectory) continue;

        // 隐藏文件

        if ([filePath containsString:@".DS"]) continue;

        // 指定路径获取这个路径的属性

        // attributesOfItemAtPath:仅仅能获取文件属性

        NSDictionary *attr = [mgr attributesOfItemAtPath:filePath error:nil];

        NSInteger size = [attr fileSize];

        totalSize += size;

    }

    return totalSize;

}

@end