04环信聊天界面 - 接收方cell的布局

来源：互联网发布：es5 sham.js 编辑：程序博客网时间：2024/05/02 00:40

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;}

预览效果：

最后：发送方的cell，也是同理设置。这就不具体说了。

0 0