iOS開發-聊天氣泡的繪製和聊天訊息列表
阿新 • • 發佈:2018-12-16
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,下載地址:點選前往下載