不同cell實現(xiàn)qq聊天框效果

** 準備工作: **

  • 新建DLmessage模型類文件.
  • 新建DLMessageCell類文件,將storyboard中cell的class改為DLMessageCell.設置上面cell的重用標識為messageMe,下面cell的重用標識為messageOther.
  • 新建DLMessageViewController類文件,將storyboard中的控制器class改為DLMessageViewControlle.

1.將所需控件布局到storyboard,設置控件的圖片等屬性,并設置控制器為tableView的數(shù)據(jù)源和代理.
如下圖:

設置控件
設置數(shù)據(jù)源和代理

2.通過autoLayout設置每個控件的布局,其中button的寬度屬性大于等于 60 小于等于 240 ,這樣button里面的titleLabel屬性就能跟隨內(nèi)容長度變化,從而也就決定了button的寬度長短.在自定義cell類的awakeFromNib方法中設置button中titleLabel的numberOfLines為零,這樣就實現(xiàn)了Button內(nèi)容的自動換行功能.

- (void)awakeFromNib{
   //設置titleLabel達到button最大寬度時自動換行
    self.messageButton.titleLabel.numberOfLines = 0;
}

3.將控件連線DLMessageCell類擴展中.不同cell可以將相同的屬性共用.

連線控件

4.創(chuàng)建DLmessage模型中的成員屬性,使其能夠加載并記錄plist文件數(shù)據(jù).

DLmessage.h文件
#import <UIKit/UIKit.h>

typedef enum {
    DLMessageTypeMe = 0,
    DLMessageTypeOther = 1
} DLMessageType;

@interface DLMessage : NSObject
@property(nonatomic,strong) NSString *text;
@property(nonatomic,strong) NSString *time;
@property(nonatomic,assign) DLMessageType type;
//記錄行高,取出cell中高度的最大值來賦值
@property(nonatomic,assign) CGFloat cellHeight;
//記錄發(fā)送時間是否顯示
@property(nonatomic,assign,getter=isHideTime) BOOL hideTime;
//構造方法,方便外界傳入plist文件
+ (instancetype)messageWithDict:(NSDictionary *)dict;
@end

DLmessage.m文件
#import "DLMessage.h"

@implementation DLMessage
+ (instancetype)messageWithDict:(NSDictionary *)dict{
    DLMessage *message = [[self alloc] init];
    //KVC
    [message setValuesForKeysWithDictionary:dict];
    return message;
}
@end

5.在DLMessageCell.h文件中新建模型類成員屬性,在.m中重寫set方法,將數(shù)據(jù)傳給子控件

DLMessageCell.h文件

#import <UIKit/UIKit.h>

@class DLMessage;

@interface DLMessageCell : UITableViewCell

@property(nonatomic,strong) DLMessage *message;
@end

DLMessageCell.m文件

#import "DLMessageViewCell.h"
#import "DLMessage.h"
//define this constant if you want to use Masonry without the 'mas_' prefix
#define MAS_SHORTHAND
//define this constant if you want to enable auto-boxing for default syntax
#define MAS_SHORTHAND_GLOBALS
#import "Masonry.h"

@interface DLMessageCell ()

@property (weak, nonatomic) IBOutlet UILabel *timeLabel;
@property (weak, nonatomic) IBOutlet UIButton *messageButton;
@property (weak, nonatomic) IBOutlet UIImageView *iconView;

@end
@implementation DLMessageCell

- (void)awakeFromNib{
    //設置換行
    self.messageButton.titleLabel.numberOfLines = 0;
}
- (void)setMessage:(DLMessage *)message{
    
    _message = message;
    
    //隱藏時間
    if (message.hideTime) {
        self.timeLabel.hidden = YES;
        [self.timeLabel updateConstraints:^(MASConstraintMaker *make) {
            make.height.equalTo(0);
        }];
    }else{//顯示時間
        self.timeLabel.hidden = NO;
        self.timeLabel.text = message.time;
        [self.timeLabel updateConstraints:^(MASConstraintMaker *make) {
            make.height.equalTo(21);
        }];
    }
    //設置控件內(nèi)容
    [self.messageButton setTitle:self.message.text forState:UIControlStateNormal];
    //強制更新
    [self layoutIfNeeded];
    //修改button的高度
    [self.messageButton updateConstraints:^(MASConstraintMaker *make) {
        CGFloat buttonH = self.messageButton.titleLabel.frame.size.height + 30;
        make.height.equalTo(buttonH);
    }];
    [self layoutIfNeeded];
   //獲取button與nameView的最大值,設置最大值為cell的高度
    CGFloat buttonY = CGRectGetMaxY(self.messageButton.frame);
    CGFloat iconViewY = CGRectGetMaxY(self.iconView.frame);
    self.message.cellHeight = MAX(buttonY, iconViewY) + 5;
   }
@end

6.在DLMessageViewController中新建數(shù)組,加載模型數(shù)據(jù),同時實現(xiàn)tableView的數(shù)據(jù)源方法,需遵守UITableViewDataSource,UITableViewDelegate協(xié)議.


#import "DLMessageViewController.h"
#import "DLMessageCell.h"
#import "DLMessage.h"

@interface DLMessageViewController ()<UITableViewDataSource,UITableViewDelegate>

@property(nonatomic,strong) NSArray *messages;
@property (weak, nonatomic) IBOutlet UITextField *messageFeild;
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *buttomSpacing;

@end

@implementation DLMessageViewController
- (NSArray *)messages{
    if (_messages == nil) {
        NSString *path = [[NSBundle mainBundle] pathForResource:@"messages.plist" ofType:nil];
        NSArray *dictArr = [NSArray arrayWithContentsOfFile:path];
        
        NSMutableArray *messageArrM = [NSMutableArray array];
        DLMessage *lastMessage = nil;
        for (NSDictionary *dict in dictArr) {
            
            DLMessage *message = [DLMessage messageWithDict:dict];
            message.hideTime = [lastMessage.time isEqualToString:message.time];
            [messageArrM addObject:message];
            lastMessage = message;
        }
        _messages = messageArrM;
    }
    return _messages;
}

- (void)viewDidLoad {
    [super viewDidLoad];
}
//返回cell的行數(shù)
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    return self.messages.count;
}
//設置cell的數(shù)據(jù)
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    //取出模型的數(shù)據(jù)
    DLMessage *message = self.messages[indexPath.row];
    /*根據(jù)模型中type的值來設置數(shù)據(jù)(方法1)
    DLMessageCell *cell = [[DLMessageCell alloc] init];
    if (message.type == DLMessageTypeMe) {
        cell = [tableView dequeueReusableCellWithIdentifier:@"messageMe"];
    }else if(message.type == DLMessageTypeOther){
        cell = [tableView dequeueReusableCellWithIdentifier:@"messageOther"];
    }
    cell.message = self.messages[indexPath.row];
    return cell;
     */
    // 根據(jù)模型中type的值來設置數(shù)據(jù)(方法2)
    NSString *ID = (message.type == DLMessageTypeMe)? @"messageMe" : @"messageOther";
    DLMessageCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];
    cell.message = message;
    return cell;
}
//返回cell的估計高度
- (CGFloat)tableView:(UITableView *)tableView estimatedHeightForRowAtIndexPath:(NSIndexPath *)indexPath{
    return 200;
}
//返回cell的高度
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
    DLMessage *message = self.messages[indexPath.row];
    return  message.cellHeight;
}
最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市秸妥,隨后出現(xiàn)的幾起案子皂甘,更是在濱河造成了極大的恐慌揽乱,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,591評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件朝蜘,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機署咽,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,448評論 3 392
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來生音,“玉大人宁否,你說我怎么就攤上這事∽罕椋” “怎么了慕匠?”我有些...
    開封第一講書人閱讀 162,823評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長域醇。 經(jīng)常有香客問我絮重,道長,這世上最難降的妖魔是什么歹苦? 我笑而不...
    開封第一講書人閱讀 58,204評論 1 292
  • 正文 為了忘掉前任青伤,我火速辦了婚禮,結果婚禮上殴瘦,老公的妹妹穿的比我還像新娘狠角。我一直安慰自己,他們只是感情好蚪腋,可當我...
    茶點故事閱讀 67,228評論 6 388
  • 文/花漫 我一把揭開白布丰歌。 她就那樣靜靜地躺著姨蟋,像睡著了一般。 火紅的嫁衣襯著肌膚如雪立帖。 梳的紋絲不亂的頭發(fā)上眼溶,一...
    開封第一講書人閱讀 51,190評論 1 299
  • 那天,我揣著相機與錄音晓勇,去河邊找鬼堂飞。 笑死,一個胖子當著我的面吹牛绑咱,可吹牛的內(nèi)容都是我干的绰筛。 我是一名探鬼主播,決...
    沈念sama閱讀 40,078評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼描融,長吁一口氣:“原來是場噩夢啊……” “哼铝噩!你這毒婦竟也來了?” 一聲冷哼從身側響起窿克,我...
    開封第一講書人閱讀 38,923評論 0 274
  • 序言:老撾萬榮一對情侶失蹤骏庸,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后年叮,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體具被,經(jīng)...
    沈念sama閱讀 45,334評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,550評論 2 333
  • 正文 我和宋清朗相戀三年谋右,在試婚紗的時候發(fā)現(xiàn)自己被綠了硬猫。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,727評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡改执,死狀恐怖啸蜜,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情辈挂,我是刑警寧澤衬横,帶...
    沈念sama閱讀 35,428評論 5 343
  • 正文 年R本政府宣布,位于F島的核電站终蒂,受9級特大地震影響蜂林,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜拇泣,卻給世界環(huán)境...
    茶點故事閱讀 41,022評論 3 326
  • 文/蒙蒙 一噪叙、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧霉翔,春花似錦睁蕾、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,672評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽瀑凝。三九已至,卻和暖如春臭杰,著一層夾襖步出監(jiān)牢的瞬間粤咪,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,826評論 1 269
  • 我被黑心中介騙來泰國打工渴杆, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留寥枝,地道東北人。 一個月前我還...
    沈念sama閱讀 47,734評論 2 368
  • 正文 我出身青樓将塑,卻偏偏與公主長得像脉顿,于是被迫代替她去往敵國和親蝌麸。 傳聞我的和親對象是個殘疾皇子点寥,可洞房花燭夜當晚...
    茶點故事閱讀 44,619評論 2 354

推薦閱讀更多精彩內(nèi)容

  • qq聊天框是一個非常典型的cell.這個項目既可以用同一個cell來完成,也可以分成兩個cell來操作. ** 準...
    letaibai閱讀 590評論 0 4
  • 我們在上一篇《通過代碼自定義不等高cell》中學習了tableView的相關知識,本文將在上文的基礎上来吩,利用sto...
    啊世ka閱讀 1,506評論 2 7
  • UITableViewCell 父類是UIView UITableView的每一行都是一個UITableViewC...
    翻這個墻閱讀 6,596評論 0 1
  • 發(fā)現(xiàn) 關注 消息 iOS 第三方庫敢辩、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,094評論 4 62
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,077評論 25 707