04环信聊天界面 - 接收方cell的布局_安卓环信聊天室自定义布局-优快云博客

本文链接：https://blog.youkuaiyun.com/github_26672553/article/details/50664044

本文介绍如何使用UIKit在iOS应用中创建聊天界面。主要内容包括：拖拽UITableViewCell并添加UIImageView、UILabel等控件实现基本布局；设置约束确保适配不同屏幕尺寸；自定义UITableViewCell类ChatCell以方便重用；在ChatViewController中配置UITableView数据源和代理方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.拖一个UITabelViewCell到聊天界面的tableView里。cell里需要添加3个控件，1个UIImageView作为头像，一个UILabel(显示聊天文字)，另一个imageView(作为label的背景)。

控件关系：背景的imageView其实就是聊天气泡，文字在气泡内，文字和气泡有边距。

头像尺寸35x35, UILabel设置Lines属性为0就可以换行，并且要设置最大宽度

约束：

chatListCellHead头像控件的约束如图：

chat_receiver_bg背景图片的约束：

Message Label的约束：

注意，label和背景imageView之间左右上下为0

2.新建ChatCell 继承自 UITableViewCell，让刚那个cell 指向这个类

然后连线

//
//  ChatCell.h


#import <UIKit/UIKit.h>

@interface ChatCell : UITableViewCell

@property (weak, nonatomic) IBOutlet UILabel *messageLabel;
@end

3.在聊天控制器ChatViewController 里<UITableViewDataSource,UITableViewDelegate>

#pragma mark -UITableViewDataSource
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return 20;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *ID = @"recivierCell";
    ChatCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];
    
    cell.messageLabel.text = @"阿里的杰拉德加咖喱的空间旮旯的空间按了个凯迪拉克加咖喱块的架构拉开到加咖喱块大公鸡";
    return cell;
}

#pragma mark - UITableViewDelegate
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    return 200;
}

预览效果：