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