iOS 定制指南(原生内核)

最近更新时间:2026-03-18 16:41:02

我的收藏
说明:
阅读本文前,请确保您已经了解并完成了 接入准备原生内核(iOS)快速接入 的基础集成。
SDK 支持将原生的 UIView 嵌入到课堂 UI 中。

1. 创建 Native View

继承 TCICViewFactory 并实现视图构建逻辑:
import Foundation
import UIKit
import tcic_ios
import Flutter

class MyHeaderLeftView: TCICViewFactory {
override init(messenger: FlutterBinaryMessenger) {
super.init(messenger: messenger)
}
override func createNativeView(frame: CGRect, viewId: Int64, args: Any?) -> UIView {
let view = UIView(frame: frame)
view.backgroundColor = .blue

let label = UILabel(frame: CGRect(x: 0, y: 0, width: 180, height: 48))
label.text = "My Header Left View From iOS"
label.textColor = .white
label.textAlignment = .center
view.addSubview(label)

return view
}
}

2. 将 Native View 注册到 SDK

在配置 TCICConfig 时,将自定义 View 传入对应的 ComponentConfig 中:
let headerConfig = TCICHeaderComponentConfig()

let headerLeftBuilder: TCICHeaderComponentConfig.HeaderBuilder = {
return MyHeaderLeftView(messenger: TCICManager.shared.Tengine.binaryMessenger)
}

headerConfig.headerLeftBuilder = headerLeftBuilder // 绑定 Builder
headerConfig.headerLeftBuilderWidth = 200 // 设置宽度
headerConfig.headerLeftBuilderHeight = 40 // 设置高度

let config = TCICConfig(
token: "YOUR_TOKEN",
classId: "YOUR_CLASS_ID",
userId: "YOUR_USER_ID",
role: 1,
headerComponentConfig: headerConfig
)
TCICManager.shared.setConfig(config)

API 参考

TCICConfig 配置类

基础配置

public class TCICConfig {
let token: String // 用户认证令牌
let classId: String // 课程 ID
let userId: String // 用户 ID
let role: Int // 用户角色
let langConfig: String? // 语言配置
let isLatestBackend: Bool // 是否使用最新后端环境
let isTestBackend: Bool // 是否使用测试后端环境
}

组件配置

public class TCICConfig {
let headerComponentConfig: TCICHeaderComponentConfig? // 头部组件配置
let messageComponentConfig: TCICMessageComponentConfig? // 消息组件配置
let videoComponentConfig: TCICVideoComponentConfig? // 视频组件配置
let fontConfig: TCICFontConfig? // 字体配置
let settingComponentConfig: TCICSettingComponentConfig? // 设置组件配置
let whiteBoardComponentConfig: TCICWhiteBoardComponentConfig? // 白板组件配置
let membersComponentConfig: TCICMembersComponentConfig? // 成员组件配置
}

回调配置 (TCICCallback)

public class TCICCallback {
/// 加入课堂成功回调
public var onJoinedClassSuccessBlock: (() -> Void)?
/// 退出课堂回调
public var afterExitedClassBlock: (() -> Void)?
/// 加入课堂失败回调
public var onJoinedClassFailedBlock: (() -> Void)?
/// 被踢出课堂回调
public var onKickedOffClassBlock: (() -> Void)?
/// 成员加入课堂回调 (参数为用户信息字典)
public var onMemberJoinedClassBlock: (([String: Any]) -> Void)?
/// 成员离开课堂回调 (参数为用户信息字典)
public var onMemberLeaveClassBlock: (([String: Any]) -> Void)?
/// 收到消息回调 (参数为消息内容字典)
public var onReceivedMessageBlock: (([String: Any]) -> Void)?
/// 发生错误回调 (参数为: 错误代码, 错误信息)
public var onErrorBlock: ((String, String) -> Void)?
}

组件配置系统

头部组件配置 (TCICHeaderComponentConfig)

let headerConfig = TCICHeaderComponentConfig()

// 设置左侧视图
headerConfig.headerLeftBuilder = {
return MyHeaderLeftView(messenger: TCICManager.shared.flutterEngine.binaryMessenger)
}
headerConfig.headerLeftBuilderWidth = 200
headerConfig.headerLeftBuilderHeight = 40

// 设置头部主视图
headerConfig.headerBuilder = { ... }
headerConfig.headerBuilderWidth = 300
headerConfig.headerBuilderHeight = 50

// 设置头部操作视图
headerConfig.headerActionsBuilder = { ... }
headerConfig.headerActionsBuilderWidth = 150
headerConfig.headerActionsBuilderHeight = 40

// 设置右侧视图
headerConfig.headerRightBuilder = { ... }
headerConfig.headerRightBuilderWidth = 200
headerConfig.headerRightBuilderHeight = 40

消息组件配置 (TCICMessageComponentConfig)

let messageConfig = TCICMessageComponentConfig()

// 设置消息头部视图
messageConfig.messageHeaderBuilder = { ... }
messageConfig.messageHeaderBuilderWidth = 200
messageConfig.messageHeaderBuilderHeight = 30

// 设置消息气泡视图
messageConfig.messageBubbleBuilder = { ... }
messageConfig.messageBubbleBuilderWidth = 250
messageConfig.messageBubbleBuilderHeight = 80

// 设置消息项视图
messageConfig.messageItemBuilder = { ... }
messageConfig.messageItemBuilderWidth = 300
messageConfig.messageItemBuilderHeight = 60

// 设置消息行视图
messageConfig.messageRowBuilder = { ... }
messageConfig.messageRowBuilderWidth = 350
messageConfig.messageRowBuilderHeight = 40

音视频组件配置 (TCICVideoComponentConfig)

let videoConfig = TCICVideoComponentConfig()

// 设置视频操作视图
videoConfig.videoActionBuilder = {
return MyVideoActionView(messenger: TCICManager.shared.flutterEngine.binaryMessenger)
}
videoConfig.videoActionBuilderWidth = 200
videoConfig.videoActionBuilderHeight = 50

// 设置视频浮动视图
videoConfig.videoFloatBuilder = {
return MyVideoFloatView(messenger: TCICManager.shared.flutterEngine.binaryMessenger)
}
videoConfig.videoFloatBuilderWidth = 120
videoConfig.videoFloatBuilderHeight = 80