即时通讯UI-聊天界面(UITableView显示左右两人聊天)
目录
1.创建UITableView对象并设置相关属性
2.创建cellModel模型
//枚举类型
typedef enum {
ChatMessageFrom = ,//来自对方的消息
ChatMessageTo //发给对方的消息 }ChatMesageType; #import <Foundation/Foundation.h> @interface ChatModel : NSObject
@property (nonatomic,assign)ChatMesageType messageType;//类型
@property (nonatomic,copy)NSString *icon;//图片
@property (nonatomic,copy)NSString *content;//内容 - (instancetype)initWithDic:(NSDictionary *)dic; + (instancetype)modelWithDic:(NSDictionary *)dic;
#import "ChatModel.h" @implementation ChatModel - (instancetype)initWithDic:(NSDictionary *)dic {
self = [super init];
if (self) {
self.icon = dic[@"icon"];
self.content = dic[@"content"];
self.messageType = [dic[@"messageType"] intValue];
}
return self;
} + (instancetype)modelWithDic:(NSDictionary *)dic {
return [[self alloc]initWithDic:dic];
}
3.计算自适应cell高度 ChatCellFrame
#import <Foundation/Foundation.h>
#import "ChatModel.h"
/**
* cell中的布局,计算高度,位置等。。。
*/
@interface ChatCellFrame : NSObject @property (nonatomic,assign)CGRect iconRect; //图标位置大小
@property (nonatomic,assign)CGRect chartViewRect;//内容位置大小
@property (nonatomic,strong)ChatModel *chartMessage;//数据模型
@property (nonatomic, assign) CGFloat cellHeight; //cell高度 @end
#define kIconMarginX 5
#define kIconMarginY 5 #import "ChatCellFrame.h" @implementation ChatCellFrame //重写set方法
- (void)setChartMessage:(ChatModel *)chartMessage { _chartMessage=chartMessage; CGSize winSize=[UIScreen mainScreen].bounds.size;
CGFloat iconX=kIconMarginX;
CGFloat iconY=kIconMarginY;
CGFloat iconWidth=;
CGFloat iconHeight=;
//当为类型1
if(chartMessage.messageType==ChatMessageFrom){ }
//当为类型2
else if (chartMessage.messageType==ChatMessageTo){
iconX=winSize.width-kIconMarginX-iconWidth;
} //图标的位置大小
self.iconRect=CGRectMake(iconX, iconY, iconWidth, iconHeight); CGFloat contentX=CGRectGetMaxX(self.iconRect)+kIconMarginX;
CGFloat contentY=iconY;
//设置字体大小
NSDictionary *attributes = @{NSFontAttributeName: [UIFont fontWithName:@"HelveticaNeue" size:]};
//文本自适应大小 CGSize contentSize=[chartMessage.content boundingRectWithSize:CGSizeMake(, MAXFLOAT) options: NSStringDrawingTruncatesLastVisibleLine | NSStringDrawingUsesLineFragmentOrigin | NSStringDrawingUsesFontLeading attributes:attributes context:nil].size; if(chartMessage.messageType==ChatMessageTo){ contentX=iconX-kIconMarginX-contentSize.width-iconWidth;
} //View的大小位置
self.chartViewRect=CGRectMake(contentX, contentY, contentSize.width+, contentSize.height+); //cell高度
self.cellHeight=MAX(CGRectGetMaxY(self.iconRect), CGRectGetMaxY(self.chartViewRect))+kIconMarginX;
} @end
4.设置cell上视图(图片和文字)ChatCellView
#import <UIKit/UIKit.h>
#import "ChatModel.h"
@interface ChatCellView : UIView @property (nonatomic,strong)UIImageView *iconImageView;
@property (nonatomic,strong)UILabel *contentLabel;
@property (nonatomic,strong)ChatModel *chartMessage; @end
#import "ChatCellView.h"
#define kContentStartMargin 25
@implementation ChatCellView
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) { self.iconImageView=[[UIImageView alloc]init];
self.iconImageView.userInteractionEnabled=YES;
[self addSubview:self.iconImageView]; self.contentLabel=[[UILabel alloc]init];
self.contentLabel.numberOfLines=;
self.contentLabel.textAlignment=NSTextAlignmentLeft;
self.contentLabel.font=[UIFont fontWithName:@"HelveticaNeue" size:];
[self addSubview:self.contentLabel]; }
return self;
} //重写frame
- (void)setFrame:(CGRect)frame {
[super setFrame:frame]; self.iconImageView.frame=self.bounds;
CGFloat contentLabelX=;
if(self.chartMessage.messageType==ChatMessageFrom){ contentLabelX=kContentStartMargin*0.8;
}else if(self.chartMessage.messageType==ChatMessageTo){
contentLabelX=kContentStartMargin*0.5;
}
self.contentLabel.frame=CGRectMake(contentLabelX, -, self.frame.size.width-kContentStartMargin-, self.frame.size.height);
} @end
5.在cell中添加视图,并将模型数据添加上去 ChatCell
#import <UIKit/UIKit.h>
#import "ChatModel.h"
#import "ChatCellFrame.h"
#import "ChatCellView.h"
@interface ChatCell : UITableViewCell @property (nonatomic,strong)ChatCellFrame *cellFrame; @end
#import "ChatCell.h" @interface ChatCell ()
@property (nonatomic,strong) UIImageView *icon;
@property (nonatomic,strong) ChatCellView *chartView;
@property (nonatomic,strong) ChatCellView *currentChartView;
@property (nonatomic,strong) NSString *contentStr;
@end @implementation ChatCell - (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
if (self) {
self.icon = [[UIImageView alloc]init];
self.chartView =[[ChatCellView alloc]initWithFrame:CGRectZero];
[self.contentView addSubview:self.icon];
[self.contentView addSubview:self.chartView];
}
return self;
} - (void)setCellFrame:(ChatCellFrame *)cellFrame {
_cellFrame=cellFrame; ChatModel *chartMessage=cellFrame.chartMessage; self.icon.frame=cellFrame.iconRect; //将图标位置赋给icon
self.icon.image=[UIImage imageNamed:chartMessage.icon];//图标 self.chartView.chartMessage=chartMessage;
self.chartView.frame=cellFrame.chartViewRect; //将内容位置赋给chartView
[self setBackGroundImageViewImage:self.chartView from:@"chatfrom_bg_normal.png" to:@"chatto_bg_normal.png"];
self.chartView.contentLabel.text=chartMessage.content; //设置文字信息
} //根据不同类型更换不同的背景图 -(void)setBackGroundImageViewImage:(ChatCellView *)chartView from:(NSString *)from to:(NSString *)to
{
UIImage *normal=nil ;
if(chartView.chartMessage.messageType==ChatMessageFrom){ normal = [UIImage imageNamed:from];
normal = [normal stretchableImageWithLeftCapWidth:normal.size.width * 0.5 topCapHeight:normal.size.height * 0.7]; }else if(chartView.chartMessage.messageType==ChatMessageTo){ normal = [UIImage imageNamed:to];
normal = [normal stretchableImageWithLeftCapWidth:normal.size.width * 0.5 topCapHeight:normal.size.height * 0.7];
}
chartView.iconImageView.image=normal;
} - (void)awakeFromNib {
// Initialization code
} - (void)setSelected:(BOOL)selected animated:(BOOL)animated {
[super setSelected:selected animated:animated]; // Configure the view for the selected state
} @end
6.回到控制器,设置数据源,(这里用的假数据),添加数据模型,使用自适应高度,使用自定义cell
#pragma mark - 懒加载 - (NSArray *)array {
if (!_array) {
_array = [[NSMutableArray alloc]initWithObjects:
@{@"icon":@"icon01.jpg",
@"content":@"早上好",
@"messageType":@""},
@{@"icon":@"icon02.jpg",
@"content":@"早上好呀",
@"messageType":@""}, nil];
}
return _array;
} #pragma mark - 模型数据 - (void)initDataSource {
_dataSource = [[NSMutableArray alloc]init];
for (NSDictionary *dic in self.array) {
ChatCellFrame *chatFrame = [[ChatCellFrame alloc]init];
ChatModel *chatModel = [ChatModel modelWithDic:dic];
chatFrame.chartMessage = chatModel;
[_dataSource addObject:chatFrame];
}
}
#pragma mark - initView - (void)initView {
_tableView = [[UITableView alloc]initWithFrame:self.view.bounds];
_tableView.dataSource = self;
_tableView.delegate = self;
_tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
[_tableView registerClass:[ChatCell class] forCellReuseIdentifier:CELLID];
[self.view addSubview:_tableView];
} #pragma mark - <UITableViewDataSource,UITableViewDelegate> - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
return _dataSource.count;
} - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { ChatCell *cell = [tableView dequeueReusableCellWithIdentifier:CELLID];
cell.cellFrame=_dataSource[indexPath.row];
cell.selectionStyle = UITableViewCellSelectionStyleNone;
return cell;
} -(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
return [_dataSource[indexPath.row] cellHeight];
}
效果图:
即时通讯UI-聊天界面(UITableView显示左右两人聊天)的更多相关文章
- Java使用socket实现两人聊天对话
import java.io.*; import java.net.ServerSocket; import java.net.Socket; import java.util.Scanner; /* ...
- java版两人聊天程序
server.java import java.io.*; import java.net.*; import java.text.SimpleDateFormat; import java.util ...
- layim即时通讯实例各功能整合
一.系统演示1.1 聊天窗体主界面演示 1.2 模拟两人在线聊天(点击图片查看演示视频) 1.3 在线演示> 在线演示,点击进入系统到这里,若是您想要的,接下来听我娓娓道来二.开发工具开发软件: ...
- Android—简单的仿QQ聊天界面
最近仿照QQ聊天做了一个类似界面,先看下界面组成(画面不太美凑合凑合呗,,,,):
- 一款Java开源的Springboot即时通讯 IM,附源码
# 开篇 电商平台最不能缺的就是即时通讯,例如通知类下发,客服聊天等.今天,就来给大家分享一个开源的即时通讯系统.如对文章不感兴趣可直接跳至文章末尾,有获取源码链接的方法. 但文章内容是需要你简单的过 ...
- UI进阶 即时通讯之XMPP好友列表、添加好友、获取会话内容、简单聊天
这篇博客的代码是直接在上篇博客的基础上增加的,先给出部分代码,最后会给出能实现简单功能的完整代码. UI进阶 即时通讯之XMPP登录.注册 1.好友列表 初始化好友花名册 #pragma mark - ...
- iOS 即时通讯 + 仿微信聊天框架 + 源码
这些你造吗? 即时通讯(IM),在IOS这片江湖里面已经算是一个老者了,我这小旋风也是在很早以前巡山的时候,就知道有即时通讯这个妖怪,以前也多多少少接触过一些,在造APP的时候用过,哎呀,说着说着就感 ...
- 【手把手教程】uniapp + vue 从0搭建仿微信App聊天应用:腾讯云TXIM即时通讯的最佳实践
基于uniapp + vue 实现仿微信App聊天应用实践,实现以下功能 1: 用户登陆 2: 聊天会话管理 3: 文本/图片/视频/定位消息收发 4: 贴图表情消息收发 5: 一对一语音视频在线通话 ...
- 对接融云即时通讯组件SDK,轻松实现App聊天室
我好像特别喜欢做聊天室类的东东,刚折腾完微软的SignalR又折腾App.本来想研究研究XMPP的,由于服务器的搭建问题,先采用一个第三方的吧,看看效果如何.听到弟弟说他们公司用到了融云,我也下载个S ...
随机推荐
- oracle 11g 表空间使用率
Oracle数据库表空间使用量查询: select b.file_name 物理文件名,b.tablespace_name 表空间,b.bytes/1024/1024 大小M,(b.bytes-sum ...
- SQL*PLUS下使用AUTOTRACE、sql顾问、实时sql监控
高级SQL优化(三) 常用优化工具 ——<12年资深DBA教你Oracle开发与优化—— 高级SQL优化(一) ——<12年资深DBA教你Oracle开发与优化——性能优化部分 1 aut ...
- poj 2046 Gap
题目连接 http://poj.org/problem?id=2046 Gap Description Let's play a card game called Gap. You have 28 c ...
- android开发系列之由ContentValues看到的
这本篇博客里面我想重点来分析一下ContentValues的源码以及它里面涉及到的继承接口Parcelabel,还有HashMap的源码. 相信使用过android里面数据库操作的朋友对于Conten ...
- String.split()方法你可能不知道的一面
一.问题 java中String的split()是我们经常使用的方法,用来按照特定字符分割字符串,那么我们看以下一段代码: public void splitTest() { String str = ...
- JS中的apply,call,bind深入理解
在Javascript中,Function是一种对象.Function对象中的this指向决定于函数被调用的方式.使用apply,call 与 bind 均可以改变函数对象中this的指向,在说区别之 ...
- C#开源系统大汇总(转)
一.AOP框架 Encase 是C#编写开发的为.NET平台提供的AOP框架.Encase 独特的提供了把方面(aspects)部署到运行时代码,而其它AOP框架依赖配置文件的方式.这种 ...
- Careercup - Google面试题 - 6271724635029504
2014-05-06 13:23 题目链接 原题: Finding a pair of elements from two sorted lists(or array) for which the s ...
- android开发支付宝接口开发流程(密钥篇)
参考博客:http://blog.it985.com/12276.html 官方下载地址:http://download.alipay.com/public/api/base/WS_MOBILE_PA ...
- 【Insertion Sorted List】cpp
题目: Sort a linked list using insertion sort. 代码: /** * Definition for singly-linked list. * struct L ...