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