有奖捉虫:云通信与企业服务文档专题,速来> HOT
TUIKit 从 5.7.1435 版本开始支持模块化集成,您可以根据自己的需求集成所需模块。 TUIKit 从 6.9.3557 版本开始新增了全新的简约版 UI 组件,之前版本 UI 组件依旧保留,我们称之为经典版 UI 组件,您可以根据需求自由选择经典版或简约版 UI 组件。如果您还不了解各个界面库的功能,可以查阅文档 TUIKit 界面库介绍
下文将介绍如何集成 TUIKit 组件。

开发环境要求

Xcode 10 及以上
iOS 9.0 及以上

CocoaPods 集成

1. 安装 CocoaPods。 在终端窗口中输入如下命令(需要提前在 Mac 中安装 Ruby 环境):
sudo gem install cocoapods
2. 创建 Podfile 文件。 进入项目所在路径输入以下命令行,之后项目路径下会出现一个 Podfile 文件。
pod init
3. 根据业务需求在 Podfile 中添加对应的 TUIKit 组件之间相互独立,添加或删除均不影响工程编译。
提供了两种 Podfile集成方式, Pods集成(方式一)和 DevelopPods本地集成(方式二)。
说明:
Pods 集成(方式一) 适合无源码修改时的集成:
优点是: 当 TUIKit 有版本更新时您只需再次 Pod update 即可完成更新。
缺点是: 当您有源码修改时,使用 Pod update 更新时,新版本的 TUIKit 会覆盖您的修改。
DevelopPods 本地集成(方式二) 适合有涉及源码自定义修改的客户:
优点是: 当您有自己的 git 仓库时,可以跟踪修改,并且修改源码后,使用 Pod update 更新(其他非本地集成 Pod)时,不会覆盖您的修改。
缺点是: 您需要手动从 TUIKit 源码 覆盖您本地 TUIKit 文件夹进行更新。

方式1:拉取远程 CocoaPods 集成(无源码修改时推荐)

经典版
简约版
# Uncomment the next line to define a global platform for your project
# ...

# 防止 TUIKit 组件里的 *.xcassets 与您项目里面冲突。
install! 'cocoapods', :disable_input_output_paths => true

# 请使用您的真实项目名称替换 your_project_name
target 'your_project_name' do
# 从 7.1 版本开始,新增了 TUIKit 插件(TUIXXXPlugin),TUIKit 插件是动态库依赖,需要开启此设置。
# 如果您不依赖 TUIKit 插件,该设置可以保持关闭。
use_frameworks!
# 请按需开启 modular headers,开启后 Pod 模块才能使用 @import 导入,简化 Swift 引用 OC 的方式。
# use_modular_headers!

# 集成聊天功能
pod 'TUIChat/UI_Classic'
# 集成会话功能
pod 'TUIConversation/UI_Classic'
# 集成关系链功能
pod 'TUIContact/UI_Classic'
# 集成群组功能
pod 'TUIGroup/UI_Classic'
# 集成搜索功能(需要购买旗舰版套餐)
pod 'TUISearch/UI_Classic'
# 集成音视频通话功能
pod 'TUICallKit'
# 集成快速会议
pod 'TUIRoomKit'
# 集成投票插件,从 7.1 版本开始支持
pod 'TUIPollPlugin'
# 集成群接龙插件,从 7.1 版本开始支持
pod 'TUIGroupNotePlugin'
# 集成翻译插件,从 7.2 版本开始支持(需开通增值功能,请联系腾讯云商务开通)
pod 'TUITranslationPlugin'
# 集成会话分组插件,从 7.3 版本开始支持
pod 'TUIConversationGroupPlugin'
# 集成会话标记插件,从 7.3 版本开始支持
pod 'TUIConversationMarkPlugin'
# 集成语音转文字插件,从 7.5 版本开始支持
pod 'TUIVoiceToTextPlugin'
# 集成客服插件,从 7.6 版本开始支持
pod 'TUICustomerServicePlugin'
# 集成机器人插件,从 7.7 版本开始支持
pod 'TUIChatBotPlugin'
# 集成消息推送插件,从 7.6 版本开始支持
pod 'TIMPush'
end
# Uncomment the next line to define a global platform for your project
# ...

# 防止 TUIKit 组件里的 *.xcassets 与您项目里面冲突。
install! 'cocoapods', :disable_input_output_paths => true

# 请使用您的真实项目名称替换 your_project_name
target 'your_project_name' do
use_frameworks!

# 开启 modular headers。请按需开启,开启后 Pod 模块才能使用 @import 导入。
# use_modular_headers!

# 集成聊天功能
pod 'TUIChat/UI_Minimalist'
# 集成会话功能
pod 'TUIConversation/UI_Minimalist'
# 集成关系链功能
pod 'TUIContact/UI_Minimalist'
# 集成群组功能
pod 'TUIGroup/UI_Minimalist'
# 集成搜索功能(需要购买旗舰版套餐)
pod 'TUISearch/UI_Minimalist'
# 集成离线推送
pod 'TUIOfflinePush'
# 集成音视频通话功能
pod 'TUICallKit'
# 集成翻译插件,从 7.2 版本开始支持(需开通增值功能,请联系腾讯云商务开通)
pod 'TUITranslationPlugin'

end
说明
1. 如果您直接 pod 'TUIChat',不指定经典版或简约版,默认会集成两套版本 UI 组件。
2. 经典版和简约版 UI 不能混用,集成多个组件时,您必须同时全部选择经典版 UI 或简约版 UI。例如,经典版 TUIChat 组件必须与经典版 TUIConversation、TUIContact、TUIGroup组件搭配使用。同理,简约版 TUIChat 组件必须与简约版 TUIConversation、TUIContact、TUIGroup 组件搭配使用。
3. 如果您使用的是 Swift,请开启 use_modular_headers! ,并将头文件引用改成 @import 模块名形式引用。
4. 执行以下命令,安装 TUIKit 组件。
pod install
如果无法安装 TUIKit 最新版本,执行以下命令更新本地的 CocoaPods 仓库列表。
pod repo update
之后执行以下命令,更新组件库的Pod版本。
pod update
集成全部的 TUIKit 组件后的项目结构:


方式2:DevelopPods源码集成(有源码修改时推荐)

1. 从 GitHub 下载 TUIKit 源码。直接拖入您的工程目录下: TIMSDK/iOS/TUIKit。



2. 修改您Podfile中每个组件的本地路径, 路径修改为TUIKit文件夹相对您工程Podfile文件的路径。
如 Demo中的 pod 'TUICore', :path => "../TUIKit/TUICore"
说明: 示例图片中的TUIKit文件夹位于 Podfile的 上一层级(父目录),此时 我们使用 pod 'TUICore', :path => "../TUIKit/TUICore"
---------------------------------------------------------------------------------------
其他相对路径的表示如下:
父目录: pod 'TUICore', :path => "../TUIKit/TUICore"
当前目录: pod 'TUICore', :path => "/TUIKit/TUICore"
子目录: pod 'TUICore', :path => "./TUIKit/TUICore"
3. Pod update
DevelopPodfile
# Uncomment the next line to define a global platform for your project
source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '13.0'
install! 'cocoapods', :disable_input_output_paths => true

target 'TUIKitDemo' do
# Uncomment the next line if you're using Swift or would like to use dynamic frameworks
use_frameworks!
use_modular_headers!

# 注意:使用本地集成方案时,如需升级时需要从
# https://github.com/TencentCloud/TIMSDK/tree/master/iOS/TUIKit
# 获取最新的组件代码,放置在本地指定目录下如/TIMSDK/ios/TUIKit/TUICore
# 注意:当私有化修改和远端有冲突时,需要手动合并,处理冲突。
pod 'TUICore', :path => "../TUIKit/TUICore"
pod 'TIMCommon', :path => "../TUIKit/TIMCommon"
pod 'TUIChat', :path => "../TUIKit/TUIChat"
pod 'TUIConversation', :path => "../TUIKit/TUIConversation"
pod 'TUIContact', :path => "../TUIKit/TUIContact"
pod 'TUIGroup', :path => "../TUIKit/TUIGroup"
pod 'TUISearch', :path => "../TUIKit/TUISearch"
# 注意: TUIKit插件需要跟随TUICore的版本
# 需要确保插件版本和"../TUIKit/TUICore/TUICore.spec"中的spec.version一致
pod 'TUIPollPlugin', '7.6.5011'
pod 'TUIGroupNotePlugin', '7.6.5011'
pod 'TUITranslationPlugin', '7.6.5011'
pod 'TUIConversationGroupPlugin', '7.6.5011'
pod 'TUIConversationMarkPlugin', '7.6.5011'
pod 'TIMPush', '7.6.5011'
# 其他 Pod
pod 'TUICallKit'
pod 'TUIRoomKit'
pod 'MJRefresh'
pod 'Masonry'
end
注意:
使用本地集成方案时,如需升级时需要从 https://github.com/TencentCloud/TIMSDK/tree/master/iOS/TUIKit 。
获取最新的组件代码,覆盖本地目录如:TIMSDK/iOS/TUIKit。
注意:当私有化修改和远端有冲突时,需要手动合并,处理冲突。
注意:TUIKit插件需要依赖TUICore的版本 务必确保插件版本和"../TUIKit/TUICore/TUICore.spec"中的spec.version一致

快速搭建

常用的聊天软件都是由会话列表、聊天窗口、好友列表、音视频通话等几个基本的界面组成,参考下面步骤,您仅需几行代码即可在项目中快速搭建这些 UI 界面。
说明
关于 TUIKit 组件模块功能:
实操教学视频请参见:极速集成 TUIKit(iOS)
如果想了解更多,您还可以 下载并运行 TUIKitDemo 源码,内含常见功能示例。

步骤1:组件登录

登录组件后才能正常使用组件的功能。用户在 App 上点击登录时,您可以登录 TUIKit 组件。 SDKAppID 需要在 即时通信 IM 控制台 创建并获取,userSig 需要按规则计算,详细步骤请参考文档 快速入门
示例代码如下所示:
#import "TUILogin.h"

- (void)loginSDK:(NSString *)userID userSig:(NSString *)sig succ:(TSucc)succ fail:(TFail)fail {
[TUILogin login:SDKAppID userID:userID userSig:sig succ:^{
NSLog(@"登录成功");
} fail:^(int code, NSString *msg) {
NSLog(@"登录失败");
}];
}

步骤2:构建会话列表

会话列表只需要创建 TUIConversationListController 对象即可。会话列表会从数据库中读取最近联系人,当用户点击联系人时,TUIConversationListController 将事件 didSelectConversation 回调给上层。
示例代码如下所示:
经典版
简约版
#import "TUIConversationListController.h"

// ConversationController 为您自己的 ViewController
@implementation ConversationController
- (void)viewDidLoad {
[super viewDidLoad];
// TUIConversationListController
TUIConversationListController *vc = [[TUIConversationListController alloc] init];
vc.delegate = self;
// 把 TUIConversationListController 添加到自己的 ViewController
[self addChildViewController:vc];
[self.view addSubview:vc.view];
}

- (void)conversationListController:(TUIConversationListController *)conversationController
didSelectConversation:(TUIConversationCell *)conversation
{
// 会话列表点击事件,通常是打开聊天界面
}
@end
#import "TUIConversationListController_Minimalist.h"

// ConversationController 为您自己的 ViewController
@implementation ConversationController
- (void)viewDidLoad {
[super viewDidLoad];
// TUIConversationListController_Minimalist
TUIConversationListController_Minimalist *vc = [[TUIConversationListController_Minimalist alloc] init];
vc.delegate = self;
// 把 TUIConversationListController_Minimalist 添加到自己的 ViewController
[self addChildViewController:vc];
[self.view addSubview:vc.view];
}

- (void)conversationListController:(TUIConversationListController_Minimalist *)conversationController
didSelectConversation:(TUIConversationCell *)conversation
{
// 会话列表点击事件,通常是打开聊天界面
}
@end

步骤3:构建聊天窗口

初始化聊天界面时,需要上层传入当前聊天界面对应的会话信息。
示例代码如下所示:
经典版
简约版
#import "TUIC2CChatViewController.h"

// ChatViewController 为您自己的 ViewController
@implementation ChatViewController
- (void)viewDidLoad {
// 创建会话信息
TUIChatConversationModel *data = [[TUIChatConversationModel alloc] init];
data.userID = @"userID";
// TUIC2CChatViewController
TUIC2CChatViewController *vc = [[TUIC2CChatViewController alloc] init];
[vc setConversationData:data];
// 把 TUIC2CChatViewController 添加到自己的 ViewController
[self addChildViewController:vc];
[self.view addSubview:vc.view];
}
@end
说明
TUIC2CChatViewController 会自动拉取该用户的历史消息并展示出来。
#import "TUIC2CChatViewController_Minimalist.h"

// ChatViewController 为您自己的 ViewController
@implementation ChatViewController
- (void)viewDidLoad {
// 创建会话信息
TUIChatConversationModel *data = [[TUIChatConversationModel alloc] init];
data.userID = @"userID";
// 创建 TUIC2CChatViewController_Minimalist
TUIC2CChatViewController_Minimalist *vc = [[TUIC2CChatViewController_Minimalist alloc] init];
[vc setConversationData:data];
// 把 TUIC2CChatViewController 添加到自己的 ViewController
[self addChildViewController:vc];
[self.view addSubview:vc.view];
}
@end
说明
TUIC2CChatViewController_Minimalist 会自动拉取该用户的历史消息并展示出来。

步骤4:构建通讯录界面

通讯录界面不需要其它依赖,只需创建对象并显示出来即可。
经典版
简约版
#import "TUIContactController.h"

// ContactController 为您自己的 ViewController
@implementation ContactController
- (void)viewDidLoad {
// 创建 TUIContactController
TUIContactController *vc = [[TUIContactController alloc] init];
// 把 TUIContactController 添加到自己的 ViewController
[self addChildViewController:vc];
[self.view addSubview:vc.view];
}
@end
注意,上面代码只能将 TUIContactController 初始化并展示出来,其中的点击行为(例如点击好友、添加好友等),TUIKit 会通过 TUIContactControllerListener 抛给上层处理:
@protocol TUIContactControllerListener <NSObject>
@optional
- (void)onSelectFriend:(TUICommonContactCell *)cell;
- (void)onAddNewFriend:(TUICommonTableViewCell *)cell;
- (void)onGroupConversation:(TUICommonTableViewCell *)cell;
@end
#import "TUIContactController_Minimalist.h"

// ContactController 为您自己的 ViewController
@implementation ContactController
- (void)viewDidLoad {
// 创建 TUIContactController_Minimalist
TUIContactController_Minimalist *vc = [[TUIContactController_Minimalist alloc] init];
// 把 TUIContactController_Minimalist 添加到自己的 ViewController
[self addChildViewController:vc];
[self.view addSubview:vc.view];
}
@end
注意,上面代码只能将 TUIContactController_Minimalist 初始化并展示出来,其中的点击行为(例如点击好友、添加好友等),TUIKit 会通过 TUIContactControllerListener_Minimalist 抛给上层处理:
@protocol TUIContactControllerListener_Minimalist <NSObject>
@optional
- (void)onSelectFriend:(TUICommonContactCell *)cell;
- (void)onAddNewFriend:(TUICommonTableViewCell *)cell;
- (void)onGroupConversation:(TUICommonTableViewCell *)cell;
@end
例如,单击好友后,您可以将好友信息页展示出来:
经典版
简约版
#import "TUIFriendProfileController.h"

- (void)onSelectFriend:(TUICommonContactCell *)cell
{
TUICommonContactCellData *data = cell.contactData;
// 创建好友资料 vc
TUIFriendProfileController *vc = [[TUIFriendProfileController alloc] init];
vc.friendProfile = data.friendProfile;
// 展示好友资料 vc
[self.navigationController pushViewController:(UIViewController *)vc animated:YES];
}
#import "TUIFriendProfileController_Minimalist.h"

- (void)onSelectFriend:(TUICommonContactCell *)cell
{
TUICommonContactCellData *data = cell.contactData;
// 创建好友资料 vc
TUIFriendProfileController_Minimalist *vc = [[TUIFriendProfileController_Minimalist alloc] init];
vc.friendProfile = data.friendProfile;
// 展示好友资料 vc
[self.navigationController pushViewController:(UIViewController *)vc animated:YES];
}
说明
您可以 下载 TUIKitDemo 源码,查看更多的通讯录事件实现。

步骤5:构建音视频通话功能

TUI 组件支持在聊天界面对用户发起音视频通话,仅需要简单几步就可以快速集成:
视频通话
语音通话






1. 开通音视频服务。
2. 登录 即时通信 IM 控制台 ,单击目标应用卡片,进入应用的基础配置页面。
3. 在开通腾讯实时音视频服务功能区,单击免费体验即可开通 TUICallKit 的 7 天免费试用服务。
4. 在弹出的开通实时音视频 TRTC 服务对话框中,单击确认,系统将为您在 实时音视频控制台 创建一个与当前 IM 应用相同 SDKAppID 的实时音视频应用,二者账号与鉴权可复用。
5. 集成 TUICallKit 组件。 在 podfile 文件中添加以下内容。
// 集成音视频通话组件
pod 'TUICallKit'
6. 发起和接收视频或语音通话。
消息页发起通话
联系人页发起通话






集成 TUICallKit 组件后,聊天界面和联系人资料界面默认会出现 “视频通话” 和 “语音通话” 两个按钮,当用户点击按钮时,TUIKit 会自动展示通话邀请 UI,并给对方发起通话邀请请求。
当用户在线收到通话邀请时,TUIKit 会自动展示通话接收 UI,用户可以选择同意或者拒绝通话。
当用户离线收到通话邀请时,如需唤起 App 通话,就要使用到离线推送能力,离线推送的实现请参见 添加离线推送
7. 添加离线推送。 在使用离线推送之前,您需要开通 IM 离线推送 服务。 关于 App 的配置,您可以参考文档:集成 TUIOfflinePush 跑通离线推送功能
说明
配置完成后,当单击接收到的音视频通话离线推送通知时, TUICallKit 会自动拉起音视频通话邀请界面
8. 附加增值能力 集成 TUIChat 和 TUICallkit 的组件后,在聊天界面发送语音消息时,即可录制带 AI 降噪和自动增益的语音消息。该功能需要购买 音视频通话能力 进阶版及以上套餐,仅 IMSDK 7.0 及以上版本支持。当套餐过期后,录制语音消息会切换到系统 API 进行录音。 下面是使用两台华为 P10同时录制的语音消息对比:


步骤5:构建多人音视频功能

TUI 组件支持在聊天界面对用户发起多人音视频,仅需要简单几步就可以快速集成:



1. 开通音视频服务。
2. 登录 即时通信 IM 控制台,单击目标应用卡片,进入应用的基础配置页面。
3. 找到含 UI 低代码场景方案功能区,单击卡片下方的多人音视频(TUIRoomKit) > 免费体验。
4. 在弹窗中单击免费试用7天,即可成功开通多人音视频免费体验版。开通完成后即可参见 集成指引 进行集成。
5. 集成 TUIRoomKit 组件。在 podfile 文件中添加以下内容。
// 集成多人音视频组件
pod 'TUIRoomKit'
6. 发起多人音视频会议
集成 TUIRoomKit 组件后,聊天界面默认会出现 “快速会议” 按钮,当用户点击按钮时,TUIKit 会自动发起会议,并在聊天记录中展示一条会议邀请卡片。




第三方库依赖

TUIKit 依赖的第三方库的最低版本如下,如果您的版本较低,请升级到最新版本。
- Masonry (1.1.0)
- MJExtension (3.4.1)
- MJRefresh (3.7.5)
- ReactiveObjC (3.1.1)
- SDWebImage (5.15.8):
- SDWebImage/Core (= 5.15.8)
- SDWebImage/Core (5.15.8)
- SnapKit (5.6.0)
- SSZipArchive (2.4.3)

常见问题

TUICallKit 和自己集成的音视频库冲突了?

腾讯云的 音视频库 不能同时集成,可能存在符号冲突,可以按照下面的场景处理。
1. 如果您使用了 TXLiteAVSDK_TRTC 库,不会发生符号冲突。可直接在 Podfile 文件中添加依赖,
pod 'TUICallKit'
2. 如果您使用了 TXLiteAVSDK_Professional 库,会产生符号冲突。您可在 Podfile 文件中添加依赖,
pod 'TUICallKit/Professional'
3. 如果您使用了 TXLiteAVSDK_Enterprise 库,会产生符号冲突。建议升级到 TXLiteAVSDK_Professional 后使用 TUICallKit/Professional

通话邀请的超时时间默认是多久?

通话邀请的默认超时时间是 30 秒。

在邀请超时时间内,被邀请者如果离线再上线,能否立即收到邀请?

如果是单聊通话邀请,被邀请者离线再上线可以收到通话邀请,TUIKit 内部会自动唤起通话邀请界面。
如果是群聊通话邀请,被邀请者离线再上线后会自动拉取最近 30 秒内的邀请,TUIKit 会自动唤起群通话界面。