巧用TableFooterView设计和实现界面

作者: Tuberose | 来源:发表于2015-11-09 19:00 被阅读20467次

�设计实现上面的页面

一

首先第一个这样的一个界面如何设计呢？它又有哪些需要注意的细节呢
- 分析：
  - 可以上下拖动所以是一个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 + CYCommonMargin;
    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上有一个框架，可以用它，也可以根据它的思路自己写一下

https://github.com/Tuberose621/-TableFooterView-
如果可以的话，Give me a star!

网友评论

2769fd3e2c9a:楼主我也打了一遍为什么这个不能向下拖拽 tablefooterView还有数据呢
071a958d5815:喜欢
叶先森_iOS_前端:你之前写的一些文章不错，理解的挺深刻的。有一个bug，点击进去下个界面之后返回，她的frame变成屏幕的大小了。不能拖到下面了。
w_xiao_wu:@iOS_叶先森
// 重新设置footerView
UITableView *tableView = (UITableView *)self.superview;
tableView.tableFooterView = self;
用这个就能拖拽了,不过我搞不懂原理希望会的帮忙解决下
bd3e3d34c7d2:@iOS_叶先森是的,想问下楼主这个怎么解决...
d6b909dfd584:大神,我下载了你的代码之后出现prefix.pch 找不到的错误,请问要怎么解决啊?
叶先森_iOS_前端:@janglovejay 双击之后 $(SRCROOT)/聪颖不聪颖/PrefixHeader.pch 记得 Precompile Prefix Header -->Yes
d6b909dfd584:@Tuberose 不行啊,我确定路径没错,但还是不行
Tuberose:@janglovejay 在build settings中找Prefix Header。找到后将.pch文件的路径拷贝进去
loyt:写得非常好,非常感谢
degulade:mark
固执的少年:楼主tabbar中心按钮用的什么实现的？
brownfeng:@固执的少年网上很多呀. 重写tabbarViewcontroller的layoutSubView 方法
青春的风扇:第一个界面还是collectionView好点，万一最下面再给你来个cell，那就重写吧
青春的风扇:@xiaomayi2012 collectionviewdelegate进去有个带reuseview的代理方法，可以实现header footer的自定义
xiaomayi2012:@青春的风扇请教个问题 collectionview 设置了2组数据，我在第一组头部我添加了个轮播，而第二组数据头部也出现了这个轮播，如何只让第一个头部显示呢？？
小笨狼:Nice，满满的干货呀！已经star
Tuberose:@小笨狼 THX
心猿翼马:赞一个！期待你的文章
8742ca350a36:怎么不使用collectionView
没骆驼de祥子:同问
CarrieLuan:@Rocky_影同问
大刀阔斧007:好快乐
甜行僧:mk
c7554849ca10:🏻
文文2020:好
一一无痕:good
8ae158dda3f2:mark
GJCode:看完了很有收获，不错点个赞
飞鸽在线:赞

巧用TableFooterView设计和实现界面

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

技术

iOS分享的demo

产品说

iOS开发者

iOS Process

ios basic

带我飞3

iOS学习

巧用TableFooterView设计和实现界面

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

巧用TableFooterView设计和实现界面