Feedback
直播送礼组件

本文档将指导您如何在 iOS 项目中快速集成 TUILiveKit 的直播送礼组件。
组件概述
TUILiveKit 的礼物功能主要由以下两个核心视图组件构成:
组件名称
类名
功能描述
礼物选择面板
GiftListView
展示礼物列表，处理用户的点击选择和发送事件。
礼物播放组件
GiftPlayView
负责接收礼物消息，并在屏幕上渲染对应的动画特效（例如 SVGA 动画）。
效果演示
礼物面板
弹幕礼物
全屏礼物
﻿
﻿
﻿
﻿
﻿
﻿
﻿
﻿
﻿
快速开始
步骤 1.  开通服务
请参考 开通服务，领取 TUILiveKit 体验版或者开通专业版。
说明：
使用礼物系统要求开通 TUILiveKit 体验版、专业版，不同套餐中可配置的礼物数量有所不同，详细参见 功能与计费说明 中的礼物系统说明，您可按需选购。
步骤 2.  代码集成
请参考 准备工作 接入 TUILiveKit。
步骤 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
    
    init(liveId: String) { 
      self.liveId = liveId
      super.init(nibName: nil, bundle: nil)
    }
﻿
    init(liveId: String) { 
      self.liveId = liveId
      super.init(nibName: nil, bundle: nil)
    }
﻿
    required init?(coder: NSCoder) {
      fatalError("init(coder:) has not been implemented")
    }
    // ... 其他代码 ...
﻿
    public override func viewDidLoad() {
        super.viewDidLoad()
        // 2. 将组件添加到视图中并设置布局
        view.addSubview(giftListView)
        giftListView.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
    
    init(liveId: String) { 
      self.liveId = liveId
      super.init(nibName: nil, bundle: nil)
    }
﻿
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
      self.liveId = liveId 
    }
﻿
    // ... 其他代码 ...
﻿
    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 等高清透明动画。
组件名称	类名	功能描述
礼物选择面板	`GiftListView`	展示礼物列表，处理用户的点击选择和发送事件。
礼物播放组件	`GiftPlayView`	负责接收礼物消息，并在屏幕上渲染对应的动画特效（例如 SVGA 动画）。