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 文件夹进行更新。
方式一:拉取远程CocoaPods集成(无源码修改时推荐)
# Uncomment the next line to define a global platform for your project# ...# 防止 TUIKit 组件里的 *.xcassets 与您项目里面冲突。install! 'cocoapods', :disable_input_output_paths => true# 请使用您的真实项目名称替换 your_project_nametarget 'your_project_name' do# 从 7.1 版本开始,TUIKit 组件依赖动态库,需要开启此设置。如果您不升级到 7.1 及以后,可以保持关闭。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 'TUIOfflinePush'# 集成音视频通话功能pod 'TUICallKit'# 集成投票插件,从 7.1 版本开始支持pod 'TUIPollPlugin'# 集成群接龙插件,从 7.1 版本开始支持pod 'TUIGroupNotePlugin'# 集成翻译插件,从 7.2 版本开始支持(需开通增值功能,请联系腾讯云商务开通)pod 'TUITranslationPlugin'# 集成会话分组插件,从 7.3 版本开始支持pod 'TUIConversationGroupPlugin'# 集成会话标记插件,从 7.3 版本开始支持pod 'TUIConversationMarkPlugin'end
# Uncomment the next line to define a global platform for your project# ...# 防止 TUIKit 组件里的 *.xcassets 与您项目里面冲突。install! 'cocoapods', :disable_input_output_paths => true# 请使用您的真实项目名称替换 your_project_nametarget 'your_project_name' do# TUIKit 组件依赖了静态库,需要屏蔽此设置。# 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 组件后的项目结构:
方式二:DevelopPods源码集成(有源码修改时推荐)
1. 从 GitHub 下载 TUIKit 源码。直接拖入您的工程目录下: TIMSDK/iOS/TUIKit


2. 修改您Podfile中每个组件的本地路径, 路径修改为TUIKit文件夹相对您工程Podfile文件的路径
如 Demo中的 pod 'TUICore', :path => "../TUIKit/TUICore"
3. Pod update
# Uncomment the next line to define a global platform for your projectsource 'https://github.com/CocoaPods/Specs.git'platform :ios, '13.0'install! 'cocoapods', :disable_input_output_paths => truetarget 'TUIKitDemo' do# Uncomment the next line if you're using Swift or would like to use dynamic frameworksuse_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"pod 'TUIOfflinePush', :path => "../TUIKit/TUIOfflinePush"# 注意: TUIKit插件需要跟随TUICore的版本# 需要确保插件版本和"../TUIKit/TUICore/TUICore.spec"中的spec.version一致pod 'TUIPollPlugin', '7.4.4643'pod 'TUIGroupNotePlugin', '7.4.4643'pod 'TUITranslationPlugin', '7.4.4643'pod 'TUIConversationGroupPlugin', '7.4.4643'pod 'TUIConversationMarkPlugin', '7.4.4643'# 其他 Podpod '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 界面。
步骤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];// TUIConversationListControllerTUIConversationListController *vc = [[TUIConversationListController alloc] init];vc.delegate = self;// 把 TUIConversationListController 添加到自己的 ViewController[self addChildViewController:vc];[self.view addSubview:vc.view];}- (void)conversationListController:(TUIConversationListController *)conversationControllerdidSelectConversation:(TUIConversationCell *)conversation{// 会话列表点击事件,通常是打开聊天界面}@end
#import "TUIConversationListController_Minimalist.h"// ConversationController 为您自己的 ViewController@implementation ConversationController- (void)viewDidLoad {[super viewDidLoad];// TUIConversationListController_MinimalistTUIConversationListController_Minimalist *vc = [[TUIConversationListController_Minimalist alloc] init];vc.delegate = self;// 把 TUIConversationListController_Minimalist 添加到自己的 ViewController[self addChildViewController:vc];[self.view addSubview:vc.view];}- (void)conversationListController:(TUIConversationListController_Minimalist *)conversationControllerdidSelectConversation:(TUIConversationCell *)conversation{// 会话列表点击事件,通常是打开聊天界面}@end
步骤3:构建聊天窗口
初始化聊天界面时,需要上层传入当前聊天界面对应的会话信息。
示例代码如下所示:
#import "TUIC2CChatViewController.h"// ChatViewController 为您自己的 ViewController@implementation ChatViewController- (void)viewDidLoad {// 创建会话信息TUIChatConversationModel *data = [[TUIChatConversationModel alloc] init];data.userID = @"userID";// TUIC2CChatViewControllerTUIC2CChatViewController *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_MinimalistTUIC2CChatViewController_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 {// 创建 TUIContactControllerTUIContactController *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_MinimalistTUIContactController_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;// 创建好友资料 vcTUIFriendProfileController *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;// 创建好友资料 vcTUIFriendProfileController_Minimalist *vc = [[TUIFriendProfileController_Minimalist alloc] init];vc.friendProfile = data.friendProfile;// 展示好友资料 vc[self.navigationController pushViewController:(UIViewController *)vc animated:YES];}
说明
步骤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同时录制的语音消息对比:
第三方库依赖
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)
常见问题
提示 "target has transitive dependencies that include statically linked binaries" 如何处理?
如果在 pod 过程中出现该错误,是因为 TUIKit 使用到了第三方静态库,需要在 podfile 中注释掉
use_frameworks!
。
如果在某种情况下,需要使用 use_frameworks!
,则请使用 cocoapods 1.9.0 及以上版本进行 pod install
,并修改为:use_frameworks! :linkage => :static
如果您使用的是 swift,请将头文件引用改成 @import 模块名形式引用。
TUICallKit 和自己集成的音视频库冲突了?
腾讯云的 音视频库 不能同时集成,会有符号冲突,如果您使用了非 TRTC 版本的音视频库,建议先去掉,然后 pod 集成
TUICallKit/Professional
版本,该版本依赖的 LiteAV_Professional 音视频库包含了音视频的所有基础能力。如果您使用了 LiteAV_Enterprise 音视频库,暂不支持和 TUICallKit 共存。具体解决方案可以参考文档:音视频常见问题。通话邀请的超时时间默认是多久?
通话邀请的默认超时时间是 30 秒。
在邀请超时时间内,被邀请者如果离线再上线,能否立即收到邀请?
如果是单聊通话邀请,被邀请者离线再上线可以收到通话邀请,TUIKit 内部会自动唤起通话邀请界面。
如果是群聊通话邀请,被邀请者离线再上线后会自动拉取最近 30 秒内的邀请,TUIKit 会自动唤起群通话界面。
交流与反馈
欢迎加入 QQ 群进行技术交流和反馈问题。