[iOS基础控件 - 6.7] 微博展示 使用代码自定义TableCell（动态尺寸)

A.需求

1.类似于微博内容的展示

2.头像

3.名字

4.会员标志

5.内容

6.分割线

7.配图（可选，可有可无）

 

code source: https://github.com/hellovoidworld/WeiboContentDemo

 

 

B.思路、步骤

1.Controller：UITableViewController

     改变控制器继承自UITableViewController，storyboard中也同时使用新的TableViewController，其TableView作为启动入口。

 

2.View：代码自定义cell

     使用代码组装每个cell，动态改变控件的位置、尺寸

     cell含有一个WeiboFrame类型的成员属性用来保存数据、位置尺寸

 

3.Model:

（1）Weibo：数据模型

     保存了每条微博的数据

 

（2）WeiboFrame：frame模型

     保存了一个Weibo的成员属性，和每个控件的位置尺寸，还有这个cell的高度

 

 

 

C.实现点

 

1.使用UITableViewController作为控制器和UITableView为起始入口

内置了UITableView成员，默认代理和dataSource就是UITableViewController

self.view == self.tableView

—>使当前的controller继承UITableViewController，然后指定view的class, Xcode就会自动配置

 

（1）继承UITableViewController

 //
 //  ViewController.h
 //  Weibo
 //
 //  Created by hellovoidworld on 14/12/4.
 //  Copyright (c) 2014年 hellovoidworld. All rights reserved.
 //

 #import <UIKit/UIKit.h>

 // 指定控制器继承自UITableViewController
 @interface ViewController : UITableViewController

 @end

 

（2）在界面设计处删除原来的UIViewController

（3）拖入一个新的UITableViewController

 

（4）配置class

 

（5）设置UITableViewController为Entry Point

 

 

（5）Xcode会自动配置dataSource和delegate

 

 

2.自定义cell（cell内的子控件不固定）

不使用xib，使用代码

• 新建一个继承自UITableViewCell的类
• 先在cell的构造方法initWithStyle:reuseIndentifier:中添加所有需要显示的子控件（不需要设置frame和数据）
• 在头文件提供一个model属性
• 重写model属性的setter，在这个方法中设置view和frame的数据

 

1.通过xib自定义cell
* 添加tableView
* 加载团购数据
* 新建xib，获取子控件
* 封装
* 最后引入headerView和footerView（插入广告，加载更多）

2.通过代码自定义cell

* 引入UITableViewController

* 加载模型数据Weibo，用自带的cell展示基本数据

* 新建一个WeiboCell，封装模型数据

* 在init方法中添加4个子控件
* 在set方法中给子控件设置数据
* 在set方法中给子控件计算frame

* 说明cell的高度无法计算

* 设计WeiboFrame

* 建立Weibo、WeboFrame、WeiboCell的关系(提醒属性名不能叫做frame)

* 性能优化（存储WeiboFrame数据，不存储Weibo数据）

 

 

3.frame模型

设置cell中各个子控件的frame：

在之前的cell中持有的weibo模型引用的setter中分为两部分：设置view数据和设置frame

（1）创建间距变量

（2）第一行：头像、昵称，使用间距来设置合适的位置

（3）计算昵称的size，传入最大size，字体，用来计算昵称的frame的高度和宽度

—>创建一个方法来处理一段文字的size

（4）设置会员图标

（5）计算正文尺寸

     a.计算其size用来计算其frame；

 // 使用自带方法计算一段文字占用的size
 - (CGSize) calTextSizeWithText:(NSString *) text font:(UIFont *) font maxSize:(CGSize) maxSize {
     NSDictionary *attrs = @{NSFontAttributeName : font};

     return [text boundingRectWithSize:maxSize options:NSStringDrawingUsesLineFragmentOrigin attributes:attrs context:nil].size;
 }

     b.设置自动换行；

        textView.numberOfLines = 0;// 设置自动换行

（6）如带有配图，设置配图的尺寸，计算位置

（7）计算cell的高度，有配图的从配图算起，没有配图就从博文算起