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，下载地址：点击前往下载
