devbox
小小林熬夜学编程
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

iOS_29仿微信聊天界面_ios 防微信聊天界面

作者：小小林熬夜学编程 | 2024-05-31 12:21:21

赞

踩

ios 防微信聊天界面

最终效果图:





自定义cell的封装

BeyondCell

  1. //
  2. //  BeyondCell.h
  3. //  29_仿微信聊天
  4. //
  5. //  Created by beyond on 14-9-4.
  6. //  Copyright (c) 2014年 com.beyond. All rights reserved.
  7. //
  8.  
  9. #import <UIKit/UIKit.h>
  10. @class BeyondCellFrame;
  11.  
  12. @interface BeyondCell : UITableViewCell
  13.  
  14.  
  15. // 一行自定义的cell,初始化的时候,全部生成各个控件并添加到contentView,然后通过cellWithCellFrame方法,将参数CellFrame(内含Msg对象)的所有成员frame和数据 设置到cell中的各个控件上面去
  16.  
  17.  
  18.  
  19. // 返回xib界面上写的重用cellID
  20. + (NSString *)cellID;
  21.  
  22.  
  23. // 通过一个WeiboFrames模型对象(它本身就含有一个Weibo数据 模型),返回一个填充好数据的cell对象
  24. - (BeyondCell *)cellWithCellFrame:(BeyondCellFrame *)cellFrame;
  25.  
  26. @end

  1. //
  2. //  BeyondCell.m
  3. //  29_仿微信聊天
  4. //
  5. //  Created by beyond on 14-9-4.
  6. //  Copyright (c) 2014年 com.beyond. All rights reserved.
  7. //
  8.  
  9. #import "BeyondCell.h"
  10. #import "BeyondCellFrame.h"
  11. #import "Msg.h"
  12.  
  13. // 类扩展,又叫匿名分类
  14. @interface BeyondCell()
  15. {
  16.     // 1,头像
  17.     UIImageView *_headImg;
  18.     // 2,正文内容
  19.     UILabel *_content;
  20.     // 3,大图片
  21.     UIImageView *_bgImg;
  22. }
  23. @end
  24. @implementation BeyondCell
  25. // 返回xib界面上写的重用cellID
  26. + (NSString *)cellID
  27. {
  28.     return @"BeyondCell";
  29. }
  30.  
  31. // 当池中没有Cell的时候,创建出一个纯洁的Cell,一次性alloc 出所有的各个子控件 ,并加到contentView
  32. - (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
  33. {
  34.     self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
  35.     if (self) {
  36.         
  37.         //选中cell后背景无颜色
  38.         self.selectionStyle = UITableViewCellSelectionStyleNone;
  39.         self.backgroundColor = [UIColor clearColor];
  40.         
  41.         
  42.         
  43.         // 不管三七二十一,先把所有的控件实例化,并添加到contentView里面
  44.         // 1,头像
  45.         _headImg = [[UIImageView alloc]init];
  46.         _headImg.layer.cornerRadius = 10;
  47.         _headImg.layer.masksToBounds = YES;
  48.         [self.contentView addSubview:_headImg];
  49.         
  50.        
  51.         
  52.         
  53.         
  54.         // 2,大图片
  55.         _bgImg = [[UIImageView alloc]init];
  56.         [self.contentView addSubview:_bgImg];
  57.         
  58.         
  59.         // 3,正文内容,添加大背景图片里面
  60.         _content = [[UILabel alloc]init];
  61.         _content.backgroundColor = [UIColor clearColor];
  62.  
  63.         // 正文内容用的字体,宏定义在.h
  64.         _content.font = kContentFnt;
  65.         _content.numberOfLines = 0;
  66.         _content.lineBreakMode = NSLineBreakByWordWrapping;
  67.         [_bgImg addSubview:_content];
  68.         
  69.         
  70.     }
  71.     return self;
  72. }
  73.  
  74.  
  75. // 通过一个Frames模型对象(它本身就含有一个数据 模型),返回一个填充好数据的cell对象,将参数Frames(内含对象)的所有成员frames和数据 设置到cell中的各个控件上面去
  76. - (BeyondCell *)cellWithCellFrame:(BeyondCellFrame *)cellFrame
  77. {
  78.     Msg *msg = cellFrame.msg;
  79.     
  80.     
  81.     // 将模型对象中的所有属性值,全部赋值到cell对象中的成员控件上显示
  82.     // 1,头像
  83.     
  84.     
  85.     
  86.     if ([msg.name isEqualToString:@"nana"]) {
  87.         _headImg.image = [UIImage imageNamed:@"icon01.jpg"];
  88.     } else {
  89.         _headImg.image = [UIImage imageNamed:@"icon02.jpg"];
  90.     }
  91.     
  92.     
  93.     // 5,正文内容
  94.     _content.text = msg.content;
  95.     
  96.     // 6,大图片
  97.     if ([msg.name isEqualToString:@"nana"]) {
  98.         _bgImg.image = [UIImage imageStretchedWithName:@"chatfrom_bg_normal.png" xPos:0.5 yPos:0.6];
  99.  
  100.     } else {
  101.         _bgImg.image = [UIImage
  102.                     imageStretchedWithName:@"chatto_bg_normal.png" xPos:0.5 yPos:0.6];
  103.     }
  104.     
  105.     
  106.     
  107.     
  108.     // 1,头像的frame
  109.     _headImg.frame = cellFrame.headImgFrame;
  110.     
  111.  
  112.     
  113.     
  114.     // 2,正文的frame
  115.     _content.frame = cellFrame.contentFrame;
  116.     
  117.     // 3,bigImg的frame
  118.     _bgImg.frame = cellFrame.contentBgImgFrame;
  119.     
  120.     
  121.     
  122.  
  123.     
  124.     
  125.     return self;
  126. }
  127.  
  128. @end


封装的数据源Model

  1. //
  2. //  Msg.h
  3. //  29_仿微信聊天
  4. //
  5. //  Created by beyond on 14-9-4.
  6. //  Copyright (c) 2014年 com.beyond. All rights reserved.
  7. //  模型,成员:icon,正文text
  8.  
  9. #import <Foundation/Foundation.h>
  10.  
  11. // 内容 用的字体
  12. #define kContentFnt [UIFont fontWithName:@"HelveticaNeue" size:18.0f]
  13.  
  14. @interface Msg : NSObject
  15. // 头像图片名
  16. @property (nonatomic,copy) NSString *headImg;
  17.  
  18.  
  19. // 消息内容
  20. @property (nonatomic,copy) NSString *content;
  21.  
  22. @property (nonatomic,copy) NSString *name;
  23.  
  24. @property (nonatomic,strong) NSString *recordFileFath;
  25.  
  26. // 类方法,字典 转 对象 类似javaBean一次性填充
  27. + (Msg *)msgWithDict:(NSDictionary *)dict;
  28. // 对象方法,设置对象的属性后,返回对象
  29. - (Msg *)initWithDict:(NSDictionary *)dict;
  30.  
  31. + (Msg*)msgWithName:(NSString *)name content:(NSString *)content recordFilePath:(NSString *)path;
  32. @end


  1. //
  2. //  Msg.m
  3. //  29_仿微信聊天
  4. //
  5. //  Created by beyond on 14-9-4.
  6. //  Copyright (c) 2014年 com.beyond. All rights reserved.
  7. //
  8.  
  9. #import "Msg.h"
  10.  
  11. @implementation Msg
  12.  
  13. // 类方法,字典 转 对象 类似javaBean一次性填充
  14. + (Msg *)msgWithDict:(NSDictionary *)dict
  15. {
  16.     return [[self alloc]initWithDict:dict];
  17. }
  18.  
  19. // 对象方法,设置对象的属性后,返回对象
  20. - (Msg *)initWithDict:(NSDictionary *)dict
  21. {
  22.     // 必须先调用父类NSObject的init方法
  23.     if (self = [super init]) {
  24.         // 设置对象自己的属性
  25.         // 通过遍历 将 字典 赋值为对象各个属性
  26.         for (NSString *key in dict) {
  27.             [self setValue:dict[key] forKeyPath:key];
  28.         }
  29.         // 一次性 将 字典 赋值为对象各个属性
  30.         // [self setValuesForKeysWithDictionary:dict];
  31.         
  32.     }
  33.     // 返回填充好的对象
  34.     return self;
  35. }
  36.  
  37. + (Msg*)msgWithName:(NSString *)name content:(NSString *)content recordFilePath:(NSString *)path
  38. {
  39.     Msg *msg = [[self alloc]init];
  40.     msg.name = name;
  41.     msg.content = content;
  42.     msg.recordFileFath = path;
  43.  
  44.     return msg;
  45. }
  46.  
  47. @end


重点:根据数据源计算frame


  1. //
  2. //  BeyondCellFrame.h
  3. //  29_仿微信聊天
  4. //
  5. //  Created by beyond on 14-9-4.
  6. //  Copyright (c) 2014年 com.beyond. All rights reserved.
  7. //
  8.  
  9. #import <Foundation/Foundation.h>
  10. @class Msg;
  11. // 控件与控件之间的外边距
  12. #define kMargin 7
  13. // 头像的高宽
  14. #define kHeadImgHW 85
  15.  
  16.  
  17. @interface BeyondCellFrame : NSObject
  18.  
  19. // 最大的Y值,就是行高
  20. @property (nonatomic,assign,readonly) CGFloat maxY;
  21.  
  22. // 重要,拥有一个成员:对象,目的是在控制器中,传递对象进来之后,可以通过此模型对象的数据,计算出所有的frames
  23. @property (nonatomic,strong) Msg *msg;
  24.  
  25.  
  26.  
  27. // 头像 的frame
  28. @property (nonatomic,assign,readonly) CGRect headImgFrame;
  29.  
  30. // 聊天正文的背景图片 的frame
  31. @property (nonatomic,assign,readonly) CGRect contentBgImgFrame;
  32.  
  33. // 正文内容 的frame
  34. @property (nonatomic,assign,readonly) CGRect contentFrame;
  35.  
  36.  
  37.  
  38.  
  39. @end


  1. //
  2. //  BeyondCellFrame.m
  3. //  29_仿微信聊天
  4. //
  5. //  Created by beyond on 14-9-4.
  6. //  Copyright (c) 2014年 com.beyond. All rights reserved.
  7. //
  8.  
  9. #import "BeyondCellFrame.h"
  10. #import "Msg.h"
  11. @implementation BeyondCellFrame
  12.  
  13.  
  14.  
  15. // CellFrame类 唯一的一个方法:设置Msg的时候,可以通过其数据,计算出各个frame,以及最大的Y,也就是行高
  16. - (void)setMsg:(Msg *)msg
  17. {
  18.     _msg = msg;
  19.     
  20.     // 具体的计算各个frame的代码,放在这儿~~~
  21.     
  22.     if ([msg.name isEqualToString:@"nana"]) {
  23.         [self standLeft:msg];
  24.     } else {
  25.         [self standRight:msg];
  26.     }
  27.     
  28.     
  29. }
  30. // 我说的放在右边
  31. - (void)standRight:(Msg *)msg
  32. {
  33.     // 1,头像的frame
  34.     // 头像的x
  35.     CGFloat headImgX = 320 - kHeadImgHW - kMargin;
  36.     // 头像的y
  37.     CGFloat headImgY = 0;
  38.     // 头像的H
  39.     CGFloat headImgH = kHeadImgHW;
  40.     // 头像的W
  41.     CGFloat headImgW = kHeadImgHW;
  42.     _headImgFrame = CGRectMake(headImgX, headImgY, headImgH, headImgW);
  43.     
  44.     
  45.     //===============****************=======================
  46.     
  47.     // 2,bg的frame
  48.     // 宽度W
  49.     CGFloat bgW = 320 - kHeadImgHW - kMargin;
  50.     // x
  51.     CGFloat bgX = 320 - bgW - kHeadImgHW - kMargin;
  52.     // y
  53.     CGFloat bgY = 0;
  54.     
  55.     // CGFloat winWidth = [[UIApplication sharedApplication] statusBarFrame].size.width;
  56.     
  57.     // 高度先假设 H
  58.     CGFloat bgH = 300;
  59.     _contentBgImgFrame = CGRectMake(bgX, bgY, bgW,bgH);
  60.     
  61.     
  62.     //===============****************=======================
  63.  
  64.     // 3,正文的frame 正文添加到图片里面,以图片的左上角为 0 0
  65.     // x
  66.     CGFloat contentX =  kMargin*1.5;
  67.     // y
  68.     CGFloat contentY = kMargin;
  69.     
  70.     
  71.     // 宽度W 先假设大于一行
  72.     CGFloat contentW = bgW - contentX - kMargin  ;
  73.     CGFloat contentH = 0;
  74.     
  75.     // 判断 内容够不够一行...
  76.     // 根据字体得到NSString的尺寸
  77.     CGSize oneLineSize = [msg.content sizeWithAttributes:[NSDictionary dictionaryWithObjectsAndKeys:kContentFnt,NSFontAttributeName, nil]];
  78.     CGFloat oneLineW = oneLineSize.width;
  79.     
  80.     if (oneLineW < contentW) {
  81.         // 如果不够一行
  82.         CGFloat oneLineH = oneLineSize.height;
  83.         contentX =  kMargin * 1.2;
  84.         _contentFrame = CGRectMake(contentX, contentY, oneLineW,oneLineH);
  85.         
  86.         contentH = oneLineH;
  87.         contentW = oneLineW;
  88.         
  89.         // 5,重新调整 contentBgImg的frame的高度
  90.         // 以下三步为OC标准代码,因为OC中不允许直接修该对象中结构体属性的成员的值,要通过中间的临时结构体变量
  91.         CGRect frame = _contentBgImgFrame;
  92.         frame.size.width = contentW + kMargin *3.5;
  93.         frame.size.height = contentH + kMargin * 3 ;
  94.         frame.origin.x = 320 - contentW - headImgW - kMargin*4;
  95.         _contentBgImgFrame = frame;
  96.         
  97.     } else {
  98.         // 如果超过一行,按下面算法计算 高度
  99.         // 根据内容动态设置 高度
  100.         CGRect tmpRect = [msg.content boundingRectWithSize:CGSizeMake(contentW, MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin attributes:[NSDictionary dictionaryWithObjectsAndKeys:kContentFnt,NSFontAttributeName, nil] context:nil];
  101.         // 高度H
  102.         contentH = tmpRect.size.height;
  103.         _contentFrame = CGRectMake(contentX, contentY, contentW,contentH);
  104.         
  105.         // 5,重新调整 contentBgImg的frame的高度
  106.         // 以下三步为OC标准代码,因为OC中不允许直接修该对象中结构体属性的成员的值,要通过中间的临时结构体变量
  107.         CGRect frame = _contentBgImgFrame;
  108.         frame.size.height = contentH + kMargin * 3 ;
  109.         _contentBgImgFrame = frame;
  110.     }
  111.     
  112.     
  113.     // 8,这个时候就可以计算最大Y 即行高了
  114.     if (headImgH > _contentBgImgFrame.size.height) {
  115.         _maxY = CGRectGetMaxY(_headImgFrame) + kMargin;
  116.     } else {
  117.         _maxY = CGRectGetMaxY(_contentBgImgFrame) + kMargin;
  118.     }
  119. }
  120.  
  121. - (void)standLeft:(Msg *)msg
  122. {
  123.     // 1,头像的frame
  124.     // 头像的x
  125.     CGFloat headImgX = kMargin;
  126.     // 头像的y
  127.     CGFloat headImgY = kMargin;
  128.     // 头像的H
  129.     CGFloat headImgH = kHeadImgHW;
  130.     // 头像的W
  131.     CGFloat headImgW = kHeadImgHW;
  132.     _headImgFrame = CGRectMake(headImgX, headImgY, headImgH, headImgW);
  133.     
  134.     
  135.     //===============****************=======================
  136.     
  137.     // 4,bg的frame
  138.     // x
  139.     CGFloat bgX = _headImgFrame.size.width + kMargin;
  140.     // y
  141.     CGFloat bgY = _headImgFrame.origin.y;
  142.     
  143.     // CGFloat winWidth = [[UIApplication sharedApplication] statusBarFrame].size.width;
  144.     
  145.     // 宽度W
  146.     CGFloat bgW = 320 - bgX - kMargin;
  147.     
  148.     
  149.     
  150.     // 高度H
  151.     CGFloat bgH = 300;
  152.     _contentBgImgFrame = CGRectMake(bgX, bgY, bgW,bgH);
  153.     
  154.     
  155.     
  156.     
  157.     
  158.     // 4,正文的frame 正文添加到图片里面,以图片的左上角为 0 0
  159.     // x
  160.     CGFloat contentX =  kMargin*3;
  161.     // y
  162.     CGFloat contentY = kMargin;
  163.     
  164.     // CGFloat winWidth = [[UIApplication sharedApplication] statusBarFrame].size.width;
  165.     
  166.     // 宽度W 先假设大于一行
  167.     CGFloat contentW = bgW - contentX - kMargin  ;
  168.     CGFloat contentH = 0;
  169.     
  170.     // 判断 内容够不够一行...
  171.     // 根据字体得到NSString的尺寸
  172.     CGSize oneLineSize = [msg.content sizeWithAttributes:[NSDictionary dictionaryWithObjectsAndKeys:kContentFnt,NSFontAttributeName, nil]];
  173.     CGFloat oneLineW = oneLineSize.width;
  174.     
  175.     if (oneLineW < contentW) {
  176.         // 如果不够一行
  177.         CGFloat oneLineH = oneLineSize.height;
  178.         contentX =  kMargin * 2;
  179.         _contentFrame = CGRectMake(contentX, contentY, oneLineW,oneLineH);
  180.         
  181.         contentH = oneLineH;
  182.         contentW = oneLineW;
  183.         
  184.         // 5,重新调整 contentBgImg的frame的高度
  185.         // 以下三步为OC标准代码,因为OC中不允许直接修该对象中结构体属性的成员的值,要通过中间的临时结构体变量
  186.         CGRect frame = _contentBgImgFrame;
  187.         frame.size.width = contentW + kMargin *3.5;
  188.         frame.size.height = contentH + kMargin * 3 ;
  189.         _contentBgImgFrame = frame;
  190.         
  191.     } else {
  192.         // 如果超过一行,按下面算法计算 高度
  193.         // 根据内容动态设置 高度
  194.         CGRect tmpRect = [msg.content boundingRectWithSize:CGSizeMake(contentW, MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin attributes:[NSDictionary dictionaryWithObjectsAndKeys:kContentFnt,NSFontAttributeName, nil] context:nil];
  195.         // 高度H
  196.         contentH = tmpRect.size.height;
  197.         _contentFrame = CGRectMake(contentX, contentY, contentW,contentH);
  198.         
  199.         // 5,重新调整 contentBgImg的frame的高度
  200.         // 以下三步为OC标准代码,因为OC中不允许直接修该对象中结构体属性的成员的值,要通过中间的临时结构体变量
  201.         CGRect frame = _contentBgImgFrame;
  202.         frame.size.height = contentH + kMargin * 3 ;
  203.         _contentBgImgFrame = frame;
  204.     }
  205.     
  206.     
  207.     // 8,这个时候就可以计算最大Y 即行高了
  208.     if (headImgH > _contentBgImgFrame.size.height) {
  209.         _maxY = CGRectGetMaxY(_headImgFrame) + kMargin;
  210.     } else {
  211.         _maxY = CGRectGetMaxY(_contentBgImgFrame) + kMargin;
  212.     }
  213. }
  214. @end


控制器

  1. //
  2. //  BeyondViewController.m
  3. //  29_仿微信聊天
  4. //
  5. //  Created by beyond on 14-9-2.
  6. //  Copyright (c) 2014年 com.beyond. All rights reserved.
  7. //
  8.  
  9. #import "BeyondViewController.h"
  10. #import "Msg.h"
  11. #import "BeyondCellFrame.h"
  12. #import "BeyondCell.h"
  13.  
  14. @interface BeyondViewController ()
  15. {
  16.     // 从plist文件中加载的所有weiboFrames(因为它已经含有一个weibo成员),返回所有的对象组成的数组
  17.     NSMutableArray *_msgFrames;
  18. }
  19. @end
  20.  
  21. @implementation BeyondViewController
  22.  
  23.  
  24.  
  25.  
  26.  
  27. - (void)viewDidLoad
  28. {
  29.     [super viewDidLoad];
  30.     // 初始化 对象数组
  31.     _msgFrames = [NSMutableArray array];
  32. }
  33.  
  34. #pragma mark - UITextField代理,发送请求
  35. - (BOOL)textFieldShouldReturn:(UITextField *)textField
  36. {
  37.     
  38.     if (textField.text.length == 0){
  39.         return NO;
  40.     }
  41.     
  42.     
  43.  
  44.     BeyondCellFrame *frame = [[BeyondCellFrame alloc]init];
  45.     // ***********设置的WeiboFrames的成员weibo的同时,进行了复杂的计算,并填充了WeiboFrames各个frame成员
  46.     frame.msg = [Msg msgWithName:@"jackey" content:textField.text recordFilePath:@"NoRecord"];
  47.     // 添加到对象数组
  48.     [_msgFrames addObject:frame];
  49.     [self.tableView reloadData];
  50.     return YES;
  51. }
  52.  
  53. #pragma mark - UITableView代理方法
  54. - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
  55. {
  56.     //去除cell间隔线
  57.     tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
  58.     
  59.     // 返回对象数组的长度
  60.     return _msgFrames.count;
  61. }
  62. // 生成自定义的cell,并传递cellFrame给它,设置好后,返回cell
  63. - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
  64. {
  65.     // 1,从池中取
  66.     BeyondCell *cell = [tableView dequeueReusableCellWithIdentifier:[BeyondCell cellID]];
  67.     // 2,取不到的时候,创建一个纯洁的WeiboCell
  68.     if (cell == nil) {
  69.         cell = [[BeyondCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:[BeyondCell cellID]];
  70.     }
  71.     // 3,设置独一无二的数据
  72.     BeyondCellFrame *frame = [_msgFrames objectAtIndex:indexPath.row];
  73.     cell = [cell cellWithCellFrame:frame];
  74.     return cell;
  75. }
  76. // cellFrame对象数组有每一行的行高,其内部已经计算好了
  77. - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
  78. {
  79.     
  80.     // cellFrame的成员有:Msg数据模型对象,以及根据数据模型计算出来的所有的frames,以及最大的Y即对应数据模型的行高
  81.     BeyondCellFrame *frame = [_msgFrames objectAtIndex:indexPath.row];
  82.     return frame.maxY;
  83. }
  84.  
  85. // 恢复view全屏,并且让键盘退出
  86. - (void)exitKeyboard
  87. {
  88.     [UIView animateWithDuration:0.2 animations:^{
  89.         self.view.frame = CGRectMake(0, 0, self.view.frame.size.width, [[UIScreen mainScreen]bounds].size.height);
  90.         
  91.     }completion:^(BOOL finished){}];
  92.     [_chatInput resignFirstResponder];
  93. }
  94. // 滚至表格最后一行
  95. - (void)scrollToLastCell;
  96. {
  97.     if (_msgFrames.count >1) {
  98.         [self.chatTableView scrollToRowAtIndexPath:[NSIndexPath indexPathForRow:_msgFrames.count-1 inSection:0] atScrollPosition:UITableViewScrollPositionBottom animated:YES];
  99.     }
  100. }









声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/652286
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号