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

人已赞赏
iOS文章

iOS开发多Target项目如何优雅的使用pods

2021-2-2 4:54:55

iOS文章

iOS开发导航栏标题动画

2021-2-2 5:37:31

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索