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

Source: Internet
Author: User

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

:

 

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.