iOS开发-聊天气泡的绘制和聊天消息列表

iOS开发中什么最重要？流媒体？即时通讯？还是其他什么技术？其实都不是，最重要的东西诚然只是iOS的基础，比如画一个按钮，封装一个控件，扩展一个类等等。这些东西看似简单，实则很难，所有的技术都基于这些最基础的东西，今天要说的是聊天气泡的绘制，和做一个简单的聊天列表：

这里绘制了三种聊天气泡：

1.自定义聊天气泡

绘制方法如下：

//右边气泡
#import "ChatBaseRight.h"

#define k_width self.bounds.size.width
#define k_height self.bounds.size.height
#define k_radius 5
@implementation ChatBaseRight

- (void)drawRect:(CGRect)rect {
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetFillColorWithColor(context, [UIColor colorWithRed:0.64f green:0.90f blue:0.39f alpha:1.00f].CGColor);

    CGContextMoveToPoint(context, k_radius, k_height);
    CGContextAddArcToPoint(context, 0, k_height, 0, k_height - k_radius, k_radius); //左下
    CGContextAddArcToPoint(context, 0, 0, k_radius, 0, k_radius); //左上
    CGContextAddArcToPoint(context, k_width - k_radius * 2, 0, k_width - k_radius * 2, k_radius, k_radius); //右上
    CGContextAddArcToPoint(context, k_width - k_radius * 2, k_height, k_width, k_height, k_radius * 2); //右下

    CGContextClosePath(context);
    CGContextDrawPath(context, kCGPathFill);
}

@end

//左边气泡
#import "ChatBaseLeft.h"

#define k_width self.bounds.size.width
#define k_height self.bounds.size.height
#define k_radius 5
@implementation ChatBaseLeft

- (void)drawRect:(CGRect)rect {
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetFillColorWithColor(context, [UIColor colorWithRed:0.64f green:0.90f blue:0.39f alpha:1.00f].CGColor);

    CGContextMoveToPoint(context, 0, k_height);
    CGContextAddArcToPoint(context, k_radius * 2, k_height, k_radius * 2, k_height - k_radius * 2, k_radius * 2); //左下
    CGContextAddArcToPoint(context, k_radius * 2, 0, k_radius * 3, 0, k_radius); //左上
    CGContextAddArcToPoint(context, k_width, 0, k_width, k_radius, k_radius); //右上
    CGContextAddArcToPoint(context, k_width, k_height, k_width - k_radius, k_height, k_radius); //右下

    CGContextClosePath(context);
    CGContextDrawPath(context, kCGPathFill);
}

@end

2.仿微信聊天气泡

绘制方法如下：

//右边气派
#import "ChatWXRight.h"

#define k_width self.bounds.size.width
#define k_height self.bounds.size.height
#define k_radius 5

@implementation ChatWXRight

- (void)drawRect:(CGRect)rect {
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetFillColorWithColor(context, [UIColor colorWithRed:0.64f green:0.90f blue:0.39f alpha:1.00f].CGColor);
    
    CGContextMoveToPoint(context, 4, k_height);
    CGContextAddArcToPoint(context, 0, k_height, 0, k_height - k_radius, k_radius); //左下
    CGContextAddArcToPoint(context, 0, 0, k_radius, 0, k_radius); //左上
    CGContextAddArcToPoint(context, k_width - k_radius, 0, k_width - k_radius, k_radius, k_radius); //右上
    CGContextAddLineToPoint(context, k_width - k_radius, 15);
    CGContextAddLineToPoint(context, k_width, 20);
    CGContextAddLineToPoint(context, k_width - k_radius, 25);
    CGContextAddArcToPoint(context, k_width - k_radius, k_height, k_width - k_radius * 2, k_height, k_radius); //右下
    
    CGContextClosePath(context);
    CGContextDrawPath(context, kCGPathFill);
}

@end

//左边气泡
#import "ChatWXLeft.h"

#define k_width self.bounds.size.width
#define k_height self.bounds.size.height
#define k_radius 5

@implementation ChatWXLeft

- (void)drawRect:(CGRect)rect {
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetFillColorWithColor(context, [UIColor colorWithRed:0.64f green:0.90f blue:0.39f alpha:1.00f].CGColor);
    
    CGContextMoveToPoint(context, k_radius * 2, k_height);
    CGContextAddArcToPoint(context, k_radius, k_height, k_radius, k_height - k_radius, k_radius); //左下
    CGContextAddLineToPoint(context, k_radius, 25);
    CGContextAddLineToPoint(context, 0, 20);
    CGContextAddLineToPoint(context, k_radius, 15);
    CGContextAddArcToPoint(context, k_radius, 0, k_radius * 2, 0, k_radius); //左上
    CGContextAddArcToPoint(context, k_width, 0, k_width, k_radius, k_radius); //右上
    CGContextAddArcToPoint(context, k_width, k_height, k_width - k_radius, k_height, k_radius); //右下
    
    CGContextClosePath(context);
    CGContextDrawPath(context, kCGPathFill);
}

@end

3.因为上面绘制的两种气泡都存在问题，就是容易被拉伸，导致那个小尾巴变形，所以把小尾巴和气泡分开画。
绘制气泡：

#import "ChartCommon.h"

#define k_width self.bounds.size.width
#define k_height self.bounds.size.height
#define k_radius 5

@implementation ChartCommon

- (void)drawRect:(CGRect)rect {
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetFillColorWithColor(context, [UIColor colorWithRed:0.64f green:0.90f blue:0.39f alpha:1.00f].CGColor);
    
    CGContextMoveToPoint(context, 4, k_height);
    CGContextAddArcToPoint(context, 0, k_height, 0, k_height - k_radius, k_radius); //左下
    CGContextAddArcToPoint(context, 0, 0, k_radius, 0, k_radius); //左上
    CGContextAddArcToPoint(context, k_width, 0, k_width, k_radius, k_radius); //右上
    CGContextAddArcToPoint(context, k_width, k_height, k_width - k_radius, k_height, k_radius); //右下
    
    CGContextClosePath(context);
    CGContextDrawPath(context, kCGPathFill);
}

@end

绘制气泡小尾巴：

//左边小尾巴
#import "ChatTailLeft.h"

#define k_width self.bounds.size.width
#define k_height self.bounds.size.height
#define k_radius 5

@implementation ChatTailLeft

- (void)drawRect:(CGRect)rect {
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetFillColorWithColor(context, [UIColor colorWithRed:0.64f green:0.90f blue:0.39f alpha:1.00f].CGColor);
    
    CGContextMoveToPoint(context, k_width, k_height / 2 - k_radius);
    CGContextAddLineToPoint(context, 0, k_height / 2);
    CGContextAddLineToPoint(context, k_width, k_height / 2 + k_radius);
    CGContextClosePath(context);
    CGContextDrawPath(context, kCGPathFill);
}

@end

//右边小尾巴
#import "ChatTailRight.h"

#define k_width self.bounds.size.width
#define k_height self.bounds.size.height
#define k_radius 5

@implementation ChatTailRight

- (void)drawRect:(CGRect)rect {
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetFillColorWithColor(context, [UIColor colorWithRed:0.64f green:0.90f blue:0.39f alpha:1.00f].CGColor);
    
    CGContextMoveToPoint(context, 0, k_height / 2 - k_radius);
    CGContextAddLineToPoint(context, k_width, k_height / 2);
    CGContextAddLineToPoint(context, 0, k_height / 2 + k_radius);
    CGContextClosePath(context);
    CGContextDrawPath(context, kCGPathFill);
}

@end

这是三种聊天气泡，然后有人说为什么不用图片？对，图片可以拉伸指定区域来避免失真是个好方法，不过这里我们说的是基础嘛，自己画着玩。从性能角度讲，虽然图片简单，但是图片太多会耗费大量的内存，不过这种情况应该不会出现，都是重用的，为什么要绘制呢？绘制出来的东西也是重用的，很多地方我们为了增加流畅度都会采用绘制的方式来提高性能，避免离屏渲染，所以性能方面博主没做比较，但鹿死谁手还未可知，如果要用就用第三种方法来处理。

想要学习的可以查看博主Demo，下载地址：点击前往下载