即便通信聊天界面搭建----iOS

時間 2019-12-02

標籤即便通信聊天界面搭建 ios 欄目 iOS 简体版

原文原文鏈接

一直想把即便聊天的界面搭建作個總結寫在博客上，沒抽出時間，今天有點時間先寫一部分，估計也不會寫太多，會隨時更新。ios

首先肯定需求。項目中聊天只涉及到純文本、純圖片、語音消息的功能，因此在聊天的界面中會存在這麼個消息類型的結構體app

typedef enum {
 
    kImageContent = 0, //表明收到的或者是發出的圖片
    kAudioContent = 1, //表明語音
    kTextContent = 2,   //表明文字

/*
如下類型是根據項目需求來的
*/
    kNotice = 3,  //通知
    kQuestion = 4,//問題
    kReQuestion = 5,//回答問題
    kVideo = 6//視頻分享
    
}ChatMessageContentType;

固然還要區分消息的發送者和接收者ide

typedef enum {
 
    kMessageFrom = 0, //表示收到的
    kMessageTo = 1    //表示發出的 
}ChatMessageType;

首先從最基礎的界面開始分析。首先聊天界面用tableview來作最好不過了，不少方法咱們均可以那系統提供的來用，省去很多代碼量。用tablview來作最重要的界面固然是cell佈局

初始化cell，初始肯定cell兩端各有一個頭像，判斷是收到的消息仍是發送的消息來肯定顯示仍是隱藏，中間部分顯示一個時間，中間是聊天的具體內容。那麼大致的架子出來了我比較習慣手寫代碼，下面給出的代碼：學習

-(void)initBaseView{
 
    _timelabel = [[UILabel alloc] initWithFrame:CGRectMake((SCREEN_WITH -100)/2, 5, 100, 20)];
    _timelabel.text = @"剛剛";
    _timelabel.textColor = [UIColor lightGrayColor];
    _timelabel.textAlignment = NSTextAlignmentCenter;
    _timelabel.font = [UIFont systemFontOfSize:11];
    [self addSubview:_timelabel];
    
    _headIcon = [[UIImageView alloc] initWithFrame:CGRectMake(5, 25, 40, 40)];
    _headIcon.image = [UIImage imageNamed:@"1.jpeg"];
    NSString *userid = [[BaseInfo shareBaseInfo]getUserId];
    _headIcon.image = [MyController getImageWithUserId:userid];
    _headIcon.layer.cornerRadius = 5;
    _headIcon.clipsToBounds = YES;
    [self addSubview:_headIcon];
    
    _chatMessageView = [[ChatContentView alloc] initWithFrame:CGRectMake(50, 25, SCREEN_WITH-100, 40)];
    [self addSubview:_chatMessageView];
}

上面代碼中ChatContentView是自定義的一個聊天內容視圖atom

#import <UIKit/UIKit.h>

#import "ChatMessageModel.h"
@interface ChatContentView : UIView

@property (nonatomic,copy) ChatMessageModel *message;
@property (nonatomic,assign) CGFloat cellHeight;//cell的高度
@property (nonatomic,strong) UILabel *contentLabel;//文字消息內容
@property (nonatomic,strong) UIImageView *chatMessageBgView;//聊天背景圖
//圖片消息
@property (nonatomic,strong)UIImageView *messageImage;
//聊天內容背景圖片
@property (nonatomic,copy)   NSString *bgImageStr;

-(CGRect)refreshContentViewWithModel:(ChatMessageModel *)content;
//回答問題
@property (nonatomic,retain)UIButton *answerBtn;
@end

注：關於裏面的方法除了語音消息添加了回調，其餘都沒有添加spa

        _chatMessageBgView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, frame.size.width, frame.size.height)];
//        _chatMessageBgView.backgroundColor = [UIColor greenColor];
        [self addSubview:_chatMessageBgView];
        _contentLabel = [[UILabel alloc] initWithFrame:CGRectMake(3, 5, frame.size.width-6, frame.size.height-10)];
//        _contentLabel.backgroundColor = [UIColor redColor];
        _contentLabel.font = [UIFont fontWithName:@"HelveticaNeue" size:13];
        _contentLabel.numberOfLines = 0;
        [self addSubview:_contentLabel];
        
        _answerBtn = [UIButton buttonWithType:UIButtonTypeCustom];
        _answerBtn.frame = CGRectMake(5, _contentLabel.frame.origin.y+_contentLabel.frame.size.height, frame.size.width-30, 40);
        _answerBtn.backgroundColor = [MyController colorWithHexString:@"8fd06a"];
        _answerBtn.hidden = YES;
        [_answerBtn setTitle:@"立刻回答" forState:UIControlStateNormal];
        [_answerBtn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
        _answerBtn.layer.cornerRadius = 5;
        [self addSubview:_answerBtn];
        
        _messageImage = [[UIImageView alloc] initWithFrame:_contentLabel.frame];
//        _messageImage.backgroundColor = [UIColor orangeColor];
        [self addSubview:_messageImage];

上面這是chatview的基本佈局最重要的方法是h文件中的code

-(CGRect)refreshContentViewWithModel:(ChatMessageModel *)content;由於咱們是根據聊天的具體內容來作視圖的自適應的。orm

而後來講下聊天內容的model重要的部分剛開始已經說過了，要肯定消息的來源和消息的類型視頻

typedef enum {
 
    kMessageFrom = 0, //表示收到的
    kMessageTo = 1    //表示發出的 
}ChatMessageType;
typedef enum {
 
    kImageContent = 0, //表明收到的或者是發出的圖片
    kAudioContent = 1, //表明語音
    kTextContent = 2,   //表明文字
    kNotice = 3,  //通知
    kQuestion = 4,//問題
    kReQuestion = 5,//回答問題
    kVideo = 6//視頻分享
    
}ChatMessageContentType;
#import <UIKit/UIKit.h>
#import <Foundation/Foundation.h>

@interface ChatMessageModel : NSObject
@property (nonatomic,strong) UIImage *messageImage;
@property (nonatomic,assign) ChatMessageType messageType;
@property (nonatomic,assign) ChatMessageContentType contentType;
@property (nonatomic,copy)   NSString *contentStr;
@property (nonatomic,copy) NSString *audioPath;

@property (nonatomic,retain)NSMutableArray *cellImageArr;
@end

最重要的部分來了，收到消息後要對界面進行處理知足適應界面無論是文字仍是圖片或者語音，大同小異，都是要計算出合適的高度去適應視圖

以圖片爲例，我這是把圖片固定位一個固定的寬高

-(CGRect)refreshContentViewWithModel:(ChatMessageModel *)content{
 
    CGRect rect;
    if(content.contentType == kImageContent){
        //圖片
        _messageImage.alpha = 1;
        _contentLabel.alpha = 0;
        if(content.messageType == kMessageFrom){
            rect = CGRectMake(50, 25, 100, 150);
            _chatMessageBgView.frame = CGRectMake(0, 0, rect.size.width, rect.size.height);
            _messageImage.frame = CGRectMake(20, 10, rect.size.width-30, rect.size.height-30);
        }else{
            rect = CGRectMake(SCREEN_WITH-50-80, 25, 80, 100);
            _chatMessageBgView.frame = CGRectMake(0, 0, rect.size.width, rect.size.height);
            _messageImage.frame = CGRectMake(10, 5, rect.size.width-30, rect.size.height-20);
        }
            _chatMessageBgView.image = [UIImage strethBgImageWith:self.bgImageStr];
            _messageImage.image = content.messageImage;
        return rect;
    }

其餘的內容與之相似就不用多說了代碼寫的簡單粗暴見諒吧各位

cell中有以下這個方法是用來肯定聊天內容的

-(CGRect)cofigCellWithChatMessage:(ChatMessageModel *)chatModel{
 
    //這是我收到的
    if(chatModel.messageType == kMessageFrom){
        _chatMessageView.bgImageStr = @"chatfrom_bg_normal";
    }else{
        //這是我發的
        _chatMessageView.bgImageStr = @"chatto_bg_normal";
        _headIcon.frame = CGRectMake(SCREEN_WITH-45, 25, 40, 40);
        _headIcon.image = [MyController getImageWithUserId:[[BaseInfo shareBaseInfo]getUserId]];
    }
    if(chatModel.contentType == kAudioContent){
     
        UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(playAudio)];
        path = chatModel.audioPath;
        [_chatMessageView addGestureRecognizer:tap];
    }else if (chatModel.contentType == kQuestion){
      
        
    }
    CGRect chatRect = [_chatMessageView refreshContentViewWithModel:chatModel];
    _chatMessageView.frame = chatRect;
    CGRect cellFrame = CGRectMake(0, 0, SCREEN_WITH, 30+chatRect.size.height);
    
    //任務
    if(chatModel.contentType == kNotice){
    //佈置任務
    _chatMessageView.frame = CGRectMake(15, 25, SCREEN_WIDTH-30, 30);
    _chatMessageView.contentLabel.frame = CGRectMake(5, 5, _chatMessageView.frame.size.width-10, 30);
    _chatMessageView.contentLabel.layer.cornerRadius = 5;
    _chatMessageView.contentLabel.layer.borderWidth = 0.5;
    _chatMessageView.contentLabel.layer.borderColor = [UIColor lightGrayColor].CGColor;
        _headIcon.alpha = 0;
    cellFrame = CGRectMake(0, 0, SCREEN_WIDTH, 55);
    }
    return cellFrame;
}

至於主界面就是cell的顯示數據的顯示另一點就是發送完消息，視圖要滑動到當前的行數

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    
    MicroVideoCell *cell = [tableView dequeueReusableCellWithIdentifier:@"ID"];
    if(!cell){
        cell = [[MicroVideoCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"ID"];
    }
    if(dataArr.count!=0){
        
        [cell configWithModel:[dataArr objectAtIndex:indexPath.row]];
    }
    return cell;
}
-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
    VideoDetailViewController *detail = [[VideoDetailViewController alloc] init];
    [self.navigationController pushViewController:detail animated:YES];
}

發送消息的時候以下傳值以發送文本消息爲例子

    
    ChatMessageModel *model = [[ChatMessageModel alloc] init];
    model.messageType = kMessageTo;
    model.contentStr = message;
    model.contentType =kTextContent;
    [cellArr addObject:model];
    [chatList reloadData];
    [self tableViewScrollCurrentIndexPath];

基本效果以下