2. 程式人生 > >iOS開發-聊天氣泡的繪製和聊天訊息列表

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，下載地址：點選前往下載

相關推薦

iOS開發-聊天氣泡的繪製和聊天訊息列表

iOS開發中什麼最重要？流媒體？即時通訊？還是其他什麼技術？其實都不是，最重要的東西誠然只是iOS的基礎，比如畫一個按鈕，封裝一個控制元件，擴充套件一個類等等。這些東西看似簡單，實則很難，所有的技術都基於這些最基礎的東西，今天要說的是聊天氣泡的繪製，和做一個簡單

「iOS開發」關於一對一視訊聊天直播系統技術（二）處理

針對視訊直播的實時流網路 LiveNet 和完整的直播雲解決方案，很多開發者對這個網路和解決方案的細節和使用場景非常感興趣。 結合實時流網路 LiveNet 和直播雲解決方案的實踐，我們將用一系列文章，更系統化地介紹當下大熱的視訊直播各環節的關鍵技術，幫助視訊直播創業者們更全面、深入地瞭解視訊直播技術，更好

iOS開發：字典(NSDictionary)和陣列( NSArray)轉換成字串

概述： 在專案開發中，總是與伺服器進行著介面的互動，傳參是不可缺少的一部分。後臺返回的j son資料我們可以很好的解析使用，但是我們如何向後臺傳送j son資料的引數呢？要知道，一般伺服器是不允許傳物件的。以下是在專案中遇到的實際問題，在此總結一下，供大家交流。 一. 字典轉字串：

iOS開發優秀部落格和軟體推薦

iOSBlogAndTools iOS開發優秀部落格和軟體推薦 本部落格和工具列表由廣大iOS開發者收集和推薦，如果大家有好的部落格或者工具想要分享請點選：我要提交。 收到大家的提交後會及時收錄與更新。 GitHub地址：https://github.com/imlifengfeng/i

iOS開發tableView的tableHeaderView和代理中viewForHeaderInSection的區別

混淆的概念 tableView.tableHeaderView  - (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section 之前在tableVie

iOS開發之給navigationbar和view設定同一張圖片

###### 效果一: 今天因為這個小東西被吐槽了...但還是決定記錄一下... 其實說是給navigationbar和view設定同一張圖片是不對的,應該是隱藏navigationbar,再去掉statusbar的背景色,新增view 最開始

iOS開發中使用OC和swift的對比

背景： 為了更好地學習，本人決定將學習的swift和OC進行下對比。 對比： 1.import的類 OC：某個只要要使用某個類就要將該類import。 swift：如果是使用者自己建立類，其他類無需import可以直接使用。pod的一些三方類和系統的

iOS開發中實現OC和Swift的混編

背景： 最近又開始看了一些關於Swift的視訊、部落格、書，發現swift相對於OC使用起來更簡潔了，於是就想在原有專案中引入swift。原有的專案都是使用OC寫的，既然要在原有專案中引入swift檔案首先就要實現OC和swift的混編設定。 混編設定：

Sagit.Framework For IOS 開發框架入門教程5：訊息彈窗STMsgBox

前言： 昨天剛寫了一篇IT連創業的文章：IT連創業系列：產品設計之答題模組，（歡迎大夥關注！） 感覺好久沒寫IOS的文章了，今天趁機，來補一篇，Sagit的教程。 今天主要是分享訊息彈窗功能，即STMsgBox的用法： STMsgBox為彈窗相關的功能的原始碼。 1､對外API功能呼叫說明：

iOS開發之32位和64位系統

參考網址：http://blog.csdn.net/sakulafly/article/details/41089411 在蘋果推出iPhone5S時，64位的應用就走到了眼前。當時就看見蘋果官方資料宣佈iOS7.x的SDK支援了64位的應用，而且內建的應用都已經是64

iOS開發--CocoaPods的安裝和使用說明

一、概要 二、安裝 由於網上的教程基本都大同小異，但細節之處還不是很完善，所以藉機會在這裡補充下： 注：要使用CocoaPods，那就要下載安裝它，而下載安裝CocoaPods需要Ruby環境 1、Ruby環境搭建 當前安裝環境為Mac mini 10.1

iOS開發 給view繪製虛線邊框

給view繪製虛線邊框 - (void)layoutBorderToLayer:(UIView *)view { CAShapeLayer *border = [CAShapeLayer la

iOS開發 獲取公網IP和區域網IP地址

//獲取公網IP非區域網IP 直接訪問此網址 NSString *url = @"http://ip.taobao.com/service/getIpInfo.php?ip=myip"; 網址返回的J

iOS開發利器-CocoaPods安裝和使用教程

開發iOS專案時肯定會用到許多第三方專案,比如說：ASIHttprequest,JSONKit等等，一些類庫可能又關聯著其他類庫，如果超過一定的數量，手動去下載這些類庫難免會有一些麻煩，並且還要去配置引數，等到類庫更新的時候，我們還得重新下載一份，這些沒有技術含量的活有

IOS開發之 ---- 振動強度和時間(私有api)

void AudioServicesStopSystemSound(int); void AudioServicesPlaySystemSoundWithVibration(int, id, NSDictionary *); 3.呼叫  NSMutableDictionary* dict = [N

提高iOS開發效率的方法和工具

介紹 這篇文章主要是介紹一下在iOS開發中使用到的一些可以提升開發效率的方法和工具。 IDE 首先要說的肯定是IDE了，說到IDE，Xcode不能跑，當然你也可能同時在使用AppCode等其他的IDE，在這裡主要介紹Xcode中提升開發效率的方法。

ios 開發中的日期和時間處理（轉）

NSDate儲存的是世界標準時(UTC)，輸出時需要根據時區轉換為本地時間 Dates         NSDate類提供了建立date，比較date以及計算兩個date之間間隔的功能。Date物件是不可改變的。         如果你要建立date物件並表示當前日期，你可以alloc一個NSDate物件並

iOS 開發一些常用外掛和第三方庫的整理

一：第三方外掛 1:基於響應式程式設計思想的oc 地址：https://github.com/ReactiveCocoa/ReactiveCocoa 2：hud提示框 地址：https://github.com/jdg/MBProgressHUD 3：XML/H

ios 開發 UIButton 新增圓角和陰影

CALayer *layer = [CALayerlayer];    layer.frame = CGRectMake(0,0 , 0.7*WIDTH, 40);    layer.backgroun

iOS開發中的UDID和UUID詳解

      今天突然想和大家聊聊UDID和UUID的問題，雖然平時我們對這兩個東西很忽視，往往也很難區分這兩個東西。今天就來好好談談。【UDID】       UDID的全名為 Unique Device Identifier :裝置唯一識別符號。從名稱上也可以看出，UDID