UI基础之UITableView案例QQ聊天界面
数据模型：
#import <Foundation/Foundation.h> typedef enum{ LLMessageTypeMe, LLMessageTypeOther }LLMessageType; @interface LLMessage : NSObject /** * time */ @property (nonatomic, copy) NSString *time; /** * text */ @property (nonatomic, copy) NSString *text; /** * type 定义为枚举类型的好处 */ @property (nonatomic, assign) LLMessageType type; /** * hiddenTime 时间是否隐藏 */ @property (nonatomic, assign, getter=isHiddenTime) BOOL hiddenTime; - (instancetype)initWithDic:(NSDictionary *)dic; + (instancetype)messageWithDic:(NSDictionary *)dic; + (NSMutableArray *)messageList; @end
#import "LLMessage.h" @implementation LLMessage - (instancetype)initWithDic:(NSDictionary *)dic { if (self = [super init]) { [self setValuesForKeysWithDictionary:dic]; } return self; } + (instancetype)messageWithDic:(NSDictionary *)dic { return [[self alloc] initWithDic:dic]; } + (NSMutableArray *)messageList { NSString *path = [[NSBundle mainBundle] pathForResource:@"messages" ofType:@"plist"]; NSArray *dicArr = [NSArray arrayWithContentsOfFile:path]; NSMutableArray *tmpArr = [[NSMutableArray alloc] initWithCapacity:dicArr.count]; for (NSDictionary *dic in dicArr) { LLMessage *endMessage = [tmpArr lastObject]; LLMessage *message = [LLMessage messageWithDic:dic]; if ([message.time isEqualToString:endMessage.time]) { message.hiddenTime = YES; } [tmpArr addObject:message]; } return tmpArr; } @end
frame模型
#import <Foundation/Foundation.h> #import <UIKit/UIKit.h> #define LLTIMEFONT [UIFont systemFontOfSize:12] #define LLTEXTFONT [UIFont systemFontOfSize:13] #define LLPADDING 20 @class LLMessage; @interface LLMessageFrame : NSObject @property (nonatomic, strong) LLMessage *message; @property (nonatomic, assign,readonly) CGRect timeF; @property (nonatomic, assign, readonly) CGRect textF; @property (nonatomic, assign, readonly) CGRect iconF; @property (nonatomic, assign, readonly) CGFloat cellHeight; + (NSMutableArray *)messageFrameList; @end
#import "LLMessageFrame.h" #import "LLMessage.h" #import "NSString+LLNSStringExtension.h" @implementation LLMessageFrame + (NSMutableArray *)messageFrameList { NSMutableArray *messageArr = [LLMessage messageList]; NSMutableArray *tmpArray = [[NSMutableArray alloc] initWithCapacity:messageArr.count]; for (LLMessage *message in messageArr) { LLMessageFrame *frame = [[LLMessageFrame alloc] init]; frame.message = message; [tmpArray addObject:frame]; } return tmpArray; } - (void)setMessage:(LLMessage *)message { _message = message; CGFloat margin = 10; // 时间 CGFloat timeX = 0; CGFloat timeY = 0; CGFloat timeW = 320; CGFloat timeH = 40; if (!message.isHiddenTime){ _timeF = CGRectMake(timeX, timeY, timeW, timeH); } // icon CGFloat iconY = CGRectGetMaxY(_timeF); CGFloat iconWH = 30; CGFloat iconX; if (message.type == LLMessageTypeMe) { // Me iconX = timeW - iconWH - margin; } else { // Other iconX = margin; } _iconF = CGRectMake(iconX, iconY, iconWH, iconWH); // text CGFloat textY = iconY; CGSize textSize = [message.text textOfSize:CGSizeMake(200, MAXFLOAT) font:LLTEXTFONT]; CGSize buttonSize = CGSizeMake(textSize.width + LLPADDING * 2, textSize.height + LLPADDING * 2); CGFloat textX; if (message.type == LLMessageTypeMe) { // Me textX = iconX - margin - buttonSize.width; } else { textX = CGRectGetMaxX(_iconF) + margin; } _textF = (CGRect){{textX, textY} , buttonSize}; CGFloat textMaxY = CGRectGetMaxY(_textF); CGFloat iconMaxY = CGRectGetMaxY(_iconF); _cellHeight = MAX(textMaxY, iconMaxY); } @end
代码自定义cell
#import <UIKit/UIKit.h> @class LLMessageFrame; @interface LLMessageCell : UITableViewCell @property (nonatomic, strong) LLMessageFrame *messageFrame; + (instancetype)messageCellWith:(UITableView *)tableView; @end
#import "LLMessageCell.h" #import "LLMessageFrame.h" #import "LLMessage.h" #import <UIKit/UIKit.h> #import "UIImage+LLUIImageExtension.h" @interface LLMessageCell () @property (nonatomic, weak) UILabel *timeView; @property (nonatomic, weak) UIImageView *iconView; @property (nonatomic, weak) UIButton *textView; @end @implementation LLMessageCell + (instancetype)messageCellWith:(UITableView *)tableView { static NSString *ID = @"messageCell"; LLMessageCell *cell = [tableView dequeueReusableCellWithIdentifier:ID]; if (!cell) { cell = [[LLMessageCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:ID]; } return cell; } - (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier { if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) { // 创建cell子控件 self.backgroundColor = [UIColor clearColor]; // time UILabel *timeView = [[UILabel alloc] init]; [self.contentView addSubview:timeView]; timeView.textAlignment = NSTextAlignmentCenter; timeView.font = LLTIMEFONT; self.timeView = timeView; // icon UIImageView *iconView = [[UIImageView alloc] init]; [self.contentView addSubview:iconView]; self.iconView = iconView; // text UIButton *textView = [[UIButton alloc] init]; [self.contentView addSubview: textView]; textView.titleLabel.font = LLTEXTFONT; textView.titleLabel.numberOfLines = 0; textView.contentEdgeInsets = UIEdgeInsetsMake(LLPADDING, LLPADDING, LLPADDING, LLPADDING); self.textView = textView; } return self; } - (void)setMessageFrame:(LLMessageFrame *)messageFrame { _messageFrame = messageFrame; // 1,设置数据 [self setDate]; // 2,设置frame [self setSubviewsFrame]; } - (void)setDate { LLMessage *message = self.messageFrame.message; self.timeView.text = message.time; NSString *iconName = message.type == LLMessageTypeMe ? @"me" : @"other"; self.iconView.image = [UIImage imageNamed:iconName]; // 设置图片背景 #warning 设置按钮上label字体方法 [self.textView setTitle:message.text forState:UIControlStateNormal]; if (message.type == LLMessageTypeMe) { [self.textView setBackgroundImage:[UIImage registerImage:@"chat_send_nor"] forState:UIControlStateNormal]; [self.textView setBackgroundImage:[UIImage registerImage:@"chat_send_press_pic"] forState:UIControlStateHighlighted]; [self.textView setTitleColor:[UIColor redColor] forState:UIControlStateNormal]; } else { [self.textView setTitleColor:[UIColor blueColor] forState:UIControlStateNormal]; [self.textView setBackgroundImage:[UIImage registerImage:@"chat_recive_nor"] forState:UIControlStateNormal]; [self.textView setBackgroundImage:[UIImage registerImage:@"chat_recive_press_pic"] forState:UIControlStateHighlighted]; } } - (void)setSubviewsFrame { self.timeView.frame = self.messageFrame.timeF; self.iconView.frame = self.messageFrame.iconF; self.textView.frame = self.messageFrame.textF; } @end
分类：NSString
#import <Foundation/Foundation.h> #import <UIKit/UIKit.h> @interface NSString (LLNSStringExtension) - (CGSize)textOfSize:(CGSize)maxSize font:(UIFont *)font; @end #import "NSString+LLNSStringExtension.h" @implementation NSString (LLNSStringExtension) - (CGSize)textOfSize:(CGSize)maxSize font:(UIFont *)font { return [self boundingRectWithSize:maxSize options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName : font} context:nil].size; } @end
UIImage分类
#import <UIKit/UIKit.h> @interface UIImage (LLUIImageExtension) + (UIImage *)registerImage:(NSString *)imageName; @end #import "UIImage+LLUIImageExtension.h" #import <UIKit/UIKit.h> @implementation UIImage (LLUIImageExtension) + (UIImage *)registerImage:(NSString *)imageName { UIImage * image = [UIImage imageNamed:imageName]; return [image stretchableImageWithLeftCapWidth:image.size.width * 0.5 topCapHeight:image.size.height * 0.5]; } @end
controller：
#import "ViewController.h" #import "LLMessageFrame.h" #import "LLMessage.h" #import "LLMessageCell.h" @interface ViewController () <UITableViewDataSource, UITableViewDelegate, UITextFieldDelegate> @property (nonatomic, strong) NSMutableArray *messageFrames; @property (weak, nonatomic) IBOutlet UITableView *tableView; @property (weak, nonatomic) IBOutlet UIView *footerView; @property (weak, nonatomic) IBOutlet UITextField *textField; @end @implementation ViewController #pragma mark - 懒加载数据模型 - (NSMutableArray *)messageFrames { if (!_messageFrames) { _messageFrames = [LLMessageFrame messageFrameList]; } return _messageFrames; } - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. // 隐藏分割线 self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone; // 取消tableView的点击 self.tableView.allowsSelection = NO; self.tableView.backgroundColor = [UIColor colorWithRed:240/255.0 green:224/255.0 blue:224/255.0 alpha:1.0]; // 监听通知 [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(clickTextFiled:) name:UIKeyboardWillChangeFrameNotification object:nil]; // 设置文本框左边内容默认有间距 self.textField.leftView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 8, 0)]; self.textField.leftViewMode = UITextFieldViewModeAlways; } - (void)clickTextFiled:(NSNotification *)noti { CGRect rect = [noti.userInfo[@"UIKeyboardFrameEndUserInfoKey"] CGRectValue]; CGFloat moveY = rect.origin.y - self.view.frame.size.height; self.view.transform = CGAffineTransformMakeTranslation(0, moveY); } - (void)dealloc { [[NSNotificationCenter defaultCenter] removeObserver:self]; } #pragma mark - 数据源方法 - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { return self.messageFrames.count; } - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { // 1,创建cell LLMessageCell *cell = [LLMessageCell messageCellWith:tableView]; // 2，设置cell cell.messageFrame = self.messageFrames[indexPath.row]; return cell; } #pragma mark - 代理方法 - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath { return [self.messageFrames[indexPath.row] cellHeight]; } - (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView { [self.view endEditing:YES]; } #pragma mark - 文本框代理方法 - (BOOL)textFieldShouldReturn:(UITextField *)textField { LLMessageFrame *frame = [[LLMessageFrame alloc] init]; LLMessage *message = [[LLMessage alloc] init]; NSDate *date = [NSDate date]; NSDateFormatter *formatter = [[NSDateFormatter alloc] init]; formatter.dateFormat = @"hh:mm"; NSString *time = [formatter stringFromDate:date]; message.time = time; message.text = textField.text; message.type = LLMessageTypeMe; LLMessageFrame *lastMF = [self.messageFrames lastObject]; if ([lastMF.message.time isEqualToString:message.time]) { message.hiddenTime = YES; } frame.message = message; [self.messageFrames addObject:frame]; // 刷新 [self.tableView reloadData]; // 自动上滚 NSIndexPath *path = [NSIndexPath indexPathForRow:self.messageFrames.count - 1 inSection:0]; [self.tableView scrollToRowAtIndexPath:path atScrollPosition:UITableViewScrollPositionBottom animated:YES]; textField.text = nil; return YES; } - (BOOL)prefersStatusBarHidden { return YES; } @end
效果;
