Instant Messaging UI-chat interface (UITableView displays the chat between the left and right), ui-uitableview

Instant Messaging UI-chat interface (UITableView displays the chat between the left and right), ui-uitableview

Directory

1. Create a UITableView object and set relevant properties

2. Create a cellModel

// Enumeration type typedef enum {ChatMessageFrom = 0, // the message from the peer ChatMessageTo // the message sent to the peer} ChatMesageType; # import <Foundation/Foundation. h> @ interface ChatModel: NSObject @ property (nonatomic, assign) ChatMesageType messageType; // type @ property (nonatomic, copy) NSString * icon; // image @ property (nonatomic, copy) NSString * content; // 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. Calculate the adaptive cell height ChatCellFrame

# Import <Foundation/Foundation. h> # import "ChatModel. h"/*** cell Layout, computing height, and location... * // @ Interface ChatCellFrame: NSObject @ property (nonatomic, assign) CGRect iconRect; // The position and size of the icon @ property (nonatomic, assign) CGRect chartViewRect; // content location size @ property (nonatomic, strong) ChatModel * chartMessage; // Data Model @ property (nonatomic, assign) CGFloat cellHeight; // cell height @ end

# Define kiconmarg00005 # define kIconMarginY 5 # import "ChatCellFrame. h "@ implementation ChatCellFrame // rewrite the set Method-(void) setChartMessage :( ChatModel *) chartMessage {_ chartMessage = chartMessage; CGSize winSize = [UIScreen mainScreen]. bounds. size; CGFloat iconX = kIconMarginX; CGFloat iconY = kIconMarginY; CGFloat iconWidth = 40; CGFloat iconHeight = 40; // when the type is 1 if (chartMessage. messageType = ChatMessageFrom) {}// when the type is 2 else if (chartMessage. messageType = ChatMessageTo) {iconX = winSize. width-kIconMarginX-iconWidth;} // The position and size of the icon self. iconRect = CGRectMake (iconX, iconY, iconWidth, iconHeight); CGFloat contentX = CGRectGetMaxX (self. iconRect) + kiconmargct; CGFloat contentY = iconY; // set the font size NSDictionary * attributes =@{ NSFontAttributeName: [UIFont fontWithName: @ "inherit" size: 13]}; // text adaptive size CGSize contentSize = [chartMessage. content boundingRectWithSize: CGSizeMake (200, MAXFLOAT) options: available | NSStringDrawingUsesLineFragmentOrigin | NSStringDrawingUsesFontLeading attributes: attributes context: nil]. size; if (chartMessage. messageType = ChatMessageTo) {contentX = iconX-kIconMarginX-contentSize.width-iconWidth;} // View Size position self. chartViewRect = CGRectMake (contentX, contentY, contentSize. width + 35, contentSize. height + 30); // cell height self. cellHeight = MAX (CGRectGetMaxY (self. iconRect), CGRectGetMaxY (self. chartViewRect) + kiconmargtasks;} @ end

4. Set the ChatCellView (image and text) on the cell.

#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;} // rewrite 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. Add a View to the cell and add the model data to 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 :( strong) 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; // assign the icon position to icon self. icon. image = [UIImage imageNamed: chartMessage. icon]; // icon self. chartView. chartMessage = chartMessage; self. chartView. frame = cellFrame. chartViewRect; // assign the content location to chartView [self setBackGroundImageViewImage: self. chartView from: @ "chatfrom_bg_normal.png" to: @ "chatto_bg_normal.png"]; self. chartView. contentLabel. text = chartMessage. content; // set text information} // change the background image based on different types-(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. Return to the Controller and set the data source (here the false data is used). Add the data model, use the adaptive height, and use the custom cell.

# Pragma mark-lazy loading-(NSArray *) array {if (! _ Array) {_ array = [[NSMutableArray alloc] initWithObjects: @ {@ "icon": @ "icon01.jpg", @ "content": @ "good morning ", @ "messageType": @ "0"}, @ {@ "icon": @ "icon02.jpg", @ "content": @ "good morning", @ "messageType ": @ "1"}, nil];} return _ array;} # pragma mark-model data-(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];}

: