- 我寫的源文件整個工程會再第二季中發上來~，存在百度網盤, 感興趣的童鞋, 可以關注我的博客更新,到時自己去下載~
。喵~~~
QQChat Layout - 第一季
一、准備工作
- 1.將假數據messages.plist和icon圖片文件導入工程中。
- 2.創建相應的數據模型message, 保持數據模型的屬性名和plist中的一樣。為message類提供便利構造器。(由於與plist的名字保持一致,所以我們使用KVC技術來初始化數據模型, 其會去找和字典中同名的屬性自動賦值)。
#import <UIKit/UIKit.h>
typedef enum {
MessageWhoIsMe,
MessageWHoIsAnother
}MessageWho;
@interface Message : NSObject
@property (nonatomic, strong) NSString * text;
@property (nonatomic, strong) NSString * time;
@property (nonatomic, assign) MessageWho type;
@property (nonatomic, assign) CGFloat height;
+ (instancetype)messageWithDict:(NSDictionary *)dict;
@end
- 3.在SB中的ViewController中,拖入UITableView與UIView控件,並將TableView的cell數目設置為1, UIView用來作QQ的菜單.先給起加上約束, 高44, 距離父控件底部、左邊、右邊分別為0,0,0.然后設置UITableView的底部距離QQ的菜單欄為0, 左、右、上距離父控件為0, 這樣就得到了QQ的聊天界面的大體框架。
二、UI框架搭建
- 觀察:如上圖,通過觀察, 我們可以知道QQ的每一行聊天消息, 其實就是一行的UITableViewCell對象, 也就說聊天框本質上可以看成是一個UITableView。所以我們只要能做出對應的cell對象，那么就能完成這個界面，問題是這個cell是不等高的, 這是這個布局的難點之一。至於怎么解決, 請直接看我項目中的分析。現在我們把重點方法對cell的設計上。很顯然，這個cell肯定要由我們來自定義，自定義cell有多種方法, 我們選擇storyBoard的方法來自定義。
- 分析:一條消息中最多有時間、消息頭像、消息內容這三個元素。所以我們直接給cell中拖入一個用於顯示時間的UILabel、一個用於顯示內容的UIButton、因為內容有背景，所以用UIButton是比較合適的，還有用於顯示頭像的UIImageView.然后設置約束。下圖為完成了cell的布局和約束設置。
- 細節:
1.創建一個MessageCell讓其繼承自UITableViewCell,然后將SB中的cell類型改為MessageCell的類型,如下圖, (這樣做是為了讓創建出來的cell就是MessageCell對象)。
2.用拖線的功能快速在MessageCell類中將SB中的cell的各個控件和MessageCell中的屬性關聯起來。
三、開發
-
喵喵~~~~~，好鳥.所有准備工作都做好了。接下去要開始編碼了, 啥？這就好了。是滴，接下去可要認真聽我分析鳥, 交你為什么要這么寫代碼。大神請繞道~。
-
第一步:因為我們使用的是假數據，也就是plist文件中的數據進行模擬。所以我們省略掉從網絡中獲取數據這一步。我們只需要把plist的數據先加載進來就好了。那么怎么加載數據呢，為了提高程序的效率，我們使用懶加載了加載數據, 也就是在要用到數據的地方, 數據才會自動加載並緩存起來。喵~~~，好像很神奇的樣子，嚇得我都做地上了。
@interface ViewController () <UITableViewDataSource, UITableViewDelegate>
@property (weak, nonatomic) IBOutlet UITableView *tableView;
/**
* 存放所有對話的緩存數組
*/
@property (nonatomic, strong) NSArray * messages;
@end
// 懶加載
- (NSArray *)messages {
if (_messages == nil) {
NSString * path = [[NSBundle mainBundle] pathForResource:@"messages" ofType:@"plist"];
NSArray * dictArray = [NSArray arrayWithContentsOfFile: path];
NSMutableArray * messages = [NSMutableArray array];
for (NSDictionary * dict in dictArray) {
Message * message = [Message messageWithDict: dict];
[messages addObject: message];
}
_messages = messages;
}
return _messages;
}
- 第二步:實現數據源方法,告訴tableView有多少行的數據,有多少行數據就有多少個數據模型, 所以我們返回數據模型的個數, 而不是寫死了代碼, 這樣當聊天數目增加或者減少的時候,我們無需在改變numberOfRowsInSection方法, 只需要增加或刪除模型數據就可以。也就是
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
return self.messages.count;
}
- 第三步:實現數據源方法的cellForRowAtPath:與代理對象的，heightForRowAtPath方法。我們必須作到的一點就是通過數據模型去驅動視圖，通過改變數據來控制視圖的變化，而中間的控制器着作為這個變化所對應邏輯傳遞橋梁。這就是所謂的MVC模型。這樣職責分明，邏輯與數據分離開來，代碼的耦合程度大大降低。但是有個問題是heightForRowAtPath一般是先於cellForRowAtPath調用, 這時候cell還沒創建, 也就是所這時候數據模型還沒通過控制器傳遞給cell對象進行數據的展示，那么這時候就沒法獲取正確的高度。所以我們得想辦法讓這兩個方法反過來執行。幸運的是Apple為我們提供了一個屬性，
estimatedRowHeight,我們只需統一的設置預估屬性的大小，或者是為每一行(也就是每個cell)設置預估計的cell高度, 那么就會先調用cellForRowAtPath進行cell對象的創建，並且使用預估計的高度創建初始化的cell，但是當要顯示到界面上時候，還會再調用heightForRowAtPath.為了方便, 我直接使用的是提供統一的預估算高度,然后實現這兩個方法，如下代碼。
- (void)viewDidLoad {
[super viewDidLoad];
self.tableView.estimatedRowHeight = 120;
// Do any additional setup after loading the view, typically from a nib.
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString * ID = @"messageCell";
MessageCellTableViewCell * cell = [self.tableView dequeueReusableCellWithIdentifier:ID];
cell.message = self.messages[indexPath.row];
return cell;
}
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
return ((Message *)self.messages[indexPath.row]).height;
}
- 第四步:驅動開發, 繼續完善。我采用的開發方式是類似於測試驅動開發的方式, 先寫出想要達到的效果, 然后在圍繞的這個效果進行開發。如上代碼,
cell.message = self.messages[indexPath.row];。我想實現的是將數據模型直接傳遞給cell對象，應為我們沒必要將view層的東西暴露在controller層中，view層的東西都是和數據相關的, 這樣我們就能做到邏輯和數據的分離，好處是,打個比方,如果你項目中有10幾個controller也需要用到這個cell，那么他們就要重復的在controller中寫10多行的操作數據的操作，這是不明智的，也是不好的封裝，所以我們應該將這些代碼封裝進cell對象所屬於的類中，cell的事情，cell自己去處理.這樣封裝，controller就不必關心cell如何處理這些數據，只需要將數據交給cell處理就行。於是我們現在就可以來到UIMessageCell類中，給其加上Message類的message屬性，並且重寫setter，再setter中，我們需要做3件事情，第一件事情保留message對，第二件事情是進行控件上數據的展示，第三件事是在數據填充完后計算cell的高度，並將其更行到數據模型上。(計算高度的時候我們需要兩次使用layoutIfNeeded來強制布局,具體原因看下面注釋)
@implementation MessageCellTableViewCell
// 取得對應頭像的圖片名
- (NSString *)getPicture:(MessageWho)who {
return who == MessageWhoIsMe? @"me" : @"other";
}
- (void)setMessage:(Message *)message {
// 1.給控件裝數據
_message = message;
_icon.image = [UIImage imageNamed:[self getPicture: message.type]];
[_text setTitle:message.text forState:UIControlStateNormal];
_timeLabel.text = message.time;
// 2.裝完數據強制布局, 使得設置按鈕高度的值准確, 並且更新約束
[_text layoutIfNeeded];
// 要先強制布局, 這時候更新約束才准確
// 更新約束, 使得按鈕的高度此時等於文本的高度。
/*
When creating a custom button—that is a button with the type UIButtonTypeCustom—the frame of the button is set to (0, 0, 0, 0) initially. Before adding the button to your interface, you should update the frame to a more appropriate value.
當按鈕是custom樣式的時候, 其frmae的值都是零。
按鈕里面的label默認是不自動換行的。
*/
[_text updateConstraints:^(MASConstraintMaker *make) {
CGFloat textH = CGRectGetHeight(_text.titleLabel.frame);
make.height.equalTo(textH);
}];
// 3.再次強制布局, 使得約束生效, 這樣獲取到的按鈕高度才准確
[_text layoutIfNeeded];
CGFloat textH = CGRectGetMaxY(_text.frame);
CGFloat iconH = CGRectGetMaxY(_icon.frame);
CGFloat cellH = MAX(textH, iconH) + 10;
// 4.更新cell的高度到模型中
_message.height = cellH;
}
- (void)awakeFromNib {
// 設置自動換行
_text.titleLabel.numberOfLines = 0;
}
- (void)setSelected:(BOOL)selected animated:(BOOL)animated {
[super setSelected:selected animated:animated];
// Configure the view for the selected state
}
- 其它的小細節，如果有疑問可以給我留言、大家相互討論。如有不足還請指教。請繼續關注我的博客，會繼續完善和介紹如何做成這個QQ聊天界面。后續如果有足夠的時間會加上網絡功能~~~。
- 第一季的效果如下，敬請期待第二季的完善QQ的對話背景、實現模擬的雙人對話效果~。
- 我寫的源文件會再第二季中發上來~，存在百度網盤, 感興趣的童鞋, 可以關注我的博客更新,到時自己去下載~
。喵~~~
