你的位置:首页 > 操作系统

[操作系统]QQ聊天界面的布局和设计(IOS篇)


  • 我写的源文件整个工程会再第二季中发上来~,存在百度网盘, 感兴趣的童鞋, 可以关注我的博客更新,到时自己去下载~。喵~~~

    QQChat Layout - 第一季

    一、准备工作

  • 1.将假数据messages.plist和icon图片文件导入工程中。

  • 2.创建相应的数据模型message, 保持数据模型的属性名和plist中的一样。为message类提供便利构造器。(由于与plist的名字保持一致,所以我们使用KVC技术来初始化数据模型, 其会去找和字典中同名的属性自动赋值)。
#import <UIKit/UIKit.h>typedef enum {  MessageWhoIsMe,  MessageWHoIsAnother}MessageWho;@interface Message : NSObject@property (nonatomic, strong) NSString * text;@property (nonatomic, strong) NSString * time;@property (nonatomic, assign) MessageWho type;@property (nonatomic, assign) CGFloat height;+ (instancetype)messageWithDict:(NSDictionary *)dict;@end
  • 3.在SB中的ViewController中,拖入UITableView与UIView控件,并将TableView的cell数目设置为1, UIView用来作QQ的菜单.先给起加上约束, 高44, 距离父控件底部、左边、右边分别为0,0,0.然后设置UITableView的底部距离QQ的菜单栏为0, 左、右、上距离父控件为0, 这样就得到了QQ的聊天界面的大体框架。

二、UI框架搭建

  • 观察:如上图,通过观察, 我们可以知道QQ的每一行聊天消息, 其实就是一行的UITableViewCell对象, 也就说聊天框本质上可以看成是一个UITableView。所以我们只要能做出对应的cell对象,那么就能完成这个界面,问题是这个cell是不等高的, 这是这个布局的难点之一。至于怎么解决, 请直接看我项目中的分析。现在我们把重点方法对cell的设计上。很显然,这个cell肯定要由我们来自定义,自定义cell有多种方法, 我们选择storyBoard的方法来自定义。
  • 分析:一条消息中最多有时间、消息头像、消息内容这三个元素。所以我们直接给cell中拖入一个用于显示时间的UILabel、一个用于显示内容的UIButton、因为内容有背景,所以用UIButton是比较合适的,还有用于显示头像的UIImageView.然后设置约束。下图为完成了cell的布局和约束设置。

  • 细节:

    1.创建一个MessageCell让其继承自UITableViewCell,然后将SB中的cell类型改为MessageCell的类型,如下图, (这样做是为了让创建出来的cell就是MessageCell对象)。

    2.用拖线的功能快速在MessageCell类中将SB中的cell的各个控件和MessageCell中的属性关联起来。

三、开发

  • 喵喵~~~~~,好鸟.所有准备工作都做好了。接下去要开始编码了, 啥?这就好了。是滴,接下去可要认真听我分析鸟, 交你为什么要这么写代码。大神请绕道~。

  • 第一步:因为我们使用的是假数据,也就是plist文件中的数据进行模拟。所以我们省略掉从网络中获取数据这一步。我们只需要把plist的数据先加载进来就好了。那么怎么加载数据呢,为了提高程序的效率,我们使用懒加载了加载数据, 也就是在要用到数据的地方, 数据才会自动加载并缓存起来。喵~~~,好像很神奇的样子,吓得我都做地上了。

@interface ViewController () <UITableViewDataSource, UITableViewDelegate>@property (weak, nonatomic) IBOutlet UITableView *tableView;/** * 存放所有对话的缓存数组 */@property (nonatomic, strong) NSArray * messages;@end
// 懒加载- (NSArray *)messages {  if (_messages == nil) {    NSString * path = [[NSBundle mainBundle] pathForResource:@"messages" ofType:@"plist"];    NSArray * dictArray = [NSArray arrayWithContentsOfFile: path];    NSMutableArray * messages = [NSMutableArray array];    for (NSDictionary * dict in dictArray) {      Message * message = [Message messageWithDict: dict];      [messages addObject: message];    }    _messages = messages;  }  return _messages;}
  • 第二步:实现数据源方法,告诉tableView有多少行的数据,有多少行数据就有多少个数据模型, 所以我们返回数据模型的个数, 而不是写死了代码, 这样当聊天数目增加或者减少的时候,我们无需在改变numberOfRowsInSection方法, 只需要增加或删除模型数据就可以。也就是
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {  return self.messages.count;}
  • 第三步:实现数据源方法的cellForRowAtPath:与代理对象的,heightForRowAtPath方法。我们必须作到的一点就是通过数据模型去驱动视图,通过改变数据来控制视图的变化,而中间的控制器着作为这个变化所对应逻辑传递桥梁。这就是所谓的MVC模型。这样职责分明,逻辑与数据分离开来,代码的耦合程度大大降低。但是有个问题是heightForRowAtPath一般是先于cellForRowAtPath调用, 这时候cell还没创建, 也就是所这时候数据模型还没通过控制器传递给cell对象进行数据的展示,那么这时候就没法获取正确的高度。所以我们得想办法让这两个方法反过来执行。幸运的是Apple为我们提供了一个属性,estimatedRowHeight,我们只需统一的设置预估属性的大小,或者是为每一行(也就是每个cell)设置预估计的cell高度, 那么就会先调用cellForRowAtPath进行cell对象的创建,并且使用预估计的高度创建初始化的cell,但是当要显示到界面上时候,还会再调用heightForRowAtPath.为了方便, 我直接使用的是提供统一的预估算高度,然后实现这两个方法,如下代码。
- (void)viewDidLoad {  [super viewDidLoad];  self.tableView.estimatedRowHeight = 120;  // Do any additional setup after loading the view, typically from a nib.}- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {  static NSString * ID = @"messageCell";  MessageCellTableViewCell * cell = [self.tableView dequeueReusableCellWithIdentifier:ID];  cell.message = self.messages[indexPath.row];  return cell;}- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {  return ((Message *)self.messages[indexPath.row]).height;}
  • 第四步:驱动开发, 继续完善。我采用的开发方式是类似于测试驱动开发的方式, 先写出想要达到的效果, 然后在围绕的这个效果进行开发。如上代码,cell.message = self.messages[indexPath.row];。我想实现的是将数据模型直接传递给cell对象,应为我们没必要将view层的东西暴露在controller层中,view层的东西都是和数据相关的, 这样我们就能做到逻辑和数据的分离,好处是,打个比方,如果你项目中有10几个controller也需要用到这个cell,那么他们就要重复的在controller中写10多行的操作数据的操作,这是不明智的,也是不好的封装,所以我们应该将这些代码封装进cell对象所属于的类中,cell的事情,cell自己去处理.这样封装,controller就不必关心cell如何处理这些数据,只需要将数据交给cell处理就行。于是我们现在就可以来到UIMessageCell类中,给其加上Message类的message属性,并且重写setter,再setter中,我们需要做3件事情,第一件事情保留message对,第二件事情是进行控件上数据的展示,第三件事是在数据填充完后计算cell的高度,并将其更行到数据模型上。(计算高度的时候我们需要两次使用layoutIfNeeded来强制布局,具体原因看下面注释)
@implementation MessageCellTableViewCell// 取得对应头像的图片名- (NSString *)getPicture:(MessageWho)who {  return who == MessageWhoIsMe? @"me" : @"other";}- (void)setMessage:(Message *)message {  // 1.给控件装数据  _message = message;  _icon.image = [UIImage imageNamed:[self getPicture: message.type]];  [_text setTitle:message.text forState:UIControlStateNormal];  _timeLabel.text = message.time;  // 2.装完数据强制布局, 使得设置按钮高度的值准确, 并且更新约束  [_text layoutIfNeeded];  // 要先强制布局, 这时候更新约束才准确  // 更新约束, 使得按钮的高度此时等于文本的高度。  /*    When creating a custom button—that is a button with the type UIButtonTypeCustom—the frame of the button is set to (0, 0, 0, 0) initially. Before adding the button to your interface, you should update the frame to a more appropriate value.    当按钮是custom样式的时候, 其frmae的值都是零。    按钮里面的label默认是不自动换行的。   */  [_text updateConstraints:^(MASConstraintMaker *make) {    CGFloat textH = CGRectGetHeight(_text.titleLabel.frame);    make.height.equalTo(textH);  }];  // 3.再次强制布局, 使得约束生效, 这样获取到的按钮高度才准确  [_text layoutIfNeeded];  CGFloat textH = CGRectGetMaxY(_text.frame);  CGFloat iconH = CGRectGetMaxY(_icon.frame);  CGFloat cellH = MAX(textH, iconH) + 10;  // 4.更新cell的高度到模型中  _message.height = cellH;}- (void)awakeFromNib {  // 设置自动换行  _text.titleLabel.numberOfLines = 0;}- (void)setSelected:(BOOL)selected animated:(BOOL)animated {  [super setSelected:selected animated:animated];  // Configure the view for the selected state}
  • 其它的小细节,如果有疑问可以给我留言、大家相互讨论。如有不足还请指教。请继续关注我的博客,会继续完善和介绍如何做成这个QQ聊天界面。后续如果有足够的时间会加上网络功能~~~。
  • 第一季的效果如下,敬请期待第二季的完善QQ的对话背景、实现模拟的双人对话效果~。
  • 我写的源文件会再第二季中发上来~,存在百度网盘, 感兴趣的童鞋, 可以关注我的博客更新,到时自己去下载~。喵~~~