文档反馈官招募中，报名立赚积分兑换代金券！> HOT
文档中心>实时音视频>直播与语聊房（含 UI）>UI 自定义>直播送礼组件>直播送礼组件 (iOS UIKit)

直播送礼组件 (iOS UIKit)

最近更新时间：2025-12-03 10:57:22

我的收藏

本页目录：

本文档将指导您如何在 Android 项目中快速集成 TUILiveKit 的直播送礼组件。

组件概述

TUILiveKit 的礼物功能主要由以下两个核心视图组件构成:
组件名称
类名
功能描述
礼物选择面板
GiftListView
展示礼物列表，处理用户的点击选择和发送事件。
礼物播放组件
GiftPlayView
负责接收礼物消息，并在屏幕上渲染对应的动画特效（例如 SVGA 动画）。

效果演示

礼物面板
弹幕礼物
全屏礼物










快速开始

步骤 1. 开通服务

参考 开通服务 文档开通 TUILiveKit，使用礼物系统要求开通体验版、多人连麦版或大规模直播版。不同套餐中可配置的礼物数量有所不同，详见 功能与计费说明中的礼物系统说明，您可按需选购。

步骤 2. 代码集成

视频直播场景：参考 准备工作 接入 TUILiveKit，版本限制： TUILiveKit >= 3.2.0。
语聊房场景：参考 准备工作 接入 TUILiveKit，版本限制： TUILiveKit >= 3.2.0。

步骤 3：接入礼物列表展示页面

在您的应用中接入礼物列表展示页面，使观众能够直观地看到可赠送的礼物列表。请参考示例代码创建 GiftListView 组件并添加到视图：
import TUILiveKit

class 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()
        }
    }
}

下一步

完成上述 UI 集成后，您已经实现了客户端的礼物展示能力。为了构建一个完整的商业化礼物功能，您还需要参考 礼物系统后端对接与进阶功能 文档，完成以下核心业务逻辑的对接：
自定义礼物配置：通过服务端 API 上传您自己的礼物图标、动画文件，并设置价格。
礼物扣费回调：配置回调地址，将送礼请求转发至您的计费后台，实现“余额校验”与“扣费”闭环。
PK 分数联动：在主播 PK 场景下，将礼物价值实时转换为 PK 分数。
数据统计：获取礼物发送记录、总价值等运营数据。
升级礼物动画特效 SDK：如果 SVGA 无法满足需求，可集成高级播放器支持 MP4/PAG 等高清透明动画。
中国站
目录