澳门永利官网，即时通讯UI－聊天界面（UITableView显示左右两人聊天），ui-uitableview

永利国际娱乐网站，目录

澳门永利线上娱乐，永利皇宫开户，1.创建UITableView对象并设置相关属性

2.创建cellModel模型

//枚举类型
typedef enum {
    ChatMessageFrom = 0,//来自对方的消息
    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=40;
    CGFloat iconHeight=40;
    //当为类型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:13]};
    //文本自适应大小

    CGSize contentSize=[chartMessage.content boundingRectWithSize:CGSizeMake(200, 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+35, contentSize.height+30);

    //cell高度
    self.cellHeight=MAX(CGRectGetMaxY(self.iconRect), CGRectGetMaxY(self.chartViewRect))+kIconMarginX;
}

@end

y8.cc永利娱乐，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=0;
        self.contentLabel.textAlignment=NSTextAlignmentLeft;
        self.contentLabel.font=[UIFont fontWithName:@"HelveticaNeue" size:13];
        [self addSubview:self.contentLabel];

    }
    return self;
}

//重写frame
- (void)setFrame:(CGRect)frame {
    [super setFrame:frame];

    self.iconImageView.frame=self.bounds;
    CGFloat contentLabelX=0;
    if(self.chartMessage.messageType==ChatMessageFrom){

        contentLabelX=kContentStartMargin*0.8;
    }else if(self.chartMessage.messageType==ChatMessageTo){
        contentLabelX=kContentStartMargin*0.5;
    }
    self.contentLabel.frame=CGRectMake(contentLabelX, -3, self.frame.size.width-kContentStartMargin-5, 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":@"0"},
  @{@"icon":@"icon02.jpg",
    @"content":@"早上好呀",
    @"messageType":@"1"}, 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];
}

效果图：

 

目录 1.创建UITableView对象并设置相关属性 2.创建cellModel模型 // 枚举类型...

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中的属性关联起来。

本文由永利澳门平台发布于计算机资讯,转载请注明出处：即时通讯UI－聊天界面（UITableView显示左右两人聊天），ui-uitableview