一、组件概述
TUILiveKit 的礼物功能主要由以下两个核心视图组件构成:
| 组件名称 | 类名 | 功能描述 |
| 礼物选择面板 | GiftListView | 展示礼物列表，处理用户的点击选择和发送事件。 |
| 礼物播放组件 | GiftPlayView | 负责接收礼物消息，并在屏幕上渲染对应的动画特效（例如 SVGA 动画）。 |
二、效果演示
| 礼物面板 | 弹幕礼物 | 全屏礼物 |
| | | |
三、步骤 1. 开通服务
参考 开通服务 文档开通 TUILiveKit，使用礼物系统要求开通体验版、多人连麦版或大规模直播版。不同套餐中可配置的礼物数量有所不同，详见 功能与计费说明中的礼物系统说明，你可按需选购。
四、步骤 2. 代码集成
·工程配置：请参考 准备工作 完成 TUILiveKit 接入。
·版本限制：TUILiveKit >= 3.2.0。
五、步骤 3：接入礼物列表展示页面
在你的应用中接入礼物列表展示页面，使观众能够直观地看到可赠送的礼物列表。请参考示例代码创建 GiftListView 组件并添加到视图：
import TUILiveKitclass YourGiftViewController: UIViewController { // 1. 创建 GiftListView 对象 // – roomId: 与观众当前进入的直播间 roomId 一致 lazy var giftListView = { let view = GiftListView(roomId: liveId) return view }() private let liveId: String // … 其他代码 … public override func viewDidLoad() { super.viewDidLoad() // 2. 将组件添加到你的视图中并设置布局 view.addSubView(giftListView) giftPlayView.snp.remakeConstraints { make in make.leading.trailing.equalToSuperview() make.height.equalTo(256) make.bottom.equalToSuperview() } }}
六、步骤 4：接入礼物特效播放页面
在你的应用中接入礼物特效播放页面，GiftPlayView 组件已内置礼物消息接收与播放能力，请参考示例代码创建 GiftPlayView 组件并添加到视图：
import TUILiveKit// YourAnchorViewController 代表你的主播视图控制器，观众端可参考以下示例：class YourAnchorViewController: UIViewController { // 1. 创建并初始化 GiftPlayView 对象 // – roomId: 与观众当前进入的直播间 roomId 一致 lazy var giftPlayView = { let view = GiftPlayView(roomId: liveId) return view }() private let liveId: String // … 其他代码 … public override func viewDidLoad() { super.viewDidLoad() // 2. 将组件添加到你的视图中并设置布局 view.addSubView(giftPlayView) giftPlayView.snp.remakeConstraints { make in make.edges.equalToSuperview() } }}
七、步骤 5：导入默认礼物
你新申请的应用在礼物后台默认是没有配置任何礼物的，所以集成后你的礼物发送面板默认是空的，为了你能快速体验我们的礼物收发效果，你可以使用 服务端 API 一键导入我们为你预置的礼物素材。
八、下一步
完成上述 UI 集成后，你已经实现了客户端的礼物展示能力。为了构建一个完整的商业化礼物功能，你还需要参考 礼物系统后端对接与进阶功能 文档，完成以下核心业务逻辑的对接：
·自定义礼物配置：通过服务端 API 上传你自己的礼物图标、动画文件，并设置价格。
·礼物扣费回调：配置回调地址，将送礼请求转发至你的计费后台，实现“余额校验”与“扣费”闭环。
·PK 分数联动：在主播 PK 场景下，将礼物价值实时转换为 PK 分数。
·数据统计：获取礼物发送记录、总价值等运营数据。
·升级礼物动画特效 SDK：如果 SVGA 无法满足需求，可集成高级播放器支持 MP4/PAG 等高清透明动画。