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

來源:互聯網
上載者:User

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

  • 我寫的源檔案整個工程會再第二季中發上來~,存在百度網盤, 感興趣的童鞋, 可以關注我的部落格更新,到時自己去下載~。喵~~~

    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的對話背景、實現類比的雙人對話效果~。
  • 我寫的源檔案會再第二季中發上來~,存在百度網盤, 感興趣的童鞋, 可以關注我的部落格更新,到時自己去下載~。喵~~~

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.