The -tablefooterview- from tuberose621

处理的许多细节有价值

设计实现上面的页面

一

首先第一个这样的一个界面如何设计呢？它又有哪些需要注意的细节呢
- 分析：
  - 可以上下拖动所以是一个scrollview
  - 对于实现可以用tableview来实现
    - 分为2组，每一组的cell为1个
    - 下面的由tableview的tableFooterView来实现
在控制器CYTabbarController.m文件中
- 1.分组：设置tableview的样式的为UITableViewStyleGrouped
- 2.实现tableview数据源方法
  - 返回为2组，每组为1行
  - 给定cell标识，注册cell

static NSString * const CYMeCellId = @"me";

[self.tableView registerClass:[CYMeCell class] forCellReuseIdentifier:CYMeCellId];

tableview定义样式为UITableViewStyleGrouped分组之后要求：
- 第一个cell距离顶部间距为10
- cell之间距离为10
- 第二个cell与它的tableFooterView之间间距为10
- 而这个10的间距很常见，所以把它抽成一个宏或者是全局变量为CYCommonMargin
分组样式的tableview的cell的一些结构：
分析
- 分组group样式第一个cell默认距离顶部（第一个cell的Y值）为35，而plain样式默认是粘着顶部的
- 分组后的cell拥有一个sectionHeaderHeight和sectionFooterHeight
- 所以设置每一组的头部和尾部
- 设置内边距(-25代表：所有内容往上移动25)

    self.tableView.sectionHeaderHeight = 0;
    self.tableView.sectionFooterHeight = CYCommonMargin;
    // 设置内边距(-25代表：所有内容往上移动25)
    self.tableView.contentInset = UIEdgeInsetsMake(CYCommonMargin - 35, 0, 0, 0);

二

自定义cell---CYMeCell
- 初始化cell以及重写它的layoutSubviews:方法(布局cell内部子控件：让图片和文字适当排布)

- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
    if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {
        self.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
        self.textLabel.textColor = [UIColor darkGrayColor];

        // 设置背景图片-图片可以设置拉伸
        self.backgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"mainCellBackground"]];
    }
    return self;
}

- (void)layoutSubviews
{
    [super layoutSubviews];

    if (self.imageView.image == nil) return;

    // 调整imageView
    self.imageView.y = CYCommonMargin * 0.5;
    self.imageView.height = self.contentView.height - 2 * self.imageView.y;
    self.imageView.width = self.imageView.height;

    // 调整Label
    //    self.textLabel.x = self.imageView.x + self.imageView.width + XMGCommonMargin;
    self.textLabel.x = CGRectGetMaxX(self.imageView.frame) + CYCommonMargin;

    // CGRectGetMaxX(self.imageView.frame) == self.imageView.x + self.imageView.width
    // CGRectGetMinX(self.imageView.frame) == self.imageView.x
    // CGRectGetMidX(self.imageView.frame) == self.imageView.x + self.imageView.width * 0.5
    // CGRectGetMidX(self.imageView.frame) == self.imageView.centerX
}

实现CYMeCell的数据源方法

#pragma mark - 数据源方法
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return 2;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return 1;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    CYMeCell *cell = [tableView dequeueReusableCellWithIdentifier:CYMeCellId];

    if (indexPath.section == 0) {
        cell.textLabel.text = @"登录/注册";
        cell.imageView.image = [UIImage imageNamed:@"setup-head-default"];
    }else{

        cell.textLabel.text = @"离线下载";
    }

    return cell;
}

以上实现了cell内容的显示，接下来就是TableFooterView上内容数据的显示
- 在PCH文件中定义一个宏,将数据写到桌面的plist，方便查看

三

#define CYWriteToPlist(data, filename) [data writeToFile:[NSString stringWithFormat:@"/Users/gecongying/Desktop/%@.plist", filename] atomically:YES];

自定义数据模型CYSquare
CYSquare.h文件中

#import <Foundation/Foundation.h>

@interface CYSquare : NSObject
/** 名字 */
@property (nonatomic, copy) NSString *name;
/** 图标 */
@property (nonatomic, copy) NSString *icon;
/** 链接 */
@property (nonatomic, copy) NSString *url;

@end

自定义CYMeFooter

self.tableView.tableFooterView = [[CYMeFooter alloc] init];

在CYMeFooter.m文件中

#import "CYMeFooter.h"
#import <AFNetworking.h>
#import "CYSquare.h"
#import <MJExtension.h>
//#import <UIImageView+WebCache.h>
#import <UIButton+WebCache.h>

@implementation CYMeFooter

- (instancetype)initWithFrame:(CGRect)frame
{
    if (self = [super initWithFrame:frame]) {
        self.backgroundColor = [UIColor redColor];

        // 请求参数
        NSMutableDictionary *params = [NSMutableDictionary dictionary];
        params[@"a"] = @"square";
        params[@"c"] = @"topic";

        // 发送请求
        CYWeakSelf;
        [[AFHTTPSessionManager manager] GET:CYRequestURL parameters:params success:^(NSURLSessionDataTask *task, id responseObject) {
//            CYWriteToPlist(responseObject, @"square");
            [weakSelf createSquares:[CYSquare objectArrayWithKeyValuesArray:responseObject[@"square_list"]]];
        } failure:^(NSURLSessionDataTask *task, NSError *error) {

        }];
    }
    return self;
}

/**
 * 创建方块
 */
- (void)createSquares:(NSArray *)squares
{
    // 每行的列数
    int colsCount = 4;

    // 按钮尺寸
    CGFloat buttonW = self.width / colsCount;
    CGFloat buttonH = buttonW;

    // 遍历所有的模型
    NSUInteger count = squares.count;
    for (NSUInteger i = 0; i < count; i++) {
        CYSquare *square = squares[i];

        // 创建按钮
        UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
        [button addTarget:self action:@selector(buttonClick:) forControlEvents:UIControlEventTouchUpInside];
        [self addSubview:button];

        // frame
        CGFloat buttonX = (i % colsCount) * buttonW;
        CGFloat buttonY = (i / colsCount) * buttonH;
        button.frame = CGRectMake(buttonX, buttonY, buttonW, buttonH);

        // 数据
        [button setTitle:square.name forState:UIControlStateNormal];


    // 2.如果导入的是#import <UIButton+WebCache.h>
        // 设置按钮的image
        [button sd_setImageWithURL:[NSURL URLWithString:square.icon] forState:UIControlStateNormal];


    // 1.如果导入的是#import <UIImageView+WebCache.h>
        // 正确做法
//       [[SDWebImageManager sharedManager] downloadImageWithURL:[NSURL URLWithString:square.icon] options:0 progress:nil completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, BOOL finished, NSURL *imageURL) {
//        [button setImage:image forState:UIControlStateNormal];
       // 错误示范
    //        [button.imageView sd_setImageWithURL:[NSURL URLWithString:square.icon]];
//                }];
    }
}

- (void)buttonClick:(CYSquareButton *)button
{
    CYLogFunc;

}

但是最后的显示是这样

四

所以我们要自定义Button---CYSquareButton
- 重写它的initWithFrame:方法和layoutSubviews:方法重新布局子控件

#import "CYSquareButton.h"

@implementation CYSquareButton

- (instancetype)initWithFrame:(CGRect)frame
{
    if (self = [super initWithFrame:frame]) {
        self.titleLabel.textAlignment = NSTextAlignmentCenter;
        self.titleLabel.font = [UIFont systemFontOfSize:14];
        [self setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    }
    return self;
}

- (void)layoutSubviews
{
    [super layoutSubviews];

    self.imageView.width = self.width * 0.5;
    self.imageView.height = self.imageView.width;
    self.imageView.y = self.height * 0.1;
    self.imageView.centerX = self.width * 0.5;

    self.titleLabel.width = self.width;
    self.titleLabel.y = CGRectGetMaxY(self.imageView.frame);
    self.titleLabel.x = 0;
    self.titleLabel.height = self.height - self.titleLabel.y;
}

@end

注意在CYMeFooter.m文件中导入相应的头文件CYSquareButton.h，修改Button为CYSquareButton
最后显示

但是你会发现有问题要处理

五

一个控件不能响应点击事件的原因可能有：
- 1> userInteractionEnabled = NO;
- 2> enabled = NO;
- 3> 父控件的userInteractionEnabled = NO;
- 4> 父控件的enabled = NO;
- 5> 控件已经超出父控件的边框范围

六

上面完成后你会发现footerView中的内容无法点击，更无法正常拖拽（bug）
- footerView不用设置宽度，默认是填充整个TableView的，永远跟在TableView后面
- TableView的拖拽范围是由它的contentsize决定的
  - 所以我们要让它的Button可以点击，内容可以显示，就得设置好footerView的高度
    - 我们要给它设置高度，但是拖拽是否正常又和设置高度的先后顺序有关
    - footerView的高度的设置要在创建它之前设置
    - 因为它是在你设置高度以后，根据你的高度去算出contentsize，去决定能拖拽到哪里。它是取决于你设置那一刻高度是多少
    - 所以上面的问题在于：你的高度设置是在服务器返回数据后才设置的，高度是后面设置的。所以无法影响它现在拖拽上拉的设置
    - 先设置高度，再拿到footerView
我们来设置footerView的高度
第一种方式：先拿到footer的高度，再重新设置footerView

// 设置footer的高度
    self.height = CGRectGetMaxY(button.frame);
            // 重新设置footerView
    UITableView *tableView = (UITableView *)self.superview;
    tableView.tableFooterView = self;

第二种方式：直接改变它的contenSize（内容尺寸）---简单（推荐）

// 重新设置footerView
    UITableView *tableView = (UITableView *)self.superview;
//    tableView.tableFooterView = self;
    tableView.contentSize = CGSizeMake(0, CGRectGetMaxY(self.frame))

**第三种方式：**上面两种方式算高度，我们是拿到最后一个按钮最大的Y值。还有一种方法：拿到按钮行数，再乘以按钮高度也是可以的

    // 设置footer的高度
    NSUInteger rowsCount = count / colsCount;
    if (count % colsCount) { // 不能整除，行数+1
        rowsCount++;
    self.height = rowsCount * buttonH;

    // 重新设置footerView
    UITableView *tableView = (UITableView *)self.superview;
    //    tableView.tableFooterView = self;
    tableView.contentSize = CGSizeMake(0, CGRectGetMaxY(self.frame));
    }

上面这么算，不管整不整除，都可以算出正确的行数
这也可以引出一个公式，将它合并为：

    // 设置footer的高度
     NSUInteger rowsCount = (count + colsCount - 1) / colsCount;
    self.height = rowsCount * buttonH;

    // 重新设置footerView
    UITableView *tableView = (UITableView *)self.superview;
    //    tableView.tableFooterView = self;
    tableView.contentSize = CGSizeMake(0, CGRectGetMaxY(self.frame));

这个公式�用到一个地方很有作用：分页
- 就像百度上搜索“美女”，给你返回一个结果，但是结果数据这么多，不可能一页就能显示完，所以采用分页显示数据。总共有多少条数据，每一页有固定条，总共有多少页
- 算是万能公式，遇到相关需求，就不需要再苦逼的进行判断了

     总页数 == (总个数 + 每页的个数 - 1) / 每页的个数

     总个数：97
     每页的个数：17
     总页数 =  (97 + 17 - 1) / 17

七

现在按钮可以点击，界面可以正常拖拽。下面做一下分割线
- 第一种方式：背景设为白色，添加UIView（太多不推荐）--加一个View
- 第二种方式：在按钮原有算好的基础上，让他们的高度和宽带都减去1(记得要先算好，再减1)--空出间隙

button.frame = CGRectMake(buttonX, buttonY, buttonW-1, buttonH-1);

第三种方式：�看你在公司和美工的关系了😄
- 直接让美工做一个有边线的按钮背景图片

[self setBackgroundImage:[UIImage imageNamed:@"mainCellBackground"] forState:UIControlStateNormal];

八

接下来，监听按钮的点击，拿到按钮索引对应方块中的数据
可以看出一个SquareButton对应一个Square模型
- 所以在SquareButton.h文件中加一个属性

#import <UIKit/UIKit.h>

@class CYSquare;

@interface CYSquareButton : UIButton
/** 方块模型 */
@property (nonatomic, strong) CYSquare *square;
@end

在CYSquareButton.m文件中重写setSquare:方法，将数据请求封装起来

- (void)setSquare:(CYSquare *)square
{
    _square = square;

    // 数据
    [self setTitle:square.name forState:UIControlStateNormal];
    // 设置按钮的image
    [self sd_setImageWithURL:[NSURL URLWithString:square.icon] forState:UIControlStateNormal];
}

// 1.创建按钮
// 2.设置按钮frame
// 3.设置模型数据(拿到模型，把模型数据拆分给子控件)
button.square = squares[i];

这样的话，我拿到按钮就相当于拿到模型，一个按钮对应一个模型（更有封装性）
- 今后当我们碰到一对一的情况的时候，就是一个数据对应一个控件的时候。你就要想到可不可以给这个控件或者是这个View绑一个模型
- 当然一对一也可以用索引，当我们控件的索引和我们模型的索引是一致的时候，先通过控件取出索引，再通过索引取出模型数据
- 针对一对一我们还可以用字典，假如按钮能做一个key，通过按钮的key可以取出模型对应的value

九

现在我们要通过url去打开一个下一个界面CYWebViewController(新建并继承于UIViewController[里面有一个WebView和工具条])
我们选择push过去,在CYMeFooter.m文件中

- (void)buttonClick:(CYSquareButton *)button
{
    // 拿到以http开头的URL
    if ([button.square.url hasPrefix:@"http"] == NO) return;
    CYWebViewController *webVc = [[CYWebViewController alloc] init];
    webVc.square = button.square;

    // 取出当前选中的导航控制器
    UITabBarController *rootVc = (UITabBarController *)self.window.rootViewController;
    UINavigationController *nav = (UINavigationController *)rootVc.selectedViewController;
    [nav pushViewController:webVc animated:YES];

}

上面的CYMeFooter是一个View，你是没法拿到导航控制器的，而且View里面是没有属性拿到它对应的控制器的，那我们怎么办呢？
- 但是有一个控制器是哪里都能拿到的，就是窗口的根控制器
- 而我们这个窗口的根控制器本质是一个CYTabBarController
- 而“我”“精华”“新帖”“关注”对应的导航控制器其实都是CYTabBarController的子控制器
- 但是我们要push过去，拿到导航控制器，但是这里有4个导航控制器，，所以我们要拿到对应的被选中的“我”对应导航控制器
所以今后得注意：不要一要push跳转就：self.NavigationController push...而是要找到对应的导航控制器，再做动作

十

进入那个界面，显示一个网页，意味着你要把URL传给它
上面还得显示一个标题，你显示标题的文字最好也要和你按钮显示的文字一致
也就是说要传两个东西--文字和URL。既然要传两个，干脆就把模型传过去算了
在CYWebViewController.h文件中传入模型

#import <UIKit/UIKit.h>

@class CYSquare;

@interface CYWebViewController : UIViewController
/** 方块 */
@property (nonatomic, strong) CYSquare *square;
@end

然后再来界面布局：
用Xib先把底部工具条布置好，剩下的就是上面的网页界面
- 底部工具条可以搞个UIView，上面搞几个Button
- 或者搞个ToolBar

控制按钮的行为，在CYWebViewController.m文件中

#import "CYWebViewController.h"
#import "CYSquare.h"

@interface CYWebViewController () <UIWebViewDelegate>
@property (weak, nonatomic) IBOutlet UIWebView *webView;
@property (weak, nonatomic) IBOutlet UIBarButtonItem *backItem;
@property (weak, nonatomic) IBOutlet UIBarButtonItem *forwardItem;
@end

@implementation CYWebViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    self.title = self.square.name;
    [self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:self.square.url]]];

    self.webView.backgroundColor = CYCommonBgColor;
    // 为了让webView的内容能完整显示，我们可以设置它的contentInset向下挪64
    // 但是webView是继承于UIView的，是无法设置它的contentInset的。但是它能滚动，是因为它里面镶嵌了一个ScrollView的属性
    // NS_CLASS_AVAILABLE_IOS(2_0) __TVOS_PROHIBITED @interface UIWebView : UIView <NSCoding, UIScrollViewDelegate>
    self.webView.scrollView.contentInset = UIEdgeInsetsMake(64, 0, 0, 0);
}

- (IBAction)back {
    [self.webView goBack];
}

- (IBAction)forward {
    [self.webView goForward];
}

- (IBAction)refresh {
    [self.webView reload];
}

#pragma mark - <UIWebViewDelegate>
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    self.backItem.enabled = webView.canGoBack;
    self.forwardItem.enabled = webView.canGoForward;
}
@end

为了让webView的内容能完整显示，我们可以设置它的contentInset向下挪64
但是webView是继承于UIView的，是无法设置它的contentInset的。但是它能滚动，是因为它里面镶嵌了一个ScrollView的属性
NS_CLASS_AVAILABLE_IOS(2_0) __TVOS_PROHIBITED @interface UIWebView : UIView <NSCoding,
前进和后退按钮的设置

#pragma mark - <UIWebViewDelegate>
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    self.backItem.enabled = webView.canGoBack;
    self.forwardItem.enabled = webView.canGoForward;
}

扩展：有关于webView网页加载进度条
- iOS中只有苹果的Safari进度条加载才是真的，其它的浏览器（UC,百度等）进度条都是假的
- 因为苹果内部是没有提供进度条的接口给外界，就算提供了也是私有的，也就是说只有苹果官方内部才可以用，如果你用了苹果监听进度的东西的话，你的App是不能上线的
- 那么怎么做呢？你会发现像百度和UC这样的浏览器在加载时，进度显示会不停的加载，有时候网速不好，它也加载，加载到后面，你以为要加载完了，它就是不动，加载完，瞬间就上去了
- 有些进度条加载是做得很逼真的，我们也可以做
  - 用一个UIView，高度为1或者2，加一个定时器，给一个时间，每隔1秒钟，让它的宽度不断的加。如果网速不行，就一直加载，一直加载，加到90%的时候，先停住不动，等网速来了，webViewDidFinishLoad:网页加载完后，让它的宽度等于屏幕的宽度，给它一个动画，让它过去，最后让它消失就可以了。
  - 在github上有一个框架，可以用它，也可以根据它的思路自己写一下

tuberose621 / -tablefooterview- Goto Github PK

-tablefooterview-'s Introduction

-tablefooterview-'s People

Contributors

Stargazers

Watchers

Forkers

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent