QQ聊天界面的布局和設計(IOS篇)-第一季

2019-11-14 18:53:50

字體：大中小

來源：轉載

供稿：網友

我寫的源文件整個工程會再第二季中發上來~，存在百度網盤, 感興趣的童鞋, 可以關注我的博客更新,到時自己去下載~~~。喵~~~~~
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的對話背景、實現模擬的雙人對話效果~。
我寫的源文件會再第二季中發上來~，存在百度網盤, 感興趣的童鞋, 可以關注我的博客更新,到時自己去下載~~~。喵~~~~~