A.需求
1.類(lèi)似于微博內(nèi)容的展示
2.頭像
3.名字
4.會(huì)員標(biāo)志
5.內(nèi)容
6.分割線
7.配圖(可選,可有可無(wú))
code source: https://github.com/hellovoidworld/WeiboContentDemo
B.思路、步驟
1.Controller:UITableViewController
改變控制器繼承自UITableViewController,storyboard中也同時(shí)使用新的TableViewController,其TableView作為啟動(dòng)入口。
2.View:代碼自定義cell
使用代碼組裝每個(gè)cell,動(dòng)態(tài)改變控件的位置、尺寸
cell含有一個(gè)WeiboFrame類(lèi)型的成員屬性用來(lái)保存數(shù)據(jù)、位置尺寸
3.Model:
(1)Weibo:數(shù)據(jù)模型
保存了每條微博的數(shù)據(jù)
(2)WeiboFrame:frame模型
保存了一個(gè)Weibo的成員屬性,和每個(gè)控件的位置尺寸,還有這個(gè)cell的高度
C.實(shí)現(xiàn)點(diǎn)
1.使用UITableViewController作為控制器和UITableView為起始入口
內(nèi)置了UITableView成員,默認(rèn)代理和dataSource就是UITableViewController
self.view == self.tableView
—>使當(dāng)前的controller繼承UITableViewController,然后指定view的class, Xcode就會(huì)自動(dòng)配置
(1)繼承UITableViewController
1 // 2 // ViewController.h 3 // Weibo 4 // 5 // Created by hellovoidworld on 14/12/4. 6 // Copyright (c) 2014年 hellovoidworld. All rights reserved. 7 // 8 9 #import <UIKit/UIKit.h>10 11 // 指定控制器繼承自UITableViewController12 @interface ViewController : UITableViewController13 14 15 @end
(2)在界面設(shè)計(jì)處刪除原來(lái)的UIViewController
(3)拖入一個(gè)新的UITableViewController
(4)配置class
(5)設(shè)置UITableViewController為Entry Point
(5)Xcode會(huì)自動(dòng)配置dataSource和delegate
2.自定義cell(cell內(nèi)的子控件不固定)
不使用xib,使用代碼
- 新建一個(gè)繼承自UITableViewCell的類(lèi)
- 先在cell的構(gòu)造方法initWithStyle:reuseIndentifier:中添加所有需要顯示的子控件(不需要設(shè)置frame和數(shù)據(jù))
- 在頭文件提供一個(gè)model屬性
- 重寫(xiě)model屬性的setter,在這個(gè)方法中設(shè)置view和frame的數(shù)據(jù)
1.通過(guò)xib自定義cell
* 添加tableView
* 加載團(tuán)購(gòu)數(shù)據(jù)
* 新建xib,獲取子控件
* 封裝
* 最后引入headerView和footerView(插入廣告,加載更多)
2.通過(guò)代碼自定義cell
* 引入U(xiǎn)ITableViewController
* 加載模型數(shù)據(jù)Weibo,用自帶的cell展示基本數(shù)據(jù)
* 新建一個(gè)WeiboCell,封裝模型數(shù)據(jù)
* 在init方法中添加4個(gè)子控件
* 在set方法中給子控件設(shè)置數(shù)據(jù)
* 在set方法中給子控件計(jì)算frame
* 說(shuō)明cell的高度無(wú)法計(jì)算
* 設(shè)計(jì)WeiboFrame
* 建立Weibo、WeboFrame、WeiboCell的關(guān)系(提醒屬性名不能叫做frame)
* 性能優(yōu)化(存儲(chǔ)WeiboFrame數(shù)據(jù),不存儲(chǔ)Weibo數(shù)據(jù))
3.frame模型
設(shè)置cell中各個(gè)子控件的frame:
在之前的cell中持有的weibo模型引用的setter中分為兩部分:設(shè)置view數(shù)據(jù)和設(shè)置frame
(1)創(chuàng)建間距變量
(2)第一行:頭像、昵稱(chēng),使用間距來(lái)設(shè)置合適的位置
(3)計(jì)算昵稱(chēng)的size,傳入最大size,
字體,用來(lái)計(jì)算昵稱(chēng)的frame的高度和寬度
—>創(chuàng)建一個(gè)方法來(lái)處理一段文字的size
(4)設(shè)置會(huì)員圖標(biāo)
(5)計(jì)算正文尺寸
a.計(jì)算其size用來(lái)計(jì)算其frame;
1 // 使用自帶方法計(jì)算一段文字占用的size2 - (CGSize) calTextSizeWithText:(NSString *) text font:(UIFont *) font maxSize:(CGSize) maxSize {3 NSDictionary *attrs = @{NSFontAttributeName : font};4 5 return [text boundingRectWithSize:maxSize options:NSStringDrawingUsesLineFragmentOrigin attributes:attrs context:nil].size;6 }
b.設(shè)置自動(dòng)換行;
textView.numberOfLines = 0;// 設(shè)置自動(dòng)換行
(6)如帶有配圖,設(shè)置配圖的尺寸,計(jì)算位置
(7)計(jì)算cell的高度,有配圖的從配圖算起,沒(méi)有配圖就從博文算起